✔ Menampilkan Blogger Label / Category Di Dalam Postingan

Cara Menampilkan Blogger Label / Category di dalam Postingan

Post Kategori berfungsi untuk melabelkan artikel. Ini sangat penting untuk navigasi sebuah website, biar tema di setiap artikel dapat ditemukan dengan mudah. Untuk itu, menampilkan kategori atau label dalam navigasi sebuah blog sangat penting.

Selain itu, menampilkan label article dalam website juga dapat menurunkan bounce rate. Dan tentu menaikan pageview website anda.

Kali ini, aku akan menjelaskan cara menampilkan Category atau Label di dalam Artikel Body, tentunya Valid AMP HTML.

DEMO: Lihat selesai article blog ini.

Install HTML Menampilkan Blogger Category

Blogger sudah menyiapkan tag code untuk menampilkan Label Post. Copy instruksi HTML di bawah ini.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='footer-label'> Category: <b:if cond='data:post.labels'>
           <b:loop values='data:post.labels' var='label'>
             <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>&amp;nbsp;</b:if>

           </b:loop>
         </b:if>
 </span>

Kemudian cari instruksi <data:post.body/> dan paste di bawahnya. Jika ada lebih dari 1 instruksi <data:post.body/>, cari yang terakhir.

Sehingga menjadi menyerupai ini:

  <data:post.body/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='footer-label'> Category: <b:if cond='data:post.labels'>
           <b:loop values='data:post.labels' var='label'>
             <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>&amp;nbsp;</b:if>
           </b:loop>
         </b:if>
 </span>

Agar tampilan lebih menarik, copy CSS berikut ini. Untuk Template AMP Blogger, copy di bawah <style amp-custom='amp-custom'> dan untuk Non-AMP Template, copy sebelum code ]]</b:skin> .

 /* Footer LABEL */
   .footer-label {display:block;border-left: #2e77e4;border-left-style: solid;max-width:713px;background-color:rgb(215, 241, 255);padding: 15px;margin-left:-10px;margin-right:-10px}
 .footer-label a{color: #3498db;font-weight: 700;border-left: #2e77e4;border-left-style: solid;padding: 5px 15px 5px 5px;background-color: #14242b;margin:5px}
   @media screen and (max-width:800px) {.footer-label {padding: 5px 5px 5px 10px;}.footer-label a {display:inline-block;margin:5px auto 0}
}

Silahkan SAVE perubahan pada template Blogger.

Semoga bermanfaat :)

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: