Menambahkan Tag Label Pada Halaman Postpage

Menambahkan TAG Label Pada Halaman Postpage - Umumnya setiap template pastinya sudah memilik breadcrumbs yang menampilkan label dalam postingan, hanya saja kadang kurang menarik karena letaknya biasanya di atas judul postingan.

Untuk itu kita akan Membuat Tambahan Tag label pada halaman postingan yang nantinya sobat bisa letakan dimana saja sesuai dengan selera.

Namun akan lebih bagus jika anda meletakan tag label ini di bawah judul postingan seperti blog ini atau di akhir postingan pada blog anda.

Saya rasa semua sudah paham apa yang saya maksud, untuk lebih jelasanya lihat gambar di bawah ini (klik perbesar)

Menambahkan TAG Label Pada Halaman Postpage

Kita langsung saja kelangkah pemasangan. Pertama tentunya kalian harus masuk ke editor template dan letakan kode CSS ini di atas ]></b:skin> atau pada </style>

.label-wrap{display:block;color:#666;padding:10px 0px;border-bottom:1px solid rgba(0,0,0,0.05);overflow:hidden}
.label-info{position:relative;margin:auto}
.label-info a,.label-tags{background:#222;float:left;display:inline-block;position:relative;font-size:11px;font-weight:700;margin-right:4px;color:#fff;text-decoration:none;text-transform:uppercase;line-height:15px;padding:0 6px;border-radius:3px;border:1px solid #111}
.label-tags{background:#fff;color:#222}.label-info a:hover{background:#2980b9;color:#fff;border-color:inherit;text-decoration:none}

Selanjutnya letakan kode HTML ini dimana saja untuk menampilkan tag labelnya kemudian save template.

<div class='label-wrap'>
<span class='label-tags'># Tags</span>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div class='label-info'>
<a class='label-block' expr:href='data:label.url+&quot;?max-results=10&quot;'rel='tag'> 
<data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</div>
</b:loop>
</b:if>
</div>

Selamat Mencoba.

Catatan: Bila saat anda meletakan label di atas kemudian tampil di Homepage tambahkan saja kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
....</b:if>
Jejak Unik

Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com

Show comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel