شرح تغيير شكل scrollbar في بلوجر بأكواد css فقط
بعد التدوينة السابقة التي قدمنا لكم فيها طريقة تغيير ستايل شريط التمرير سكرول بار Scrollbar في مدونة بلوجر ، لكن ذلك سكرول يستخدم فيه مكتبة الجي كويري ومكتبة نيس سكرول (Nicescroll) ، لكن في هذه التدوينة سنستخدم فيه فقط كود css والذي به ستحصل على اكثر من نوع. ويمكن تخصيصه على حسب ما تريد. ولتنبيه فان هذه الطريقة تشتغل فقط على متصفحات التالية Opera و Chrome و Safari.
شرح طريقة التركيب scrollbar في بلوجر:
قبل البدأ يمكنك معاينة انواع سكرول بار.
- سجل الدخول إلى مدونتك
- المظهر > تعديل HTML
- ابحث عن الوسم التالي
]]></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;
}
ملاحظة: يجب عليك ان تعرف اكواد السابقة لا تشتغل على المتصفحات التالية فايرفوكس و انترنت اكسبلورر.