تغيير شكل Scrollbar ببلوجر

تغيير شكل شريط التمرير ببلوجر في هذه التدوينة سوف أساعدك على تحسين مظهر شريط التمرير Scrollbar، في الوقت الحالي تعمل فقط في متصفحات الويب مثل Opera و Chrome و Safari، لسوء الحظ لاتعمل على متصفح firefox and IE. لأن اضافتنا كليا تعتمد على Css كما يمكنك التعديل عليها بسهولة مثل الألوان، العرض، الطول

• معاينة

شرح طريقة التركيب
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 حول أشرطة التمرير

إن كانت لديك أي تساؤلات فالمرجو ترك تعليق، ارد على جميع التعليقات ولا تنسى مشاركة الموضوع.