Customize Default Blogger Scrollbar to Gmail Like Scrollbar


Best Movies Sites: TOP 10 MOVIE WEBSITES


gmail like scrollbar for blogger
Are you tired of seeing your default Blogger scrollbar at all the time? You may have probably noticed Gmail scrollbar while you're in Gmail account. As you know it seems at the right side of the screen and majority of bloggers use this scrollbar to scroll down the page instead of mouse's Scroll wheel. So let me tell you how you can make your blog by implementing more attractive and user friendly a customized Gmail style scrollbar with hover effect.


   Is It Necessary to Use a Custom Scrollbar in Your Blog?

It's not necessary to change your default Blogger scrollbar into a customized Gmail style scrollbar. But if you're using the normal scrollbar, your visitors might have felt your blog erstwhile. People always prefer to see something new in your blog. Therefore, if you prefer to seem your blog often fresh you've to use a custom scrollbar. And this custom scrollbar is easy to customize its size, background and hovering colors etc...Consequently, just make an enhancement and I promise it'll definitely attract your visitors.

jQuery custom scrollbar

Gmail Styled Scrollbar: Free Live Demo | Download the CSS Style Sheet


   How to Customize Your Default Blogger Scrollbar?

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before you customize
  • Click on Edit HTML tab
  • Expand Blogger template | See how it's - screenshot
  • Press Ctrl + F and search the code ]]></b:skin>

Step #2: Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the 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: #6E6E6E;
}
::-webkit-scrollbar-thumb:active {
    background: #585858;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Please note! Hope you don't need any help to customize this scrollbar in your own sweet way. All the basic customizations are already highlighted (in different colors). More over, if you're a newbie and prefer any customization, follow below steps and still be in doubts? never be indecisive to mention them via comment.

  • width: 15px - Change the width of your scrollbar by customizing 15px.
  • background: #FFFFF - Change the background color of the scrollbar track.
  • background: #646464 - Change the background color of the scrollbar thumb.
  • background: #6E6E6E - Change the hover color of the scrollbar thumb.
  • background: #585858 - Change the active color of the scrollbar thumb.

   Newbie? How to Add your CSS Code without Editing Template

  • Go to Blogger Dashboard » Template
  • Click on Customise button
  • Click on Advanced menu
  • Scroll down & select Add CSS
  • Paste the CSS there & hit Apply to Blog. (See below ▼ screenshot)

Blogger Add CSS
Important! Don't forget to clear your browser's cache and reload your blog (Use Ctrl+F5) to see the final result.