Pages

Kamis, 14 Maret 2013

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

Tidak ada komentar:

Posting Komentar