Modifikasi Label - Tag Seperti Menu Navigasi Ala WordPress

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger, Modifikasi label, Tag Ala Wordpress. dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi.

Lihat screen shoot gambar dibawah ini :

Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini ::

Pertama Masuk pada Edit HTML - Expand Template Widget
Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body.

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut :

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

div.tag{font-size:11px;padding-top:5px; color:#999999; margin-top:10px;}
.post-tag{font-family:Georgia; font-size:12px; margin-top:15px;}
.post-tag a:link, .post-tag a:visited{color:#444; font-style:italic;}
.post-tag a:hover {color:#ff0000; font-style:italic;}

Masukan kode di atas, pada bagian body tepatnya diatas kode ]]></b:skin>

Selanjutnya cari koda <data:post.body/>
Masukan kode di bawah ini, dibawah kode <data:post.body/>

<div class='post-tag'> <b style='background:#ff0000; -moz-border-radius:5px; -webkit-border-radius:5px; padding:8px 10px; color:#fff; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=5&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:8px; margin-right:8px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
<b:if cond='data:post.allowComments'>
<a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b style='font-style:normal; padding:0px; font-size:16px;margin:0px;'><data:post.numComments/></b></a>
</b:if>
</div>

Sekarang pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Anda bisa mengcustom tampilan tag navigasi ini pada bagian kode diatas sesuai selera anda. selamat mencoba.