Modifikasi dan Menampilkan Label Secara Manual pada Blogspot

Secara default, posisi label pada blogger terletak dibawah tepatnya setelah tag <data:post.body/> dalam class .post-footer-line jika anda menggunakan template Simple atau standar milik blogger.

Script lengkapnya kurang lebih seperti ini :
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'>
             <data:label.name/>
            </a>
          <b:if cond='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
</span>
</div>

Bagi sebagaian orang ingin beberapa modifikasi atau memodifikasi sendiri template standar yang ada. Jika kode diatas dihapus atau diubah tentu akan memiliki efek tersendiri (berantakan atau error) pada tampilan blog. Anda bisa memodifikasi label diatas pada tempat lain sesuai keinginan anda misalnya dibawah judul post dan lain sebagainya.

  • Kode berikut berfungsi hanya menampilkan 3 Label (jika posting anda memiliki lebih dari 3 label). 2 Label dengan tanda koma (,), label ketiga tidak menggunakan tanda koma (,)
    • <b:loop values='data:post.labels' var='label' index='x'>
  <b:if cond='data:x &#60;=2'>
    <a class='sfa-tag' expr:href='data:label.url' rel='tag'>
      <data:label.name/>
    </a>
    <b:if cond='data:x &#60;=1'>,</b:if>
  </b:if>
</b:loop>
    Output: Label1, Label2, Label 3

  • Kode berikut berfungsi menampilkan 3 label dengan menggunakan looping variabel i < 3 . Ini akan melakukan looping 3x. Untuk menampilkan 1 label anda bisa membuat perulangan atau looping 1x. Misalnya diubah menjadi i < 1. Lihat pada baris yang ditandai
    • <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label' index='i'>
    <b:if cond='data:i&lt;3'>
    <data:label.name/> ,
    </b:if>
  </b:loop>
</b:if>
    Output: Label1, Label2, Label 3
    Perlu diperhatikan, dalam blogger code agar fungsi perbandingan lebih kecil < atau lebih besar > bisa terbaca, perlu menggunakan encoder/decoder syntax (HTML Entities). Misalnya untuk menggunakan kode "<" maka harus diubah ke "&lt;" terlebih dahulu. Untuk menggunakan encoder/decoder syntax, anda bisa menggunakan link berikut : https://mothereff.in/html-entities

Baca Juga :

Older Post
Newer Post