Easy way to Add a customized Scroll bar for blogger

Scroll bars are one of the Object that available in Graphical User Interface (GUI). Using a Scroll bar, you can continuous view a list of items. One of the main application of scroll bars are on websites. In 95% of cases, you can see a scroll bar of following type. They are scroll bars without any customization. That means default scroll bars.

 customized Scroll bar for blogger
Have a look on this blogs scroll bar. Is it interesting? Do you need a scroll bar for your blog of this type? Here I am going to show how you can customize your scroll bars on blogger platform.

Need of customizing scroll bars?

I don’t think that there is a need for changing the default scroll bars. Because it will not affect a blogs aim like Page Rank, Traffic or Search Engine Optimization. Only thing is that it will increase the look of your blog and attract your visitors.

How to customize Scroll Bars in Blogger?

Changing default scroll bar in blogger is very process. Follow the below steps.
  • Go to Dashboard
  • Click Template
  • Edit HTML
  • Now Search for the Code ]]>
  • Above that code paste the below described code.

Code For Custom Scroll bar in Blogger

::-webkit-scrollbar { background:#fff; width:10px; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); background-image: -webkit-linear-gradient(top, #FFD801 10%, #FFD801 51%); } ::-webkit-scrollbar-track { }
  • Now Replace #FFD801 with the color you need in your scroll bar.
At last your template will looks like the following
I hope that you had enjoyed this tutorial. If you have any doubt regarding the customization of scrollbars in blogger, comment below. I am happy to help you.

Leave a Reply