24 November 2011

Add icon/picture beside Labels and Links list in Blogger Sidebar

Advertisements

Many of you have asked about adding image icon beside the labels, links lists that appear in sidebar of the blog. By adding this you can make your blog look more elegant.


First you have to select the image/icon that you want to add. There are tons of them on Google. Keep in mind that the image should be smaller than 15x15 px.

Now go to LAYOUT >> EDIT HTML and look for
.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;
}

Replace above complete code with following code
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url("http://i415.photobucket.com/albums/pp238/Sujeet/arrow.png") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}

Save the template.

Customization

Replace image icon code with your own.
text-indent - change the distance between text and icon

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More