How to Add an Attractive Scroll Bar To Blogger Blog?

If you missed our previous article about "Display Social Media Icons In Blogger Header" then you should check. Simple Scroll bar looks very ordinary and it can leave a bad impact on your readers even if your blog has beautiful look. But with a simple customization make the scroll bars of your blogger blog advanced and attractive. Today, in this article we will show you how to add an attractive scroll bar to your blogger blog. So let's start.

How to Create an Attractive Scroll Bar in Blogger Blog? 

So now without wasting much time, we will just go straight forward with our tutorial...

The first thing you need to do go to Blogger dashboard. Now select your blog and go to Template ›› Edit HTML, and find ]]></b:skin> code in your template. Copy-Paste the below code just above ]]></b:skin> tag.

::-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, #0380C2 10%,#0380C2 51%);
}
::-webkit-scrollbar-track {
}

Now, save your blogger template and visit your blog. It's all done :) Congratulations!

Remember: 

Replace the color of scroll bar by changing #0380C2 with your desired color.

We hope you like this tutorial about How to Add an Attractive Scroll Bar To Blogger Blog?. Having any questions? Feel free to comment. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.