Sunday, January 31, 2010

bench3

How To Add Images Or Icons To Links In The Sidebar For Blogs Hosted In Blogger

Sidebars are sometimes crowded with lots of text. There are many ways to make some of the items stand out.  You can add image to each link as what you see in most blogs (refer image) to differentiate links from normal text. And you can also draw a thin line after each link. To be consistent, the color of these lines shall be the border color. Well, we will see how to do it.
Note: Since each type of template has its unique margin, padding and style settings, this guide may not apply to few templates. You can try to adapt this to your template. Preview the change, and adjust the margins and paddings. Often, a bit of experiment with these values will do the trick. If they still don't look satisfactory, do not save the template.
First, scout around for a picture that you would like to use. In this site, I have used an arrow image. You can use any photo editing software to reduce the image size to about 9px x 9px; I used Google's Photo Editing Software Picasa.

After having an image, upload it onto a free server. You can use free hosts like Google Page Creator and Google Groups. There were also a rather comprehensive list of free Image Hosts and File Hosting Services available. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the URL of the Image file.

Go back to “Template” tab and click “Edit HTML”. Scroll to look for the following lines:-

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

Replace them with this:-
.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("URL OF IMAGE FILE") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}

Remember to insert the URL OF IMAGE FILE into the code.

If you don't want the line at the bottom of every item, delete the border-bottom code (shown in green) or change the value to 0px.

Preview to see if you like the layout. If it is fine with you, Save the Template.

Problem With Text overlapping In Your Blog?
Follow this trick if you find any overlapping in your blog. Find the following code in your template...

.sidebar li { 
padding:0 0 .25em 15px;
text-indent:-15px;

Try removing the indent and adjusting the padding values. They vary depending on the size of your image. 

Does Your Template Already Having An Link Image?
In any case, to see the icons, you can go to 
#sidebar
and look for the image URL. If you want to replace the image, you can upload your new image onto a server, and then insert your new link.

bench3

About bench3 -

Haja Peer Mohamed H, Software Engineer by profession, Author, Founder and CEO of "bench3" you can connect with me on Twitter , Facebook and also onGoogle+

Subscribe to this Blog via Email :