Create Google like Scroll bar in blogger blog

If you look back at Google web pages back in mid 2011, they were simple just like a classic web page like other pages but 2012 seems to be a design year and that's why each and every big company painted their web pages with dynamic looks and features. One of the extraordinary thing about Google is it's scroll bars, they are just awesome and anyone wants to implement it, this tutorial will show you how to do that.

Many websites used the same design for scrollbar with different techniques, some with JQuery or etc. Many blogger users also wanted to use the same design for their blog but they were helpless as most of the blogger users just have basic knowledge of web languages so it was difficult for them to make such design on their own.



Before
After
This tutorial will teach you how to design the scrollbars like that in blogger.
Actually the trick is very simple, the scrollbars are design with new CSS3 scrollbar selectors which only works in webkit, unfortunately their's currently no way to make it work in non webkit browsers such as Firefox, Opera etc.

I have recently published 'Dream Blog V2' template in which i have implemented the scrollbar design. So here's the demo


Demo

The CSS

It is all CSS which do the designing on the scrollbar and you don't need to worry about heavy javascript codes, a simple CSS code block can do it. This is the CSS, you don't need to make any changes in this code but if you know what to do then you can change color and some values to fit your needs.
/* 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: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Adding the CSS

Adding this CSS is easy, check this tutorial or follow these steps.
  • Go to Blogger Dashboard 
  • Select the Template tab
  • Click on Customize button
  • When you are in template designer, select Advanced
  • And from the Advanced menu select Add CSS 
  • Paste the CSS there and hit Apply to Blog. 
That's it, now clear and caches and reload your blog by hitting CTRL+F5 and you will see the Google like scrollbars on your blog, now when your readers ask you how you did it you can tell them about us :)

If you are facing any problems implementing the code then you can send us your message by dropping comments.