Thursday, January 5, 2012

Add icon / image to list label on Blog

Now, I will share tutorial about how to add or change label icon. Yeah,, you must know icon that next to the link label right ?

Like this -->


Ok. First step, go to menu Design -> Edit Html


1. 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;
}
 2. 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;)


If you failed with tutorial in above, you can try this tutorial .

  1. Ok. First step, go to menu Design -> Edit Html 
  2. Find code ]]></b:skin> , u can find it by. Click CTRL + F 

    3. Next, put the bellow code and take it in above code ]]></b:skin>
/*LABEL----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i33.tinypic.com/332b6dt.jpg) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

    4. At least, save template ^-^

Note : the red color you can change it with your URL image
           the green color distance between text and icon

4 comments:

Viviana Dewi said... Reply

kak, sebelum diedit-edit gitu, kan yang disamping itu,kayaknya judulna Blog Archive,deh. Nah, kok disini kakak bisa edit gitu, ada kotak sama gambarnta lagi

Loevyani Putri said... Reply

bermanfaat beudh..

Hasna marwa kamilatuzzahra said... Reply

makasih kak, tipsnya. tp aku masih ngak ngerti ....hehe

Summerizka! said... Reply

yeesssss akhirnya bisa juga!!! :D thankssss kak bermanfaat banget:)

Post a Comment

Ketentuan comment :
1. Jangan comment SARA dan menghina
2. Gunakan bahasa sopan dan jelas
3. Jangan tinggalkan link mati (dead link)

Template by: