How to Customize Scrollbar in Blogger





Scrollbar appeared in right side of your website and helps your site visitors to navigate your site post and pages. If you’re visited any popular website then you may have seen customized scrollbar on their website that makes their pages more users friendly and attract more visitors. You can also see in right side of our website and got an idea that how your website looks like, when you add customized scrollbar in it. So if you want to add it in your website then simply follow some simple steps and customize its colors according to your website design because if its color appeared different from your website design colors then it may don’t looks like professional, so after adding it you can also customize it and makes your desired changes in it.

Why to Customize Scrollbar in Blogger?

There is no solid reason that why you need to customize scrollbar in blogger because it’s not most important that you must customize your scrollbar but you can just consider that if your website have one professional look and have user friendly design but whenever you seen your older scrollbar that makes your website ordinary so you must want to add one professional scrollbar in your blog and then customize its color according to your website design. Below we will shared one example image in which you can see difference between ordinary and customized scrollbar.
Customize-Scrollbar

How to Customized Scroll Bar in Blogger?

This is not a harder job, you just need to follow some simple steps and add CSS coding to your template, so it will quietly done job for you and give a new look to your website. Simply follow below instructions and add Webkit scroll bar to your blogger blog.

  • Go to Blogger Dashboard>> Template>> Edit HTML.
  • Now find ]]></b:skin> in your template and just above it past the follow coding.





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

  • Simply replace #FF3399 with any color that matched with your website design.
  • Now click on “Save Template” button and you’ve successfully added customized scrollbar blogger.


We hope after reading this article you can easily add and customize scrollbar according to your site design because nowadays everyone want to see something new and professional, so you can easily customize your website scrollbar by follow this method.
If you’ve any question about this topic or you liked this post then share your thoughts in comment section and also share our work with your friends. Don’t forget to subscribe our feeds for getting upcoming posts straight to your inbox.
Previous
Next Post »