كيفية تغيير ستايل السكرول بار في بلوجر

كيفية تغيير ستايل السكرول بار في بلوجر 

اذا كنت تفكر في امكانية تعديل لون/عرض السكرول بار في مدونتك فهذا الدرس موجه لك.

بإمكانك مشاهدة مثال حي في مدونتنا زوون أراب، قمنا بتغيير شكل السكرول بار فيها، هل تعجبك؟

اتبع الخطوات التالية واجعل مدونتك أجمل:

اللون الافتراضي للسكرول بار هو دائماً الرمادي،

بإمكاننا التعديل على السكرول بار بالتعديل على اللون وعرض السكرول بار وطولها...

لعمل ذلك نحتاج الى التعديل على ستايل ال css ، بدون تأخير دعونا نقوم بذلك:

• الخطوة الأولى) قم بتسجيل الدخول الى حسابك في بلوجر >> ادخل الى قالب >> تعديل HTML .
• الخطوة الثانية) اضغط بأي مكان داخل الصندوق الذي يحتوي على أكواد المدونة واضغط على Ctrl+F من لوحة المفاتيح في ويندوز (Cmd+F من الماك) .
• الخطوة الثالثة) قم بالبحث عن الكود التالي ]]></b:skin> واضف أحد الأكواد التالية فوقه:

** سكرول بار أزرق مخطط:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #3366FF; border-radius: 10px; background-image: -webkit-linear-gradient(0deg,                                           rgba(255, 255, 255, 0.5) 25%,             transparent 25%,             transparent 50%,             rgba(255, 255, 255, 0.5) 50%,             rgba(255, 255, 255, 0.5) 75%,             transparent 75%,             transparent)}

** سكرول بار أخضر:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear,            40% 0%,            75% 84%,            from(#4D9C41),            to(#19911D),            color-stop(.6,#54DE5D))}

** سكرول بار أحمر وأسود:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444;}::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg,             transparent,             rgba(0, 0, 0, 0.4) 50%,             transparent,             transparent)}

** سكرول بار رمادي متدرج:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: #CCCCCC;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #FFF; background-image: -webkit-linear-gradient(90deg,                                           rgba(0, 0, 0, 1) 0%,             rgba(0, 0, 0, 1) 25%,             transparent 100%,             rgba(0, 0, 0, 1) 75%,             transparent)}

**سكرول بار رمادي وأسود متقطع:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg,                                           rgba(0, 0, 0, .2) 25%,             transparent 25%,             transparent 50%,             rgba(0, 0, 0, .2) 50%,             rgba(0, 0, 0, .2) 75%,             transparent 75%,             transparent)}

** سكرول بار برتقالي :

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90;  background-image: -webkit-linear-gradient(90deg,                                           rgba(255, 255, 255, .2) 25%,             transparent 25%,             transparent 50%,             rgba(255, 255, 255, .2) 50%,             rgba(255, 255, 255, .2) 75%,             transparent 75%,             transparent)}

** سكرول بار أسود:

 ::-webkit-scrollbar-track{ border: 1px solid black; background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #000000; }

** سكرول بار أزرق متدرج:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-image: -webkit-gradient(linear,            left bottom,            left top,            color-stop(0.44, rgb(122,153,217)),            color-stop(0.72, rgb(73,125,189)),            color-stop(0.86, rgb(28,58,148)));}

** سكرول بار برتقالي (كما في مدونتنا):

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90;  background-image: -webkit-linear-gradient(45deg,                                           rgba(255, 255, 255, .2) 25%,             transparent 25%,             transparent 50%,             rgba(255, 255, 255, .2) 50%,             rgba(255, 255, 255, .2) 75%,             transparent 75%,             transparent)}

** سكرول بار أزرق غامق وفاتح:

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #0ae;  background-image: -webkit-gradient(linear, 0 0, 0 100%,                    color-stop(.5, rgba(255, 255, 255, .2)),        color-stop(.5, transparent), to(transparent));}

** سكرول بار أسود :

 ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #000000; border: 2px solid #555555;}