Pekerjaan:
1. Carilah tag pembungkus dari area postingan anda, contoh seperti gambar dibawah ini.
2. Ubahlah tag pembungkusnya menjadi seperti ini.
<div class='post hentry <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>' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
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='post hentry <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.
.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='post hentry jquery css hack
' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
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='post hentry hack
' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Jadi pada css kita tinggal menambahkan seperti ini,
.post.hack { border: 1px solid red; }
lalu anda tinggal lihat hasilnya.
Tidak ada komentar:
Posting Komentar