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

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 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.


Comments

  1. mas kok gk berubah ya warnanya,, mohon solusinya

    ReplyDelete
    Replies
    1. Oh ya? Masa sich? :)
      Mas Rully, coba periksa label postingan sudah disesuaikan belum?

      Delete
    2. lihat ini dah http://wewrwr.blogspot.com/

      sekalian saran

      Delete
  2. kalau label nya itu terdiri dari dua kata atau lebih berfungsi kah ??
    misal posting blalalaa berlabel : kata bijak

    ReplyDelete
    Replies
    1. Iya Nong..berfungsi, misalnya label di blog ini: contact form, share button, dan tag kondisional terdiri dari dua kata.

      Delete
    2. terima kasih pak, atas tutorial dan tanggapan yang sangat fast respon ini ...
      :-bd :-d

      Delete
    3. Kebetulan online jadi langsung saya balas :) Btw, bila sebuah artikel berisi dua buah label maka warna yang diterapkan adalah warna label yang kedua atau terakhir. Misalnya, satu artikel memiliki label CSS dan jQuery, label CSS berwarna biru sedangkan label jQuery berwarna merah maka background-nya nanti akan berwarna merah.

      Delete
    4. iya saya mulai paham pak, lagipula ini saya baru buat blog karna dikasih domain gratis dari mantan saya pak, cuma belum di ubah domain ke domain pribadi saya.

      oh iya saya mau tanya lagi pak, mumpung lagi online, bagaimana mengganti efek loading dengan javascript jam seperti http://www.somazingblog.com/ ketika loading blognya pak

      Delete
  3. iyahhiyahh seperti itu pak, cuma nanti gambar kofi nya diganti gitu pak,,
    apahapah tutorialnya pak ..

    oiya aku ini cewek pak ^_^

    ReplyDelete
    Replies
    1. Bentar aku buatin, judul yang bagus apa ya?
      Ooooh...Cewek tho, tapi jenong+jelek yach =D

      Delete
  4. gimana mas gak bisa http://wewrwr.blogspot.com/ (saran juga mas)


    mas kalok nambahin shopping cart gimana ???

    ReplyDelete
  5. yesss.. akhirnya ketemu nih tutorialnya, ane udah cari cari di mbah google ngga ketemu" @@, akhirnya di anterin kesini juga sama mbah google \o/ ane coba dulu ya mas :)

    ReplyDelete
  6. mas, tapi kok ngga bisa yah :(

    ReplyDelete
    Replies
    1. Simak baik-baik tutonya, yang lain bisa koq :)

      Delete
  7. mas kalo kode dibawah ini ga ada
    .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}

    trus kode yang ini taruh dimana ?
    .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;}

    saya udah taru di skin ga bisa :'(

    ReplyDelete
    Replies
    1. Dalam template, mudahnya letakkan di atas ]]></b:skin> atau </style>

      Delete
  8. mas rahman, saya mau tanya, kok tampilan tombol berbagi di postingan saya tidak keluar ya ? mohon bantuanya ya mas ,, trims ^.^

    ReplyDelete
    Replies
    1. linknya ini mas file-sekolah.blogspot.com

      Delete
    2. Paling pertama pastikan blog tidak disetting private.

      Delete
  9. mas saya cek menggunakan Console ternyata yang error "Uncaught TypeError: window.ready is not a function" mohon dibenarkan

    ReplyDelete

Post a Comment

Popular posts from this blog

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template