الجميع يعرف ان مظهر المدونة له علاقة كبيرة بالسكرول بار ، لأنه يكون ظاهر في جميع الصفحات في المدونة ، ولهذا السبب تعود اهميته ، وفي هذا الموضوع ، قمت بصميم كود 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 مرات الى كود اللون الذي تريده.
لأستخراج الوان رائعة ، اضغط هنا ،
قم بنسخ كود الون وغير بما يناسب مدونتك
ليست هناك تعليقات: