تغير لون شريط التمرير او السكور بار

اذهب الى الأسفل

تغير لون شريط التمرير او السكور بار

مُساهمة من طرف Admin في الجمعة يونيو 10, 2016 9:03 pm

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

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

Admin
Admin

المساهمات : 55
تاريخ التسجيل : 10/06/2016

معاينة صفحة البيانات الشخصي للعضو http://tgm3.a7larab.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى