Warna Background Selected Berbeda-beda Berdasarkan Label

Memanfaatkan Label untuk membedakan warna background memanglah sangat tepat, tidak hanya membedakan warna thumbnail saja seperti yang sudah banyak tutorial disana. namun kali ini semuanya bisa kita buat berbeda warna seperti: komentar,breadcrum,dan lain-lain.
Saya pernah menulis postingan ini sebelumnya: Warna postingan berbeda-beda berdasarkan label.

$('.outer wrapper').each(function() {
    if ($(this).find('.label').length) {    
        var cl = $('.breadcrumbs,.aab_site-navigation,.comments').find('.label a').text();
        $('.breadcrumbs,.aab_site-navigation,.comments').addClass(cl);
    }
});

Keterangan:

$('#outer wrapper') //id yang di jadikan acuan.
var cl = $('#content-wrapper').find('.label a').text(); //ketika #content-wrapper menemukan .label a
 $('#content-wrapper').addClass(cl); // tambahkan class(cl) pada  #content-wrapper

Di atas memang terlihat sulit bagi yang pemula. untuk itu kita perlu sedikit yang lebih mudah. Perhatikan script berikut dengan seksama.

Cara Membuat Warna Background Selected Berbeda-beda Berdasarkan Label

<script type="text/javascript">
//<![CDATA[
(function (j) {
    var b = j('body'),
        l = j('.breadcrumbs,.aab_site-navigation,.comments');
    b.each(function () {
            if (j(this).find('.label').length) {
                var cl = j(this).find('.label a').text();
                l.addClass(cl);
            }
        });
})(jQuery);
//]]>
</script>

Keterangan untuk kode yang saya tandai:

j('.breadcrumbs,.aab_site-navigation,.comments') //Ganti id/class sesuai id/class yang anda inginkan.
('.label') // class label biasanya berbeda pada setiap template, ganti sesuai yang ada pada templatemu. umumnya (.label, .post-label, .tags)

Dari script diatas bisa kita katakan seperti ini: Ketika body menemukan .label maka tambahkan label yang aktif pada .breadcrum, aab_site-navigation, .comments

Contoh Tampilan:

Pada label: Tips
<div class='breadcrumbs Tips'>
Pada label: Seo
<div class='aab_site-navigation Seo'>
Pada label: Blogger
<div class='comments Blogger'>

Jadi anda hanya perlu menambahkan CSS saja seperti ini:

.breadcrumbs.Tips{background-color: blue}//hanya breadcrums pada label tips akan berwarna biru
.breadcrumbs.Seo{background-color: white}//hanya breadcrums pada label seo akan berwarna putih
.breadcrumbs.Blogger{background-color: black}//hanya breadcrums pada label blogger akan berwarna hitam
.aab_site-navigation.Tips{background-color: black}//hanya aab_site-navigation pada label tips akan berwarna hitam
.aab_site-navigation.Seo{background-color: blue}//hanya aab_site-navigation pada label seo akan berwarna biru
.aab_site-navigation.Blogger{background-color: green}//hanya aab_site-navigation pada label blogger akan berwarna hijau

CSS umum:

.Tips{background-color: #111}//semua  yang ada pada label .Tips akan berwarna #111
.Seo{background-color: #222}//semua  yang ada pada label .Tips akan berwarna #222
.Blogger{background-color:#333}//semua  yang ada pada label .Tips akan berwarna #333

Perhatian

Jika di templatemu belum terdapat pemicunya yang berupa label silahkan Cari kode 'post-body entry-content' dan tambahkan kode berikut diatasnya:

 <div class='top-line'>
<span class='label'>
  <b:if cond='data:post.labels'>
    <data:postLabels/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url + &quot;?max-results=9&quot;' expr:title='&quot;Artikel Berdasarkan Label: &quot; + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>
  </div>

Dan pasang css ini diatas ]]></b:skin> atau </style>

.top-line {
background: #eee;
padding: 10px;
}
.top-line .label {
padding: 5px;
background: #ddd;
}

Apabila sudah terdapat pemicu yang berupa class yang membungkus label, abaikan cara yang diatas.

Untuk DEMO perhatikan halaman ini pada breadcrums, menu navigasi dan komentar