Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Style Tag Di Post Body


Di semua template tentu nya sudah mempunyai yang nama nya tag di dalam body artikel. Meskipun tidak semua template mempunyai nya. Tag yang berada pada body artikel merupakan suatu hal yang sebenar nya dapat di bilang wajib tapi tidak ada pun juga tidak masalah. Tapi dengan ada nya tag ini secara dapat menciptakan 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 aku akan mengembangkan Cara Membuat Style TAG Di Post Body dengan tampilan yang cukup sederhana.

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

Cara Membuat Style TAG Di Post Body

Silahkan teman copy instruksi CSS di bawah ini kemudian letak kan instruksi tersebut di atas instruksi </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 teman copy instruksi di bawah ini kemudian letakan instruksi tersebut di dalam body html template sobat. Sobat dapat meletakan nya di bawah judul artikel maupun di final / 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 teman belum tau cara penempatan nya di dalam body artikel, teman dapat lihat pola di bawah ini. Sobat cari instruksi menyerupai di bawah ini. Biasa nya setiap template niscaya ada instruksi tersebut. Kode untuk meletakan iklan adsense di bawah judul artikel. Nanti instruksi tag yang di atas kita letakan di atas instruksi iklan adsense. Lihat pola di bawah ini.


 Letakan instruksi 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 teman ingin letakan instruksi tag nya di final artikel, cara nya juga sama menyerupai cara di atas, cuman teman cari instruksi iklan nya yang berada pada final atau bawah postingan. Dan letakan instruksi tag nya di bawah nya instruksi iklan adsense. Seperti pola 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 instruksi tag nya disini  

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

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

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

Untuk pola teman dapat lihat pada gambar di bawah ini. Atau pada final artikel ini.

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