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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف 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

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


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