How To Add Modern Scroll Bar In Blogger?


How To Add Modern Scroll Bar In Blogger?


Go To Blogger Dashboard>>Template>>Edit Template.
Now Search For The ]]></b:skin> Tag With The Help Of CTRL+F.
Now Paste The Following Below Code Above The ]]></b:skin> Tag.
Save Template And Enjoy.

/*-------Modern Coloured Scrollbar Bar For Blogger------- */
::-webkit-scrollbar {
width:12px;
height:8px;
}
::-webkit-scrollbar-track {
background:#dcdcdc; 
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #31bd03;
}
::-webkit-scrollbar-thumb {
background:#25c108; 
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:active {
background:#333; 
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);

}

Customization:

If You Want Change Width and Height Change The Following PX With Your Own Need Which Is Highlighted With Blue Color In Above Coding. 12px;8px;
If You Change The Color Of Track Then Change #dcdcdc With Your Own Color.
If You Want Change The Scroll Bar Thumb Color Then Change #25c108 With Your Own Need.

Need Our Help:
If you're facing any problem about this scroll bar I here to help you just mention your problem in the comment section.And also don't forget to share this with friends and family who are blogger users and also share this in social media.
Share on Google Plus

About Ravindu

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment