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, agar tema di setiap artikel bisa ditemukan dengan mudah. Untuk itu, menampilkan kategori atau label dalam navigasi sebuah blog sangat penting.

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

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

DEMO: Lihat akhir article blog ini.

Install HTML Menampilkan Blogger Category

Blogger sudah menyiapkan tag code untuk menampilkan Label Post. Copy kode 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 kode <data:post.body/> dan paste di bawahnya. Jika ada lebih dari 1 kode <data:post.body/>, cari yang terakhir.

Sehingga menjadi seperti 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 :)