Background Warna-Warni Berdasarkan Label

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 :)