G@M3S

Tuesday, October 23, 2012

Customize & Change Scrollbars Colors - Style - Size - Width etc.


Customize & Change Scrollbars Colors - Style - Size - Width etc.

scrollbarsScrollbars as you might see in every website is used to navigate and slide to other website content faster way, well you can click and drag the scrollbar and slide to the end of the website. But in all websites one thing is common that scrollbar is same and is boring. So now you can change the look of your scrollbar easily like we have done on our website, so if you are on chrome or firefox you might be watching new scrollbar working live
So now if you wanna change your scrollbars too than you can follow all the steps given below and make your scrollbar attractive too.

How to Change Scrollbars in Blogger Blog :

Well this below tutorial is for blogger blogs as its really easy to implement it in any blog, well this same tutorial can be followed for the Wordpress or any other blogs.
1. Go to Blogger.com and Sign in to your Account, now choose your blog and navigate to Template > Edit HTML.
2. Now press Ctrl + F to open the search box and search for ]]></b:skin> tag and paste the below code right above or before it.
::-webkit-scrollbar{height:14px;width:14px;background:#eee;border-left:1px solid #ddd}::-webkit-scrollbar-thumb{background:#ddd;border:1px solid #ccc}::-webkit-scrollbar-thumb:hover{border:1px solid #bbb}::-webkit-scrollbar-thumb:active{background:#ccc;border:1px solid #aaa}
3. Now hit the Save Template button and than refresh your blog to see scrollbars changed.

Customizing Scrollbars CSS :

Well that’s it now your main scrollbar code is set @ its place and your scrollbars are changed, well you can still change colors if you have knowledge about the HEX codes, you can also increase or decrease width of the scrollbars by editing the yellow highlighted number.

No comments:

Post a Comment