How to add /change the color and look and feel of the scrollbar of the browser for your blog or website?
Hi friends, you must have seen colorful or
customized scrollbar on many blogs and websites and if you are willing
to apply it on your blog or website than please follow bellow
instructions.
Changing scrollbar look and feel and color on blogger’s blog
To
enable colorful scrollbar in the blogger’s blog you need to edit HTML
template of the blog. If you do not know HTML, don’t worry and apply
following easy steps and it will be done. (Note: This changes works best in Internet Explorer browser only, for other browser it may or may not work)
1. Login to blogger.com and go to Dashboard
2. Now go to Layout or Template of the blog for which you wanted to change the header image or add the new header image
3. Now you are at Layout -> Page Elements. Click on Edit HTML link to edit HTML template for the blog
4. Here
the first thing you need to do is take a back of your HTML template.
Hence you can restore it later if you wanted to undo changes (Click here to know how to backup and restore HTML template for blogger’s blog)
5. Now search for </head> in the HTML Template
6. Copy and paste following code before </head> tag in the HTML template code
<style type="text/css">
html {
scrollbar-arrow-color:#6E0502;
scrollbar-track-color:#940400;
scrollbar-face-color:#6BE02;
scrollbar-highlight-color:#909400;
scrollbar-3dlight-color:#333333;
scrollbar-darkshadow-color:#473624;
scrollbar-shadow-color:#BFB186;
}
</style>
html {
scrollbar-arrow-color:#6E0502;
scrollbar-track-color:#940400;
scrollbar-face-color:#6BE02;
scrollbar-highlight-color:#909400;
scrollbar-3dlight-color:#333333;
scrollbar-darkshadow-color:#473624;
scrollbar-shadow-color:#BFB186;
}
</style>
7. Then “PREVIEW” button to check weather everything is alright.
8. If everything is alright then click on “SAVE” button to save the HTML template or click on “CLEAR EDITS” to undo changes if it doesn’t work well.
9. Finally
if you are not happy with new look and feel or template then you can
always restore the backed up HTML template at step 4 ( follow the
instruction to restore the backed up template) J
Changing scrollbar look and feel and color for other blog or website
1. In the source code of your blog or website find </head>
2. Just before </head> copy and paste following code
<style type="text/css">
html {
scrollbar-arrow-color:#6E0502;
scrollbar-track-color:#940400;
scrollbar-face-color:#6BE02;
scrollbar-highlight-color:#909400;
scrollbar-3dlight-color:#333333;
scrollbar-darkshadow-color:#473624;
scrollbar-shadow-color:#BFB186;
}
</style>
html {
scrollbar-arrow-color:#6E0502;
scrollbar-track-color:#940400;
scrollbar-face-color:#6BE02;
scrollbar-highlight-color:#909400;
scrollbar-3dlight-color:#333333;
scrollbar-darkshadow-color:#473624;
scrollbar-shadow-color:#BFB186;
}
</style>
3. And save your code and everything is done.
