Advertise

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.

32 komentar:

  1. Memang lebih terlihat bagus pemisah label dg tanda lain selain koma.
    Ternyata ada ya tutornya, baru tahu saya.

    BalasHapus
  2. nice post sob, kayaknya menarik juga kalo pake tag ala wordpress..!!!

    BalasHapus
  3. wah ini bakal bagus brad....bisa ya di breadcrumb gtu ya brad?

    BalasHapus
  4. oh ya...itu pertama apa kedua brad?..soalnya ada autoreadmore jadi ada dua nya..hehehhe

    BalasHapus
  5. 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.

    BalasHapus
  6. oke deh..saat nya pindah PC biar bisa agak gak lemod...kwkwkwkkww....

    BalasHapus
  7. ini support utk semua jenis temlate ngak bro?
    karena kadang template beda2 kodenya :(

    BalasHapus
  8. Wah makin lama makin keren kodingnya,
    Ga pakai conditional tag untuk item ya?
    Nanti om coba.

    BalasHapus
  9. wah, sepertinya keren nih...

    BalasHapus
  10. keren juga gan..... tapi makan banyak tempat kyknya....... bagus tu buat yang blog tutorial kyk punyanya anda.... hhe

    BalasHapus
  11. 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?..

    BalasHapus
  12. 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...!!!

    BalasHapus
  13. Sob,kode ada tiga,tapi setelah saya coba satu-satu tetap tidak muncul.

    BalasHapus
  14. terimakasih infonya om.. nanti mau dicoba juga ahh :D

    BalasHapus
  15. keren sob..
    ntar di coba
    terima kasih telah berbagi

    BalasHapus
  16. keren kawan
    ntar bisa dicoba praktekkan
    terima kasih sudah berbagi ilmunya

    BalasHapus
  17. wuihh
    kelihatannya lebih keren yah^^
    ntar chika coba ahh
    makasih infonya

    BalasHapus
  18. boleh juga nih boz, baru nemu yang kayak gini

    BalasHapus
  19. 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.

    BalasHapus
  20. 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.

    BalasHapus
  21. wah tipsnya ok ni tp saya msh blm ngerti ni,heeheee....

    BalasHapus
  22. 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.

    BalasHapus
  23. Bagus juga triknya bro,,,, tapi masih ragu buat utak-atik template

    BalasHapus
  24. wah,,,,trik mantabs lagi nih.....
    ijin save dulu...he..he....

    BalasHapus
  25. waaa mau coba^^
    makasih infonya

    BalasHapus
  26. tapi ini gag competible sma IE mas...
    cara agar competible sma IE gimana ya mas,,?

    BalasHapus
  27. Your blog is very impressive!!Nice post.
    thanks for sharing.......

    BalasHapus
  28. Interesting post on site. This will surely liked by all the readers. One of the best share.

    BalasHapus
  29. kunjungan pertama.....
    manfaat banget website/Blog nya.....
    keep posting yang positif gan/sist..
    ijin lihat-lihat blog/website nya ya.....

    jangan lupa kunjungi website saya ya :)

    Daftar rumah Murah Tambun-Bekasi tahun 2015-2016

    BalasHapus