Add Images or Icons to Sidebar links

Add Images or Icons to Sidebar links

Sidebars are sometimes crowded with lots of text. There are many ways to make some of the items stand out. In my case, I decided that I will add icons next to the links, to differentiate links from normal text. I will also draw a thin line after each link. To be consistent, the color of these lines shall be the border color.

Note: This is the style we used for our Minima template. Since each type of template has its unique margin, padding and style settings, this guide may not apply to these other 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 read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. 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.