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 -->
1. Find the following part of code:
.sidebar ul {2. Delete that (all of it), and replace it with this:
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;
}
.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;)
- Ok. First step, go to menu Design -> Edit Html
- 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
5 comments:
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
bermanfaat beudh..
makasih kak, tipsnya. tp aku masih ngak ngerti ....hehe
yeesssss akhirnya bisa juga!!! :D thankssss kak bermanfaat banget:)
kak gimana cara ganti simbol yang dipoin - poin [3 poin] bagian note jadi bunga(?)
Post a Comment
Ketentuan comment :
1. Jangan comment SARA dan menghina
2. Gunakan bahasa sopan dan jelas
3. Jangan tinggalkan link mati (dead link)