Cara Membuat List Label

Hallo Sobat Wahid Emalution , Senang sekali saya bisa membagikan tutorial kembali di blog ini.

Yap Mungkin sobat Sudah tidak asing Dengan Tutorial ini, tetapi saya disini akan membagikannya lagi, untuk mempercantik blog sobat atau mempermudah pengunjung melihat-lihat label yang terdapat di blog sobat.

Biasanya Labelnya itu diletakan di atas Post , Nah berhubung banyak yang menggunakan nya di atas Posting , jadi saya juga akan membagikan tutorialnya di atas Post , tetapi sobat bisa meletakkannya di tempat lain. Langsung saja , 

1.Login Ke Blogger.com

2.Klik Menu Template

3.Klik edit HTML

Lalu Letakkan CSS Dibawah tepat di ataas ]]></b:skin> atau </style>

ul.listlabel{list-style:none;float:left;margin-bottom:12px;width:100%;margin-top:5px;padding-top:13px;padding-bottom:14px;border-bottom:1px solid #eee}
.listlabel span{list-style:none;float:left;margin-right:10px;color:#81808B;line-height:30px;font-weight:500;font-size:13px;text-shadow:0 1px 0 #fff;text-transform:uppercase;font-weight:bold}
ul.listlabel li a{list-style:none;text-transform:none;padding:2px 16px;margin-right:10px;float:left;line-height:1.8;background:#FFF;-moz-border-radius:6px;border:1px solid #D8D8D8;-webkit-box-shadow:0 1px 1px rgba(50,50,50,0.2);color:rgb(116,116,116);-moz-transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;text-shadow:0 1px 0 rgb(240,240,240);font-size:13px}
.labellist{list-style:none;float:left;width:100%;margin-bottom:15px}
ul.listlabel li a:hover{list-style:none;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.22);background-color:#963920!important;border:1px solid #963920!important}
ul.listlabel li a:hover{list-style:none;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.22);text-decoration:none}
li.activer a{list-style:none;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.22)!important;background-color:#963920!important;border:1px solid #963920!important}

Lalu Lanjutkan Dengan Meletakkan Kode Dibawah Tepat Di atas  <b:section class='main' id='main' showaddelement='no'>

<div class='labellist'>
<ul class='listlabel'>
<span>Labels : </span>
<li class='activer'>
  <a href='' rel='nofollow'>All</a>
</li>
<li>
<a href='' rel='nofollow'>Tutorial</a>
</li>
<li>
<a href='' rel='nofollow'>Template</a>
</li>
<li>
<a href='' rel='nofollow'>CSS</a>
</li>
<li>
<a href='' rel='nofollow'>jQuery</a>
</li>
<li>
<a href='' rel='nofollow'>Slider</a>
</li>
<li>
<a href='' rel='nofollow'>Icon</a>
</li>
</ul>
</div>

Yap , Segitu Saja , Semoga tutorial diatas bermanfaat untuk sobat.

Terimakasih.