Background Postingan Warna Warni

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

membuat background postingan ganti warna sesuai label---- Muiz-Techno

Selamat Malam sekarang saya akan share postingan tentang cara membuat background thumbnail gambar warna warni sesuai label atau istilahna mah membuat background ganti warna menurut label blogger.
sebelumnya saya sudah share tentang mengatasi/ memperbaiki error HTML/CSS Di W3C sekarang menuju ke artikel iniii!!!!!.
Okk langsung saja ikuti tutornya dibawah ini!!!

membuat background postingan ganti warna sesuai label---- Muiz-Techno


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(&#39;.post-label a:contains(CSS)&#39;).length){$(this).addClass(&#39;warna1&#39;)}.
Artinya, jika ditemukan label dengan isi (dalam hal ini label) CSS maka tambahkanclass "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.

·
Share On Whatsapp Or Line:
Previous
Next Post »

10 comments

Click here for comments

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment