شرح تغيير شكل scrollbar في بلوجر بأكواد css فقط

بعد التدوينة السابقة التي قدمنا لكم فيها طريقة تغيير ستايل شريط التمرير سكرول بار Scrollbar في مدونة بلوجر ، لكن ذلك سكرول يستخدم فيه مكتبة الجي كويري ومكتبة نيس سكرول (Nicescroll) ، لكن في هذه التدوينة سنستخدم فيه فقط كود css والذي به ستحصل على اكثر من نوع. ويمكن تخصيصه على حسب ما تريد. ولتنبيه فان هذه الطريقة تشتغل فقط على متصفحات التالية Opera و Chrome و Safari.

شرح تغيير شكل Scrollbar في بلوجر بأكواد css فقط

شرح طريقة التركيب scrollbar في بلوجر:

قبل البدأ يمكنك معاينة انواع سكرول بار.

- سجل الدخول إلى مدونتك

- المظهر >> تعديل HTML

- ابحث عن الوسم التالي

]]></b:skin> 

بعد ايجاده ضع فوقه كود سكرول الذي يناسبك من بين اشكال التالية. (اختر كود واحد فقط).

1- شريط التمرير الاول (الابيض):

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;

}

2- شريط التمرير الاول (النحيل):

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;

}

3- شريط التمرير الاول (الأسود):

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;

}

4- شريط التمرير الاول (البرتقالي):

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;

}

5- شريط التمرير الاول (مجرة):

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;

}

6- شريط التمرير الاول (الأخضر):

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;

}

ملاحظة: يجب عليك ان تعرف اكواد السابقة لا تشتغل على المتصفحات التالية فايرفوكس و انترنت اكسبلورر.