Oct 12, 2015

How To Customize & Change Color Of Scrollbar in Blogger

Wanna Change or customize color of scrollbar of your blogger blog then you are on right platform. You can see live example on our blog itself. is this nice? These things are of little importance compared to your blog content so do not waste your time on the things like adding every other widget to your blog. Bear with your great content and serve your audience with your best of best. Always give them royal treatment because? They deserve it same as you do. :) 

If you want to make your blog eye catching, colorful, look like professional, and user friendly too, then you must have to install this colorful scrollbar style on your blogger blog. So if you want to change color and width of scrollbar on your blogger blog then follow below step by step tutorial and do same on your blog.
How To Customize and Change Color Of Scrollbar On Blogger
Customize and Change Color Of Scrollbar

How To Customize ScrollBar In Blogger?

Default color of scrollbar in every browser is grey which can be customized thoroughly. We can customize our blogger's default scroll-bar by customizing its width, height, scrollbar track color, thumb color, thumb hover color and thumb color when scroll-bar is active. To do so, all we need to do is add these styles to our blogger template's CSS style-sheet. Without further delay, let us do the job.

  • Login to your blogger account >> go to Template >> Edit HTML.
  • Click anywhere inside the template code box then press Ctrl+F on windows and Cmd+F on mac.
  • Find out this little piece of code line ]]></b:skin> and just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
    Scrollbar Customization by MyBloggerGuides
    ::-webkit-scrollbar {
    ::-webkit-scrollbar-track {
    background:#FFF;  /*------This is background color of scrollbar track ------*/
    -webkit-box-shadow:inset 2px 2px 4px #E0E0E0;
    border:1px solid #D8D8D8;
    ::-webkit-scrollbar-thumb {
    background:#c0392b;  /*------Thumb color ------*/
    -webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
    ::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4); /*------Shadow on hover------*/
    ::-webkit-scrollbar-thumb:active {
    background:#333;   /*------Thumb color when it is active------*/
    -webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
  • Hit save button :) In the above CSS code, I have added proper comments to change the color codes to make it easy for every one.
  • That's it. you have successfully customized and change color of your blogger blog scrollbar.
  • Do not forget to visit your blog after adding these styles. How can you forget? Right? lol


So above guide is about How To Customize & Change Color Of Scrollbar in Blogger Blog. Hope you will like this post. If you have further questions, follow the comment route, am eagerly waiting to help you do the job :) Please do share your blog URL in comments and I'll personally visit every one's blog to check which colors you have chosen. I'll leave a comment too. Fair enough? huh? Do share, subscribe and like our page buddy, you can do it. :) Now do share, subscribe and like our page buddy, you can do it. :)

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.