تغيير شكل السكرول بار (شريط التمرير) بشكل راقي واحترافي

طريقة تغيير شكل السكرول بار Scrollbar بشكل رائع

الجميع يعرف ان مظهر المدونة له علاقة كبيرة بالسكرول بار ، لأنه يكون ظاهر في جميع الصفحات في المدونة ، ولهذا السبب تعود اهميته ، وفي هذا الموضوع ، قمت بصميم كود CSS لتغيير شكل السكرول بار الى آخر احترافي وبتأثيرات رائعة وحصرية مع اعطائكم امكانية تغيير الوانه وتنسيقه حسب ذوقكم.

تركيب الكود :

توجه الى "حسابك في بلوجر"

ثم "قالب"

ثم "تحرير html"
ثم بأستخدام "ctrl+f" ابحث عن الكود التالي :

]]></b:skin>

ثم ضع فوقه "قبله" الكود التالي :

::-webkit-scrollbar { background:#e1e1e1; width:15px;}
::-webkit-scrollbar-thumb {
-webkit-shadow:inset 0 0 6px rgba(0,0,0,0.5);
background:#00AFFF;
}
::-webkit-scrollbar-track {
-webkit-shadow:inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius:30px;
}
::-webkit-scrollbar-thumb:hover {background:#0096DC;}
::-webkit-scrollbar-thumb:active {background:#007EC1;}

::-moz-scrollbar { background:#e1e1e1; width:15px;}
::-moz-scrollbar-thumb {
-moz-shadow:inset 0 0 6px rgba(0,0,0,0.5);
background:#00AFFF;
}
::-moz-scrollbar-track {
-moz-shadow:inset 0 0 6px rgba(0,0,0,0.3);
}
::-moz-scrollbar-thumb:hover {background:#0096DC;}
::-moz-scrollbar-thumb:active {background:#007EC1;}

::-o-scrollbar { background:#e1e1e1; width:15px;}
::-o-scrollbar-thumb {
-o-shadow:inset 0 0 6px rgba(0,0,0,0.5);
-
background:#00AFFF;
}
::-o-scrollbar-track {
-o-shadow:inset 0 0 6px rgba(0,0,0,0.3);
-o-border-radius:30px;
}
::-o-scrollbar-thumb:hover {background:#0096DC;}
::-o-scrollbar-thumb:active {background:#007EC1;}

تنسيق الكود :

ملاحظة هامة قبل تغيير الألوان : الكود لديه ثلاثة الوان مختلفة ، الاول هو اللون الطبيعي للسكرول بار ، والثاني هو لونه عند وضع مؤشر الفأرة عليه ، والثالث هو لونه عند الضغط عليه
انا قمت بوضع الأول ازرق فاتح والثاني ازرق داكن قليلاً ، والثالث ازرق داكن !
لذا اذا اردت تغيير لون السكرول بار عليك تغيير الثلاثة الوان معاً !

لتغيير لون السكرول بار قم بتغيير الكود الملون بالاحمر والمكرر 3 مرات الى كود اللون الذي تريده.
لتغيير لون السكرول بار عند وضع مؤشر الفأرة عليه غير الكود الملون بالأخضر والمكرر 3 مرات الى كود اللون الذي تريده.
لتغيير لون السكرول بار عند الضغط عليه غير الكود الملون بالبرتقالي والمكرر 3 مرات الى كود اللون الذي تريده.

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


هام جداً : يمنع نقل الموضوع بدون ذكر المصدر موثق بالرابط



لا تنسى ترك تعليق ^_^

تحياتي