Cara Membuat Style TAG Di Post Body

Di semua template tentu nya sudah mempunyai yang nama nya tag di dalam body artikel. Meskipun tidak semua template memiliki nya. Tag yang berada pada body artikel merupakan suatu hal yang sebenar nya bisa di bilang wajib tapi tidak ada pun juga tidak masalah. Tapi dengan ada nya tag ini secara bisa membuat pengunjung lebih efisien untuk mencari suatu artikel dengan mengurutkan sebuah kategori.

Bentuk style pada setiap tag di dalam body artikel pun sangat bermacam - macam pada template yang mungkin kalian pernah melihat nya. Dan pada artikel kali ini saya akan berbagi Cara Membuat Style TAG Di Post Body dengan tampilan yang cukup sederhana.

Bila sobat ingin mencoba menambahkan atau mengganti model style TAG yang berada pada template sobat, sobat bisa ikuti langkah - langkah di bawah ini.

Cara Membuat Style TAG Di Post Body

Silahkan sobat copy kode CSS di bawah ini lalu letak kan kode tersebut di atas kode </style>

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

Setelah itu sobat copy kode di bawah ini lalu letakan kode tersebut di dalam body html template sobat. Sobat bisa meletakan nya di bawah judul artikel maupun di akhir / bawah artikel.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
          <div class='label-wrap'>
<span class='label-tags'><i CLASS='fa fa-hashtag' aria-hidden='true'/> 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=7&quot;' rel='tag'> <data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</div>
</b:loop>
</b:if>
</div>
</b:if>

Bila sobat belum tau cara penempatan nya di dalam body artikel, sobat bisa lihat contoh di bawah ini. Sobat cari kode seperti di bawah ini. Biasa nya setiap template pasti ada kode tersebut. Kode untuk meletakan iklan adsense di bawah judul artikel. Nanti kode tag yang di atas kita letakan di atas kode iklan adsense. Lihat contoh di bawah ini.

Letakan kode tag nya disini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:table;text-align:center;padding:0;margin:0 auto&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</b:if>

Bila sobat ingin letakan kode tag nya di akhir artikel, cara nya juga sama seperti cara di atas, cuman sobat cari kode iklan nya yang berada pada akhir atau bawah postingan. Dan letakan kode tag nya di bawah nya kode iklan adsense. Seperti contoh di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:table;text-align:center;padding:0;margin:0 auto&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</b:if>
Letakan kode tag nya disini

Setiap template mungkin mempunyai kode yang berbeda, jadi sobat cari yang sekira nya hampir sama seperti kode di atas. Bila di template sobat sudah ada Tag di dalam body artikel tapi sobat ingin mengganti nya, sobat cukup menghapus kode dari bawaan template dengan kode tag yang dari saya dan ganti kode css tag nya dengan kode css tag yang dari saya.

Sobat bisa merubah tampilan warna nya cukup dengan mengedit css tag nya tersebut.

Kalo sobat kurang yakin dengan penempatan nya, untuk menjaga hal yang tidak kita ingin kan alangkah baik nya sobat bisa menerapkan di blog sobat yang lain blog untuk percobaan.

Untuk contoh sobat bisa lihat pada gambar di bawah ini. Atau pada akhir artikel ini.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel ini bisa bermanfaat buat sobat yang ingin mencari Cara Membuat Style TAG Di Post Body. Selamat mencoba!

Share this post