How To Change Scroll Bar Of a Blog

Every Body likes those things who are completely different from another. Scroll bar in a website leave a amazing impression on visitors if scroll bar is completely customize then the blog looks more beautiful.
Scroll bar is located in a right side of the blog which helps to scroll down and scroll up the whole web page.
There are many browsers which display different scroll bar. Like firefox display diferent view than chrome. If anyone have Firefox it will displayed as Firefox built scrolling style,
 Latest operating systems displays more beautiful view of scroll bar than old onez. 
Here is some example of scroll bar below.

This type of scroll bar is known as CSS customize scroll bar.

\

So lets see how we can change the scroll bar.

Steps to change style of Scrolling Bar:

Step 1: Go to Blogger Dashboard> Template> Edit HTML.
Step 2: Copy the following code.

/* Webkit Scrollbar */

::-webkit-scrollbar {

width: 15px;

}

::-webkit-scrollbar-track {

background: #ffffff;

-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;   

border: 1px solid #D8D8D8;

}

::-webkit-scrollbar-thumb {

background: #646464;

-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);  

}

::-webkit-scrollbar-thumb:hover {

background: #AAA;

}

::-webkit-scrollbar-thumb:active {

background: 000066;

-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);

}

Step 4: Now search for the following code.

<b:skin>

Step 5: Paste the above code just after/above the ]]></b:skin>.

You have done this. Now refresh you blog page and you will see a new look of you scrolling bar.