5 اشكال Scroll-Bars فى بلوجر

فى بوست سابق شرحنا كيفية تغيير Scroll-Bar فى بلوج ر لاضافة لمسة جميلة لمدونتك حتى تحصل على شكل مميز يعجب زوار المدونة فى حركات بسيطة...

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

حتى تحصل على شكل مميز يعجب زوار المدونة فى حركات بسيطة ويمكنك ايضاً

ان ترى العديد من هذه الاشكال والالوان فى مدونتك

بعد الاطلاع على الموضوع السابق يمكنك معرفة فى اى مكان يمكنك لصق كود 

Scroll-Bar الذى اخترته لمدونتك

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

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