Monday, August 16, 2010

Tutorial : Mana Nak Letak Icon di Labels dan Links di Sidebar ?


hello sume :)
icon di labels atau links ?
apakah itu ? nak tawu ape ?
cube tengok di my sidebar , yang ade bunge kecik gerak2 .
itu larh jawapannye . HAHAHAHAHAHA . k stop merepek .
tadi  my girlfriend ade tanye mcm mane nak letak code icon tu
then dari mane i dapat icon cute tu . act i just Google lorh . T__T 
n noe i nak kongsi mcm mane nak letak code ni dengan beliau .
eh'eh , dengan ANDA gak :)
let's cekidaut


Step 1
Dashboard > Layout > Edit HTML tekan CTRL+F 
cari codes seperti di bawah
.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;
}
Step 2
padam kesemua codes di atas ,
kemudian gantikan dengan codes dibawah ini
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url("URL ICON/IMAGE KORG") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}
Step 3
preview then save .
k done syg !
smile :)
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;)
  • maaf, malas nk translate . copy paste jep ni . HAHAHAHA 
    credit ; here

    2 comments:

    Thanks for comments . You're wonderful :)

     


    Power by Blogger