تغيير Scroll-Bar فى بلوجر

يمكنك الان تغيير Scroll-Bar فى بلوجر وتغييرة لاضافة لمسة جميلة الى موقعك حيث

تغيير واختيار ما ترغب فية من اضافات ذات الوان واشكال متنوعة لتضيف افضل الالوان

لاستكمال المنظر الجميل للمدونة .. قم بتجربتها اولا ستعجبك جدا

  - قم بالتوجه الى بلوجر > القالب > تعديل القالب > ابحث عن الوسوم التالى

]]></b:skin>

قبل هذا الوسم قم باضافة الاكواد التالية :

Scroll-Bar الاول :

::-webkit-scrollbar { height:12px; width: 12px; background:#646060; } ::-webkit-scrollbar-thumb { background-color: lightgray; }

Scroll-Bar الثانى :

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4);
}

Scroll-Bar الثالث :

::-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)
}

Scroll-Bar الرابع :

     ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #FFF;
        -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    }
    ::-webkit-scrollbar-thumb {
        background: #CCC;
        -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #AAA;
    }
    ::-webkit-scrollbar-thumb:active {
        background: #888;
        -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
    }

Scroll-Bar الخامس :

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

السادس Scroll-Bar :

::-webkit-scrollbar {
height:12px;
width: 12px;
background:#646060;
}
::-webkit-scrollbar-thumb {
background-color: #FFFFFF;
-moz-border-radius: 10px;
border-radius: 10px;
}

 

العديد من الاشكال يمكنك الاختيار بينها لما يناسب مدونت