Related Posts Plugin for WordPress, Blogger...

Friday, May 24, 2013

How to change your blog's scrollbar

                                                                                
                              

Everybody likes things which are different. So how about changing your scroll bar into a different one? We need to add some codes to your blog's HTML (template) so that means the first step for you is to go to Blogger>Template>Edit HTML. HTML is a little complicated for some blogger users but you will get familiar with it as you bring many changes to it or get practice. Now lets see how we change the scroll bar.
But before you start this, you should remember that the scroll bar change only works on webkit browsers. It will not work in browsers such as Firefox, Opera etc.

Step 1: Go to Blogger>Template>Edit HTML

Step 2: Press Ctrl+F and search for 
. When you find this code, paste the below code just before it.

/* 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: 000066;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Step 3: Now go for preview template and if you see the change, you are done. If not, you may have done something wrong.