Add Stylish Custom Scroll bar to Blogger

Make your blog/website a stylish look by adding a custom Scroll bar to Blogger, Check our blogger scroll bar style or check with live demo and how this works. add your custom background for scroll bar and custom color for thumb and give a elegant look to your blog/website.

This is a CSS code, before adding this please make sure you have basic knowledge :P just kidding, Just know how can you edit html and copy/paste the code change width and color codes to so that you can change scroll bar color and width that matches to your blog style.
Test this custom scroll bar to blogger in chrome browser where you cannot find difference in Mozilla Firefox, how to install this to your blogger is shown step by step tutorial please follow the instructions to add this.

Recommended : Add a subscribe newsletter below blogger posts with social follow buttons

Watch LIVE DEMO of Add Stylish Custom Scroll bar to Blogger

Live Demo

Step 1: Go to Blogger Dashboard >> Template

Step 2: Backup your Template

Step 3: Click EDIT HTML

Step 4: Click CTRL+F to Find for the code ]]></b:skin> and add the below code above it.

Code for Add Stylish Custom Scroll bar to Blogger

/*--------- Scrollbar Customization start --------- */
::-webkit-scrollbar {
width:10px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF; /*------This is background color of scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c0392b; /*------Thumb color ------*/
-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); /*------Shadow on hover------*/
}
::-webkit-scrollbar-thumb:active {
background:#333; /*------Thumb color when it is active------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}
/*--------------- Scrollbar customization end --------------*/

Step 6: This is very hard to do :P Just don't forget to save your template after pasting the above code.

Step 7: You can change the background color of the scroll bar and also the thumb of your requirement.

Step 8: After doing the changes in step 7 don't forget to save.

Step 9 : If You like this please share this let others know that this is helpful to you.

Incoming Search terms: