Saturday, February 21, 2015

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.


Anda Sedang Membaca Artikel Tentang Background Postingan Warna Warni Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/02/background-postingan-warna-warni.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner