Background Warna-Warni Berdasarkan Label

Artikel ini menjelaskan cara agar background warna-warni atau berbeda warnanya sesuai dengan label atau kategori artikel.

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

BLOGGER: 28
  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
  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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Background Warna-Warni Berdasarkan Label
Background Warna-Warni Berdasarkan Label
Artikel ini menjelaskan cara agar background warna-warni atau berbeda warnanya sesuai dengan label atau kategori artikel.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7WrhYXUY58aIePpDQTMIvw-lil9qxIlx39nmw9_GhV_0jOGpmvrVzO7ORj6S53VfxhVq0dICL-j0F4WFkvMpl5X_rG5P_ISOAEG86-ZtOaADTgff6aOhnhv8RASQtrCY1mtInj9nAEM/s1600/background_warna_warni.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7WrhYXUY58aIePpDQTMIvw-lil9qxIlx39nmw9_GhV_0jOGpmvrVzO7ORj6S53VfxhVq0dICL-j0F4WFkvMpl5X_rG5P_ISOAEG86-ZtOaADTgff6aOhnhv8RASQtrCY1mtInj9nAEM/s72-c/background_warna_warni.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2014/07/background-warna-warni-berdasarkan.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/07/background-warna-warni-berdasarkan.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content