Menentukan Jumlah Label yang ditampilkan di Postingan

Untuk menentukan jumlah label pada widget, itu mudah tinggal pilih widget dan edit label yang akan disembunyikan. Yang akan saya share yaitu cara menampilkan berapa label yang akan tampil pada postingan Blogger, bukan pada widget.
Sebelum kepada penjelasan, standarnya kode untuk menampilkan Label adalah seperti ini :

<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
        <data:label.name/>
        </a>
        <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
</b:if>

Maka berapapun sobat menulis label, label akan muncul seluruhnya pada postingan. Ini artinya, ketika 7 Label ditulis, maka semuanya akan tampil.
Untuk memahami penjelasan selanjutnya, harap diperhatikan kode yang saya tandai <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>, ini artinya "Selain label terakhir maka tampilkan koma".

Menentukan Jumlah Label yang Tampil

Study Kasus

Misalkan sobat mebuat sebuah postingan dengan judul 5 Kesamaan Gatot Barajamusti Dan Kangjeng Taat Pribadi, kemudian membuat 7 label. Misal: Artis, Berita, Gossip, Info, Penangkapan, Penggandaan Uang, Penipuan, Taat Pribadi. Maka akan tampil seperti di bawah ini:



Semua label akan tampil seperti gambar di atas, dengan berbagai alasan, misalkan mengganggu tampilan atau estetika, maka sobat hanya ingi menampilkan 3 Label saja. Maka kode untuk Menampilkan Label (paling atas) ganti dengan kode ini:

<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x==0'><data:label.name/>, </b:if>
    <b:if cond='data:x==1'><data:label.name/>, </b:if>
    <b:if cond='data:x==2'><data:label.name/></b:if>
    </b:loop>
</b:if>

Kita menambahkan index=x untuk memanggil label yang di tampilkan. Tetapi kode di atas belum ditambahkan link, sehingga tidak clickable (tidak bisa diklik menuju search label). Hasilnya seperti ini :

Alternatif ke-2

Lebih simple lagi dengan kode di bawah ini :

<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x&lt;=2'><data:label.name/>, </b:if>
  </b:loop>
</b:if>

Tapi kekurangannya masih menampilkan , (koma) pada label Terakhir. Penampakan :

Alternatif ke-3

Saya lebih merekomendasikan kode ini daripada sebelumnya, karena sudah menggunakan Link ke search Label.

<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label' index='x'>
        <b:if cond='data:x &#60;=2'>
            <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
                <data:label.name/>
            </a>
        <b:if cond='data:x &#60;=1'>,</b:if>
        </b:if>
    </b:loop>
</b:if>

Perhatikan yang ditandai <b:if cond='data:x &#60;=1'>,</b:if> artinya, sampai label ke 2 tambahkan koma.

Memilih Label

<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x&lt;6 and data:x&gt;2'>
    <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
    <data:label.name/>
    </a>
    </b:if>
    <b:if cond='data:x&lt;5 and data:x&gt;2'>, </b:if>
  </b:loop>
</b:if>

Kode di atas adalah untuk menampilkan kode ke-3 sampai ke -5. Penampakannya seperti ini :



Untuk selanjutnya silahkan di explore dan dikreasikan sendiri, sesuai ide masing-masing.

Contoh Kreasi Kode

Sobat bisa berkreasi dengan penambahan class, tentunya sedikit sentuhan pada HTML. Contoh yang saya buat, membuat label-label tersebut berbeda warna. Hasilnya seperti ini:



Kodenya gimana? ya sobat fahami, kreasi.. Kalo disuapin terus ga pinter-pinter nantinya.. 😃