Friday, December 23, 2011

How to do scrollbar(included Hovering)?

Hello guys,actually Christmas is so near from now,and of course loving snowing time but here its like raining all the day...so to make your blog more stunning,so I'll be doing this tutorial to y'all.Erm,actually you can find anyway but here's special,haha...ONLY WORK ON Google Chrome!!!

And as you can see it at my blog...of the scrollbar,I mean.
Click to POP out!
After you touch the thumbs and it'll turn to light green and this is called hovering and we can put it like hovering and this is for hovering if you like and you can follow this steps....

First you needed to go to Design-->Edit HTML-->Search engine (F3 or CTRL+F)
Then find this code:::
]]></b:skin>
Then just paste this code before the code we found:::
::-webkit-scrollbar {
height:12px;
width: 13px;
background: your color code 1;
}
::-webkit-scrollbar-thumb {
background: your color code 2;
}
::-webkit-scrollbar:hover {
background:  your color code 1;
}
::-webkit-scrollbar-thumb:hover {
background:  your color code 2;
}
Attention--> 
"your color code 1" Is before hovering.
"your color code 2" Is after hovering.


If you want them to be a bit of curving or rounded..you can add this for thumb after:
background:your color code;
[Here]
But only only for thumb-->webkit-scrollbar-thumb &  webkit-scrollbar-thumb:hover ONLY!
-moz-border-radius: 0px;
          border-radius: 0px;
You can add how much px you want the more the more rounded you want.
And that's for Hovering....

Another its just easy as ABC the same you needed to find this code...& its basic.
]]></b:skin>
Then the same again paste this code before the code we found...
 ::-webkit-scrollbar {
height:12px;
width: 13px;
background: your color code;
}
::-webkit-scrollbar-thumb {
background: your color code ;
}
If you wanna add more rounded you can add this code after
::-webkit-scrollbar-thumb {
background: your color code ;
[Here]
-moz-border-radius: 0px;
          border-radius: 0px;
If you don't want do with colors you can change it to backgrounds image as for sure...
But you need to change the background into background-image...
EXAMPLE:::

 ::-webkit-scrollbar {
height:12px;
width: 13px;
background-image:url(YOUR IMAGE URL/DIRECT LINK);
}
::-webkit-scrollbar-thumb {
background:url(YOUR IMAGE URL/DIRECT LINK)  ;
}
Then just put your image url,then it would change!
I hope you guys could do it!And Merry Christmas EVE!Haha. :)

No comments:

Post a Comment

Thank you for the comments!!!Obrigado. :)