Monday, April 27, 2009

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>

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>

3. And save your code and everything is done.


Related Articles

How to embed Adsense code within post (after post title and before post body) for the blogger blog ?

How to have Add a Gadget option for Blog Post section of the blogger’s blog and how to make Blog Post gadget / widget moveable?

How to have Add a Gadget option for Header section of the blogger’s blog and how to make Header gadget / widget moveable?

How to add / Change Header image of blogger’s blog?

How should I restore my blog’s logo after changing to custom template?

How should I change my blog’s logo?

Change the order of the blog post archive

How to enable / disable adsense ads for the blog post widget ?

My blog is lost or forgot username / password of blogger blog

How to change scroll bar color and look and feel for a blog or website / web page?

Blogger Link list with the scroll bar support - link list with large set of links

How to change value of Older Post / Newer Post / Home for the blogger's blog

Enable / Disable receiving comments alert on email for blogger blog

How to make comments for blogger's blog moderated and How to moderate comments ?

Share |

No comments yet

Topics

 
Embed Wave to Blogger