Add icon / picture to Labels and Links in Blogger Sidebar

November 12, 2008

This way, you can make your Blogger XML template Links (Labels and all other links) look nicer. Or not. Depends what you like. So here's what you have to do.
This is an example, and remember, you can add whatever picture you like. Also take this one, if you like it...

We've added the black arrow to our labels to make them distinguish a bit more. First, you have to prepare your picture (icon, image). Choose the one you like, but keep in mind:

• keep the pics small size 15 x 15 (px). smaller is also alright ....
• save your pics as ".png" files when you edit them in editor (so they blend with template background)
• you don't have to use " .png" format if the background of icon (picture) is the same color as your template background
• upload your picture to a free web host services (Photobucket, Picasa, TinyPic...)

Ok. Now the codes. Back up your template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► find the following part of code:

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

Delete that (all of it), and replace it with this:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url("http://i33.tinypic.com/332b6dt.jpg") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}

In the orange, you can see a URL of picture used in this tutorial. Just replace the URL address in red with URL of your hosted picture.
Save Settings. And that's it.

NOTE:

• tutorial is made in Minima Blogger template, your code may be a little different, but the idea is the same (just find the ".sidebar ul" and ".sidebar li" , and replace them with code above)
• these settings doesn't apply for "Archive" widget
  
• "text-indent:7px;" - you can change the distance between text and icon with this (change 7 into higher to increase distance)
• "line-height:1.3em;" - change the vertical space (line height) between links
• you can add some borders (line) between individual links (border-bottom:1px solid $bordercolor;)
  

Smile!