التخطي إلى المحتوى
تخصيص شريط التمرير في مدونات بلوجر | 10 أنماط شريط التمرير مميزة
تخصيص شريط التمرير في مدونات بلوجر

تخصيص شريط التمرير في مدونات بلوجر – هل فكرت يوما في كيفية تخصيص لشريط التمرير المخصص في مدونتك وجعلها أكثر جاذبية واحترافية؟ إذا كنت تتساءل عن كيفية فعل ذلك، أقدم لك أفضل 15 مثال يمكنك استخدامه.

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

كيفية تخصيص شريط التمرير في Blogger ؟

  1. قم بتسجيل الدخول إلى حساب Blogger >> اختر مدونتك.
  2. على الجانب الأيمن قم باختيار “المظهر” ثم انقر على زر تحرير HTML.
تخصيص شريط التمرير في مدونات بلوجر
تخصيص شريط التمرير في مدونات بلوجر

اضغط على أي مكان داخل منطقة الأكود واستخدام البحث CTRL+F وقم بالبحث عن العلامة ]]></b:skin> وبعد ذلك مباشرة قم بلصق هذه العلامات أدناه حسب اختيارك ثم انقر فوق زر حفظ القالب.

أنماط شريط التمرير
أنماط شريط التمرير

أفضل 10 أمثلة لشريط التمرير لمدونات بلوجر

لقد أدرجت هنا أفضل 10 أمثلة لشريط التمرير، يمكنك استخدامه على الفور دون التعديل بة. أيضا قدمت بإبراز في النمط السادس لإعطائك فكرة لإجراء تغييرات في شريط التمرير إذا كنت ترغب في جعلها حسب حاجتك.

النمط الأول #1:

تخصيص شريط التمرير في مدونات بلوجر

<style type=”text/css”>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #000000;
}
</style>

النمط الثاني #2

تخصيص شريط التمرير في مدونات بلوجر 2

<style type=”text/css”>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000000;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #FF0000;
}
</style>

النمط الثالت #3

تخصيص شريط التمرير في مدونات بلوجر 3

<style type=”text/css”>
::-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:#c9d5ea;
background:linear-gradient(135deg,#000000 0,#FF0000 50%,#FFFF00 50%,#000000 100%);
}
</style>

النمط الرابع #4

تخصيص شريط التمرير في مدونات بلوجر

<style type=”text/css”>
::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
::-webkit-scrollbar{
width:12px;
background-color:#FFF
}
::-webkit-scrollbar-thumb{
background-color:#00ACF5;
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-thumb:hover{
background:#008BC5;
}
::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)
}
</style>

النمط الخامس #5

تخصيص شريط التمرير في مدونات بلوجر

<style type=”text/css”>
:-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)
}
</style>

النمط السادس #6

تخصيص شريط التمرير في مدونات بلوجر

<style type=”text/css”>
::-webkit-scrollbar
{
width: 10px; /*——Change width of scrollbar——*/
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;  /*——Change background color of scrollbar track ——*/
}
::-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));  /*—— Scrollbar Thumb color ——*/
}
::-webkit-scrollbar-thumb:hover{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, transparent), to(transparent)); /*——Scrollbar Thumb Hover color ——*/
}
</style>

النمط السابع #7

تخصيص شريط التمرير في مدونات بلوجر 7

::-webkit-scrollbar{

width: 11px;

}

::-webkit-scrollbar-track{

background: #c4c6c8;

}

::-webkit-scrollbar-thumb{

background: #105B74;

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);

}

::-webkit-scrollbar-thumb:vertical:hover,

::-webkit-scrollbar-thumb:horizontal:hover{

background: #08A67C;

}

النمط الثامن #8

نمط 8

::-webkit-scrollbar {

width: 11px;

height: auto;

}

::-webkit-scrollbar-track {

border-radius: 10px;

box-shadow: inset 0 0 8px #00B141;

}

::-webkit-scrollbar-thumb {

background: yellowgreen;

border-radius: 10px;

box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:hover {

background: green;

}

::-webkit-scrollbar-thumb:active {

background: #000;

}

النمط التاسع #9

نمط 9

::-webkit-scrollbar {

width: 10px;

height: auto;

}

::-webkit-scrollbar-button {

width: 0px;

height: 0px;

}

::-webkit-scrollbar-thumb {

background: #0080ff;

border: 0px none #ffffff;

border-radius: 50px;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));

background: -webkit-linear-gradient(#09123c, #0e3e8d);

background: -moz-linear-gradient(#09123c, #0e3e8d);

background: -o-linear-gradient(#09123c, #0e3e8d);

background: -ms-linear-gradient(#09123c, #0e3e8d);

background: linear-gradient(#09123c, #0e3e8d);

}

::-webkit-scrollbar-thumb:hover {

background: #0000a0;

}

::-webkit-scrollbar-thumb:active {

background: #000000;

}

::-webkit-scrollbar-track {

background: #e2e2e2;

border: 0px none #ffffff;

border-radius: 50px;

}

::-webkit-scrollbar-corner {

background: transparent;

}

النمط العاشر #10

نمط 10

::-webkit-scrollbar {

width: 11px;

height: auto;

}

::-webkit-scrollbar-thumb {

background: #0080ff;

border: 0px none #ffffff;

border-radius: 50px;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));

background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);

}

::-webkit-scrollbar-thumb:hover {

background: #2E9AFE;

}

::-webkit-scrollbar-thumb:active {

background: #555;

}

::-webkit-scrollbar-track {

background: #e2e2e2;

}

::-webkit-scrollbar-corner {

background: transparent;

}

 

التعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *