Skip to content Skip to sidebar Skip to footer

Cara Menandai Label Post Tertentu dengan Memberi Tag Kondisional

Tampan Community™ - Baiklah sobat semua pada kesempatan kali ini saya akan membahas tentang Cara Menandai Label Post Tertentu dengan Memberi Tag Kondisional, Seperti yang sobat ketahui sekarang Blogger mengupdate fitur-fitur terbaru yang bisa kita manfaatkan agar kegiatan blogging menjadi semakin menarik. Salah satu fitur barunya adalah fitur Lambda Expression yang bisa mempersingkat penuisan markup pada tag kondisional tertentu sehingga akan menjadi lebih sederhana dan menghemat penulisan kode.

Menandai Post Label Tertentu dengan Tag Kondisional

Sebagai contoh pada tutorial blog kali ini saya akan memanfaatkan fitur tersebut pada post label di halaman index.

Disini kita bisa menambahkan icon, gambar maupun tulisan. Pada contoh ini saya akan memberikan post label dengan icon fontawesome seperti gambar di bawah ini.

Menandai Post Label Tertentu dengan Tag Kondisional

Bukan hanya ditambahkan pada satu label saja, sobat juga bisa menambahkan beberapa label tertentu dan membedakan tampilannya dengan mudah.

Bagaimana cara membuatnya?

Di bawah ini adalah kode yang digunakan untuk memunculkan icon jika sobat menentukan label tertentu pada postingan. kode di bawah ini bisa sobat simpan sebelum kode penutup head.
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>//<![CDATA[//Post Labelfunction label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])}//]]></script></b:if></b:if>
Kode yang ditandai merupakan nama-nama label yang ditentukan dan kode yang bisa sobat ganti nantinya dengan kreasi sendiri.

Kode pemanggil

<b:loop values='data:post.labels' var='label'><script type='text/javascript'>label_pilihan(&quot;<data:label.name/>&quot;);</script></b:loop>
Untuk kode pemanggilnya bisa sobat simpan di dalam markup post.
<b:includable id='post' var='post'>...</b:includable>
Atau bisa juga disimpan di dalam markup ini
<b:includable id='main' var='top'>...</b:includable>

CSS

Agar membuat tampilannya lebih menarik, sobat bisa menambahkan CSS seperti di bawah ini

/* Post Label */.badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s}.badge1{background:#e89c0f;opacity:.98}.badge2{background:#40d47e;opacity:.98}.badge3{background:#3498db;opacity:.98}.badge4{background:#1abc9c;opacity:.98}.badge5{background:#95a5a6;opacity:.98}.post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%}.post:hover .badge-img{margin:85px 0 0 0}
Cara kerja dari kode di atas adalah jika sobat memberikan label pada postingan tertentu, maka otomatis akan memunculkan icon yang sudah dimodifikasi seperti contoh di bawah ini.


Terima Kasih sobat  telah membaca artikel tentang Cara Menandai Label Post Tertentu dengan Memberi Tag Kondisional,  Semoga artikel ini bermanfaat dan berguna buat sobat semua.
Travel Offline
Travel Offline Halo, Saya Andrian. Saya adalah pengelola dari Travel Offline, sebuah blog yang sekaligus media informasi dan hiburan melalui beberapa anak situsnya. Salam kenal, dan semoga betah di Travel Offline.

6 comments for "Cara Menandai Label Post Tertentu dengan Memberi Tag Kondisional"

  1. bermanfaat gan

    mampir ke kamuspenyakit-indo.blogspot.com

    ReplyDelete
  2. ini cocoknya buat blog gallery atau blog download ya gan. lumayan buat referensi

    ReplyDelete
  3. wah keren sih cuman apa bisa di terapkan ke blog download kaya ane
    ngomong2 templatenya sama kaya seocips

    ReplyDelete
    Replies
    1. iya gan emang sama, kalau minat bisa hubungi saya.

      Delete
  4. Wah boleh juga ini, soalnya sebelumnya saya membuat label post mengunakan text, tapi mengunakan ini kelihatannya membuat blog saya semakin seo :D

    ReplyDelete