Background Warna-Warni Berdasarkan Label

Artikel ini menjelaskan cara agar background warna-warni atau berbeda warnanya sesuai dengan label atau kategori artikel.

Sesuai janji saya kepada Rifky umami, bagaimana membuat bakcground warna-warni thumbnail pada blog, artikel kali ini menunjukkan cara dimaksud. Agar sobat bisa mengikuti tutorial ini sebaiknya ikuti tutorial sebelumnya: Tutorial Clone Template KangIsmet, karena tutorial ini dinisbatkan pada tutorial tersebut.

Agar background warna-warni atau berbeda berdasarkan label atau kategori, temukan CSS berikut,

.dp-thumbnail span{font-size:26px;line-height:90px;font-weight:bold;color:#eee}
.dp-thumbnail.CSS {background:#a9d86e}
.dp-thumbnail.Komentar, .dp-thumbnail.HTML5 {background:#f1c40f}
.dp-thumbnail.Request {background:#ff6c60}
.dp-thumbnail.Opini, .dp-thumbnail.template {background:#ff6c60}
.dp-thumbnail.Tutorial {background:#5f90b4}
.dp-thumbnail.Widget {background:#82a5ce}
.dp-thumbnail.SEO {background:#dfbc42}
.dp-thumbnail.Font {background:#98cdca}
.dp-thumbnail.jQuery, .dp-thumbnail.Javascript{background:#24887B}
.dp-thumbnail.Lain-lain {background:#80aac9}

ganti dengan CSS ini.

.warna1 .dp-thumbnail {background:#24887B;}
.warna2 .dp-thumbnail {background:#f1c40f;}
.warna3 .dp-thumbnail {background:#006699;}
.warna4 .dp-thumbnail {background:#333366;}
.warna5 .dp-thumbnail {background:#663300;}
.warna6 .dp-thumbnail {background:#82a5ce;}

Sekarang salinlah JavaScript berikut,

<script type='text/javascript'>$(window).ready(function(){$(&#39;.post&#39;)
.each(function(){if($(this).find(&#39;.post-label a:contains(CSS)&#39;).length){$(this).addClass(&#39;warna1&#39;)}
else if($(this).find(&#39;.post-label a:contains(JavaScript)&#39;).length){$(this).addClass(&#39;warna2&#39;)}
else if($(this).find(&#39;.post-label a:contains(Komentar)&#39;).length){$(this).addClass(&#39;warna3&#39;)}
else if($(this).find(&#39;.post-label a:contains(Posting)&#39;).length){$(this).addClass(&#39;warna4&#39;)}
else if($(this).find(&#39;.post-label a:contains(jQuery)&#39;).length){$(this).addClass(&#39;warna5&#39;)}
else if($(this).find(&#39;.post-label a:contains(HTML)&#39;).length){$(this).addClass(&#39;warna6&#39;)}
})});</script>

kemudian letakkan di atas </head>.

Hanya itu? Iya hanya itu :)

Tip. Jangan lupa mengganti post-label sesuai dengan label postingan sobat. Rahasia pengaturannya terletak pada,
{if($(this).find('.post-label a:contains(CSS)').length){$(this).addClass('warna1')}.
Artinya, jika ditemukan label dengan isi (dalam hal ini label) CSS maka tambahkan class "warna1", dst.

Jadi, cara menerapkannya di blog sobat ganti saja isi dalam kurung itu sesuai dengan label atau kategori postingan blog. Misalnya ...a:contains(Cerita Lucu)..., ...a:contains(SEO)..., dan seterusnya.