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.

Komentar

Yudi mengatakan…
Memang lebih terlihat bagus pemisah label dg tanda lain selain koma.
Ternyata ada ya tutornya, baru tahu saya.
Kian Coy mengatakan…
nice post sob, kayaknya menarik juga kalo pake tag ala wordpress..!!!
Belantara Indonesia mengatakan…
wah ini bakal bagus brad....bisa ya di breadcrumb gtu ya brad?
Belantara Indonesia mengatakan…
oh ya...itu pertama apa kedua brad?..soalnya ada autoreadmore jadi ada dua nya..hehehhe
Chugy mengatakan…
B.I :: Kalau ingin nampilin di bawah judul posting disimpan di pertama. kalau ingin di bwah posting simpan di yg kedua disesuaikan saja brafer, dan diprtinjau terlebih dahulu.
Belantara Indonesia mengatakan…
oke deh..saat nya pindah PC biar bisa agak gak lemod...kwkwkwkkww....
agus_iki mengatakan…
ini support utk semua jenis temlate ngak bro?
karena kadang template beda2 kodenya :(
ph-internet mengatakan…
Wah makin lama makin keren kodingnya,
Ga pakai conditional tag untuk item ya?
Nanti om coba.
joe mengatakan…
wah, sepertinya keren nih...
febriyanto mengatakan…
keren juga gan..... tapi makan banyak tempat kyknya....... bagus tu buat yang blog tutorial kyk punyanya anda.... hhe
Belantara Indonesia mengatakan…
jadi ingat ada nanya : gmn brad bikin ringan weblog kayak sini? udah compress, udah kurangin widget tak penting...sini kuliat ringan pake banget...ada trik lain selain yg kusebutin di atas brad?..
Chugy mengatakan…
Belantara Indonesia :: ane juga belum dapet Brad Triknya..padahal template ini ga di edit apa2 di compres juga biasa saja...Mungkin pengaruh dari template Brader...!!!
Belajar CorelDRAW mengatakan…
Sob,kode ada tiga,tapi setelah saya coba satu-satu tetap tidak muncul.
Tri Setyo Wijanarko mengatakan…
terimakasih infonya om.. nanti mau dicoba juga ahh :D
Tip Trik Blogger mengatakan…
keren sob..
ntar di coba
terima kasih telah berbagi
Tip Trik Blogger mengatakan…
keren kawan
ntar bisa dicoba praktekkan
terima kasih sudah berbagi ilmunya
Ummi Ubay mengatakan…
wuihh
kelihatannya lebih keren yah^^
ntar chika coba ahh
makasih infonya
Abiyasha mengatakan…
boleh juga nih boz, baru nemu yang kayak gini
imroee mengatakan…
sepertinya keren tapi blog saya ada tambahan tombol share antara komen dengan label.

oia, mau minta tolong nih, bagian kepala blog saya ada celahnya sehingga blog saya tampapilannya tampak seperti selembar kertas, bagaimana cara merapatkannya sampai ke atas? Saya pakai template yang tersedia di blogspot. thanks.
Chugy mengatakan…
ImRoee ::Kalau untuk mngatur bagian dalam supaya rapat, coba cari kode outer-wraper trus tambahkan padding:0px;
kalau posisinya masih jauh tambah [-] untuk paddingnya contohnya padding:-20px; silahkan dicoba.
Niesa_BloggerGirl mengatakan…
wah tipsnya ok ni tp saya msh blm ngerti ni,heeheee....
BLOG INFORMASI mengatakan…
Setelah di coba ternyata berhasil juga memasang label tag ala wordpress ini...trimakasih buat tutorialnya.
Blog ini banyak memberikan inspirasi dan juga tutorial yang sangat bermanfaat khususnya buat saya blogger yg masih newbie....!!!

Salam kenal di tunggu kunjungan nya.
eser mengatakan…
Bagus juga triknya bro,,,, tapi masih ragu buat utak-atik template
Teras Info mengatakan…
wah,,,,trik mantabs lagi nih.....
ijin save dulu...he..he....
Ummi Ubay mengatakan…
waaa mau coba^^
makasih infonya
Unknown mengatakan…
tapi ini gag competible sma IE mas...
cara agar competible sma IE gimana ya mas,,?
Media buying houses mengatakan…
Your blog is very impressive!!Nice post.
thanks for sharing.......
Media buying houses mengatakan…
Interesting post on site. This will surely liked by all the readers. One of the best share.

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text