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.
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
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 |
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.
If you are facing any problems implementing the code then you can send us your message by dropping comments.
