Monday, July 15, 2013

Menandai postingan berdasarkan kategori

Abis jalan-jalan dari sini aku jadi 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 aku mau share kode yang bisa menciptakan tampilan berbeda tiap posting berdasarkan label tanpa javascript.

Pekerjaan:

1. Carilah tag pembungkus dari area postingan anda, contoh seperti gambar dibawah ini.

<div class='post'...> adalah pembungkus area postingan


2. Ubahlah tag pembungkusnya menjadi seperti ini.

&lt;div class=&#39;post hentry <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop></b:if>&#39; itemscope=&#39;itemscope&#39; itemtype=&#39;http://schema.org/BlogPosting&#39;&gt;

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=&#39;post hentry <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop></b:if>&#39;

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 == &quot;true&quot;'><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.

48 komentar postingan ini

wah, mantep. Kalo dipindah dibody bisa dong mas? \m/

ohiya, itu kalo labelnya ada sepasinya jadinya nambah kelas malahan mas..

maksudnya gimana masbro itu spasi berguna untuk memberi jarak agar tidak dempet kelasnya dimana kalau dempet gak bkerja cssnya...??

Coba saja mas, soalnya aku belum coba kalau dibody

bener2 harus melototin template untuk nyari kode2 di atas :D

wahh keren broo..
berhasil, punya ane jadi warna warni nih..

Puyeng juga mas lihat kodenya,banyak kode yang mesti diterapkan ini.

baru tau hehe
wah enak nih buat naro css di kategori berbeda wkwkwk
nice :)

lama ane nggak mampir kesini..hehe oiya ane pinjem blogrollnya mas untuk di modifikasi ulang sebagai bahan posting :)

semisal labelnya "Lorem Ipsum"
disitu ada dua class, "Lorem" sama "Ipsum"

jadi kelemahannya labelnya harus satu kata yaa..

wah, keren om. jadi, kalok beda kategori bisa beda warna gitu ya? thanks gan..

kenapa kita mengambil satu kategori..? karena kalau banyak kategori pastinya akan bertabrakan cssnya misalnya kategori "Lorem" dan "Ipsum", bayangkan jika sampean memberi:

.lorem {
border: 2px solid black;
}
.Ipsum {
border: 2px solid red
}


Coba deh bayangin jika semua kategori muncul, pastinya kan cssnya akan numpuk, maka dari itu kita mengambil satu kategori saja, jadi Label yang cuman satu itu bukan berarti kelemahan, lagian diaatas udah aku singgung sedikit masalah ini

wah mantap sob, jgn lupa kunjungan baliknya ya :)

maap lahir batin ya sob klo ada salah2 kata *smile

“Ƭαqobbαlαllαhu minnαα ωα minkum
(Semogα Alloh menerimα αmαlku dαn αmαl kαliαn).”

oh jadi begini nih Mas caranya ^_^. Makasih yah

sama2 bang Mohon maaf lahir batin :)

keren2 :D follow back ya gan :)

mumpung masih suasana lebaran di bulan syawal, saya mengucapkan mohon maaf lahir batin...keep happy blogging always ..salam :-)

iya tapi gak terlalu signifikan sih

dah lama gak berkunjung makin mantap aja tutor2 mas zhinto

banyak juga scrif yang harus di masukan ya

izin nyoba dulu bro..

jangan lupa kunjungan balik :)
Salam Blogger

tutorial yang menarik dan pasti bakal unik tampilan postingan kita kalau beda-beda sesuai sama labelnya ya....jempolin ah

tutorial yang menarik ;) patut dikasih jempol (y)

Mas mau nanya nih .. kenapa ya di blog ku di postingan yg bukan blogazine , dibagian bawah ada scroll ke pinggir
kira-kira kenapa y ???

Kalo diterapkan ditambah dengan beberapa css sepertinya hasilnya bagus sekali :) tapi masih sedikit bingung dengan langkah kerja diatas.

wahh ini menarik zin, sangat menarik jadi kita bisa buat layout kosong khusus buat halaman blogazine, tapi aq sedikit bingung sama kodenya, kok ada yg diparse ada yg gak? gimana tu ditunggu balesannya ya

Oh gitu ya? ane agak nggak ngerti sih, jadi ntar hasilnya kayak gimana ya? Nyimak dulu aja deh sob, btw, udah lama euy ane gk ke sini, gimana kabarnya sob??

Baek Bro, km sendiri gimana..? Lama juga aku udah gak ngeblog dan baru bisa hadir 2014 ini

selamat siang Mas... bagaimana kabarnya ? semoga sehat sehat saja dan blognya makin sukses... Tutorialnya mengenai bagaimana cara menandai postingan berdasarkan kategori sangat lengkap yaa... owgh iya Mas masih ingat dengan saya ? Saya admin dari blog yang dulu Mas komentari yang isi komentar Mas mengatakan Kalau header blog saya berantakan, coba di cek kembali apa Headernya masih berantakan Mas ?

biar blognya full color bisa pake trix ini kaya di BKI

Masih belum paham, lebih rinci lagi dunk.

buset mas.... muter2 otak saya lihatnya.... saya kebetulan lagi belajar buat tampilan ala kang ismet.... ada refrensi gag mas?

mau tanya gan gimana cara bikinnya agar di judul sidebar ada labelnya contohnya seperti ini
<h4 class="CSS">Related Post</h4>
disitu ada judul Related Post, terus ada tulisan class="CSS" atau nama label. kira kira gimana cara membuatnya. terimakasih sebelumnya

template blog ini keren banget mas, bisa ngak gw minta template blog ini mas ??

ikut baca aja yaa agak gangerti gitu :D

This comment has been removed by the author.

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon