تغيير شكل Scrollbar في مدونات بلوجر

السلام عليكم ....  ، اليوم لدينا اضافة جديدة من اضافات بلوجر وهي تغيير شكل Scrollbar او ما يدعي شريط التمرير في مدونات بلوجر الي اشكال اكثر احترافية، تساعدك على تحسين شكل مدونتك اما زوارك ، الاضافه تعمل على اغلب المتصفحات المشهوره مثل Opera و Chrome و Safari

• معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الشكل فوقه

اشريط التمرير الأبيض

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

شريط التمرير النحيل

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

شريط التمرير الأسود

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

شريط التمرير البرتقالي

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

شريط تمرير مجرة

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

شريط التمرير الأخضر

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

اضغط على زر التطبيق لحفظ التغييرات وسيكون لديك سكرول بار بأسلوب جديد. تذكر أنك إذا كنت تستخدم متصفح فايرفوكس أو انترنت اكسبلورر فلن تنجح الطريقة.

التفسير

العناصر المتوفرة لتخصيص شريط التمرير في متصفحات الويب هي التالية:

:: - webkit-scrollbar {} / * شريط التمرير * / 
:: - webkit-scrollbar-button {} / * السهام * / 
:: - webkit-scrollbar-thumb {} / * مؤشر التمرير * / 
:: - webkit-scrollbar-track {} / * حاوية شريط التمرير * / 
:: - webkit-scrollbar-track-piece {} / * شريط التمرير * / 
:: - webkit-scrollbar-corner {} / * الزاوية السفلية من أشرطة التمرير * / 
:: - webkit-resizer {} / * شريط السحب لتغيير الحجم * /

عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع القواعد ومع ذلك، إذا كنت تريد معرفة المزيد عنها ، أوصي بمقالة scroll bars حول أشرطة التمرير

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

شارك المقال على :

فيس بوك

تويتر

جوجل بلس

لينكد إن

Karim Mahran‏

كريم مهران , من مصر , مصمم ومطور مواقع , متخصص تحديداً في منصة بلوجر , شغوفٌ بالتدوين , أنشات هذه المدونة لأقدّم لك مُنتجــاً حصرياً أحرص أن يكــون مُفيــداً وشيّقــاً مُختلفاً لك ,محب لإفادة الأخرين بما أملك , أطمح من خلال مقالاتي على هذة المدونة أن تساعِدك على تحقيق أهدافِك و تسهيل حياتك لتُصبح أكثر عطاءاً و إنتاجيّة.

المزيد عني

السابق التالي

مواضيع ذات صلة :