CSS Styled Scroll Bar For Blogger

Have you noticed that since 2012 there has been change in the scroll bar of Google. Google was the first website who started changing the scroll bar. Since then it has become very popular as it looks better than the classic style. Having this scroll bar is just for a good look. This no difference in classic and this srollbar. This just to walk with time. Having this scrollbar makes your blog seem to be advanced. so have it in you blog.

Steps To Add CSS Styled Scroll Bar For Blogger

1. Login to your Dashnoard.
2. Go to Templates--->Edit html.
3. Find for ]]></b:skin>
4. Copy and paste the below code before/above ]]></b:skin> tag

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:  #AAA;
-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}
::-webkit-scrollbar-thumb:hover {
background: #888;
}
::-webkit-scrollbar-thumb:active {
background:  #AAA;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Now, Click on Save the Template.


It's Done.

Categories: Blogger Tricks , CSS