Postingan Berdasarkan Label - Setelah kemarin jalan jalan dari google kepikiran tentang postingannya bang Taufik yang berjudul
Tampilan Posting Berbeda-Beda Berdasarkan Label, pada posting tersebut kita bisa membuat tampilan yang berbeda berdasarkan label posting, dan pada postingan tersebut kita masih memanfaatkan jquery untuk menciptakan tampilan yang berbeda tiap postingnya, nah sekarang saya mau share kode yang bisa menciptakan tampilan berbeda tiap posting berdasarkan label tanpa javascript.
Caranya :
1. Carilah tag pembungkus dari area postingan anda, contoh seperti gambar dibawah ini.
<div class='thumbnail-post'> adalah pembungkus area postingan
2. Ubahlah tag pembungkusnya menjadi seperti ini.
<div class='thumbnail-post <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop></b:if>''>
kode diatas kita meng_Escape tag pembungkusnya saja sedangkan untuk tag kondisional dan loop tidak agar kode loopnya bekerja, Jangan lupa juga untuk meng_Escape tag penutup dari tag pembungkus area postingan tersebut. perhatikan juga baik-baik tag kondisionalnya berada didalam apitan Class,
class='thumbnail-post <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop></b:if>'
3. Pembahasan sedikit tentang kode
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop></b:if>
Kode diatas berfungsi untuk menampilkan nama label, dimana pada poin kedua kita menggunakannya sebagai Class, lalu untuk menggunakannya kita tinggal menuliskan pada css seperti ini.
.thumbnail-post.nama_label {
border: 1px solid red;
}Jika kita sudah menerapkan kode diatas maka pada area postingan kita akan muncul Class baru berdasarkan Label yang terakhir, kenapa yang terakhir..? karena jika kita tidak memberi kode
data:label.isLast pada tag kondisional maka semua nama label pada area pembungkus postingan akan muncul, contoh seperti ini.
<div class='thumbnail-post jQuery Blogging CSS'>
Nantinya pasti pada kode cssnya akan ada yang bertabrakan, jadi aku menambahkan kode
data:label.isLast agar label yang diindex hanya satu yaitu label yang terakhir. contoh outputnya seperti ini.
<div class='thumbnail-post CSS'>
Jadi pada css kita tinggal menambahkan seperti ini,
.thumbnail-post.CSS {
border: 1px solid red;
}lalu anda tinggal lihat hasilnya.