How to put Scroll Bar Effect on Blogger blog

Putting a different scroll bar for your blogger site will make your blog looks something different to other blogs out there. But before reading below, You may also like my recent article on How to put animated loading Page on Blogger for a much cooler site. Don't worry because this scroll bar is very lightweight and will not affect the loading speed of your Blogger Blog.

What's Scroll Bar?

• Scroll Bar is what you drag up and down to navigate to a website that you can see on the right side of my Blog. Scroll Bars are really helpful for your visitors so what you need is to just put a bit coding for your visitors to much like your Blog.

Procedure for putting the Scroll Bar effect on your Blogger Blog:

• First thing to do is to go to Templates then click HTML.
• Then find this Code Below:
• Put the code below just above: ]]></b:skin>
• Then Hit Save.

/* SCROLL BAR  EFFECT */
::-webkit-scrollbar {
width:11px; height:8px; 
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#eee; 
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(116,188,99,0.5);
/* SCROLL BAR  EFFECT */ 

Customizing the Scroll Bar Effect on Blogger:

• width:11px; - Change the 11 to change the width of your Scroll Bar.
• height:8px;  - Change the 8 to change the height.
• #eee; - Change the eee to your desired color of your scroll bar.

NOTE:

It's more okay to not change the code to not ruin the coding of your Scroll Bar. But it's also good to experiment the size or the color or the whole coding of the scroll Bar just for fun. Happy Coding and if you have any problems with the scroll bar, Please comment below.