Tampilan Posting Berbeda-Beda Berdasarkan Label

Darcy Clarke

Saya hanya merasa sedikit penasaran dengan blog Darcy Clarke yang memiliki warna artikel berbeda-beda berdasarkan label posting. Pada awalnya Saya mencoba untuk melihat isinya, karena Saya pikir ada semacam script ajaib untuk melakukan sihir itu. Sayangnya Saya tidak menemukan apapun. Yang Saya temukan hanya tag <style> berisi CSS pendek untuk menyatakan warna latar posting tunggal:

<style>
    body
     { background: #DB8B23; }
    body h1 small
     { color: #DB8B23; }
    body #body
     { color: #000; }
</style>

Dalam Wordpress, ciri kecil seperti ini biasa disebut sebagai Custom Post. Hal ini bisa dilakukan dengan cara menginstal plugin Art Direction. Tapi setahu Saya plugin ini hanya berfungsi untuk menerapkan CSS tambahan tersebut pada saat kita memasuki halaman artikel tunggal, dan bukan menerapkan CSS pada setiap posting seperti gambar di atas.

Art Direction Plugin
Plugin Art Direction Wordpress

Meskipun, jika kita bisa mengetahui masing-masing kelas posting (misalnya .post-#postid), kita bisa saja menerapkan kode CSS pada masing-masing kelas tersebut:

.post-2444 {
  background-color:red;
}
.post-2445 {
  background-color:green;
}
.post-2446 {
  background-color:blue;
}

Tapi kelas posting tidak bisa kita kendalikan. Dan lagipula, Blogger tidak memiliki fasilitas seperti ini. Di sini kita tidak membicarakan mengenai tampilan posting yang berbeda-beda berdasarkan urutan acak melainkan membicarakan tentang tampilan posting yang berbeda-berbeda berdasarkan label, sehingga semuanya harus bisa kita kendalikan dengan baik.

Saat itu Saya cuma memikirkan tentang nama label yang tercantum pada setiap posting. Seandainya Saya bisa mengakses nama label tersebut dan menciptakan kodisi, maka Saya bisa menuliskan kode CSS khusus untuk setiap posting yang mengandung label dengan kata tertentu. Pikiran Saya berhenti pada selektor :contains(). Saya harap Saya bisa menemukan label berisi teks tertentu di dalam setiap posting, dan dengan cara itulah Saya akan menciptakan kondisi.

Yang terpenting adalah kita temukan terlebih dahulu elemen yang biasanya membungkus daftar label pada catatan kaki posting. Dalam blog ini Saya mendapati elemen ini:

Post Labels
Catatan kaki posting

Kita gunakan elemen itu untuk dijadikan sebagai induk dari daftar label posting. Dan kita bisa menciptakan kondisi dengan cara melihat semua artikel yang ada, kemudian kita cek apakah sebuah label berisi teks tertentu ada atau tidak di dalamnya. Jika ada, lakukan sesuatu pada posting tersebut!

// Lihat semua posting yang ada kemudian cek masing-masing tautan di dalam span.post-labels
// Cek apakah di dalamnya terdapat kata tertentu atau tidak (misalnya: Menyenangkan)
// Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut
$('.post').each(function() {
    if ($(this).find('.post-labels a:contains(Menyenangkan)').length) {
        $(this).addClass('red');
    } else if ($(this).find('.post-labels a:contains(Jelek)').length) {
        $(this).addClass('green');
    } else if ($(this).find('.post-labels a:contains(Bosan)').length) {
        $(this).addClass('blue');
    } else if ($(this).find('.post-labels a:contains(Mamamia)').length) {
        $(this).addClass('yellow');
    }
});

Nah! jika semua posting berlabel tertentu sudah mendapatkan kelasnya masing-masing, kita bisa mendefinisikan tampilannya di dalam CSS seperti ini:

.post.red    {background-color:red;   }
.post.green  {background-color:green; }
.post.blue   {background-color:blue;  }
.post.yellow {background-color:yellow;}

Saya tidak memiliki blog demo untuk tutorial ini, tapi Saya sudah membuat ilustrasinya. Katakanlah semua elemen <article> pada ilustrasi ini adalah posting-posting yang ada di dalam blog Anda:

Lihat Demo

Manipulasi ini setidaknya akan berjalan lancar pada posting yang hanya mengandung satu label saja dari semua nama label yang tercantum dalam kondisi. Jika tidak, hasilnya akan tidak terduga. Misalnya, jika kita telah menciptakan kondisi untuk posting dengan label Menyenangkan, Jelek, Bosan dan Mamamia, maka jika terdapat satu posting dengan label Menyenangkan dan Mamamia secara bersamaan, posting ini akan menunjukkan penanpilan yang tidak terduga tampilan posting akan mengikuti deklarasi warna pada kelas yang dituliskan terakhir (peraturan CSS: Yang bawah mengalahkan yang atas).

Saya juga sudah menerapkan teknik ini di sini, namun tampak tidak begitu mencolok. Saya hanya memanfaatkannya untuk menandai setiap label Tingkatan Pembelajaran Saat ini Saya sudah menggantinya dengan hack <b:loop> label posting yang tidak valid, dan hanya berlaku pada halaman tunggal, namun tetap bisa bekerja tanpa JavaScript:

Level Based Learning

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa javaScript

31 Komentar

  • ICHINK.WEB.ID

    Tak terduga gimana mas Taufik? Jadi penasaran, hehehe.
    warnanya ganti-ganti kah di demonya? Kayaknya kadang ada yang berubah warna.

  • Taufik Nurrohman

    @Manusia Biasa Bukan. Maksudnya begini: Setiap posting yang mengandung lebih dari satu label yang dituliskan dalam kondisi kemungkinan akan menerima lebih dari satu kelas baru. Sebenarnya jika diilustrasikan kembali secara nalar, setiap posting akan mendapatkan kelas seperti ini karena pengaruh fungsi .addClass():

    <article class='red'>Saya memiliki label Menyenangkan</article>
    <article class='green'>Saya memiliki label Jelek</article>
    <article class='blue'>Saya memiliki label Bosan</article>
    <article class='yellow'>Saya memiliki label Mamamia</article>

    Jika sampai salah satu posting memiliki nama label yang dituliskan dalam kondisi lebih dari satu, maka posting tersebut akan mendapatkan masalah (dalam kasus ini adalah masalah) seperti ini:

    <article class='red yellow'>Saya memiliki label Menyenangkan dan Mamamia</article>

    Dalam satu posting dikenai dua buah kelas baru yaitu red dan yellow. Padahal dalam CSS Saya menuliskan setiap kelas hanya untuk mendefinisikan warna border:

    article.red    {border-left-color:red;   }
    article.yellow {border-left-color:yellow;}

    Dalam peraturan CSS, setiap deklarasi yang berada di bawah akan memenangkan deklarasi sejenis di atasnya. Oleh karena itu warna border akan menjadi kuning.
    Tapi kalau misalnya Saya balik kode CSS menjadi begini:

    article.yellow {border-left-color:yellow;}
    article.red    {border-left-color:red;   }

    Maka warna border pada posting tersebut akan menjadi merah. Nah LOH! @@,

  • Unknown

    :'( binggung jadi berasap x@ dan pusing @@, mencarinya....

  • Unknown

    Bang taufik sebenarnya aku pingin yang ini untuk blogku yang biografiart kerena menurutku ini bagus buat loading blog. Aku juga lagi binggung nyari elemen yang membungkus daftar label pada catatan kaki posting.

  • Taufik Nurrohman

    @Suwardi Unggit Blognya nggak ada footernya :waaa:

  • Unknown

    @Taufik Nurrohman
    Ow... :'( saja kalau gitu, walau sedikit :p dan membuat kepala x@ , semoga ja setelah dikembalikan norml ada footernya :D :D

  • Unknown

    @Taufik Nurrohman bang aku cuma dapat ini <span class='post-labels'> terus code ini $('div.post').each(function() {
    if ($('span.post-labels a:contains(Menyenangkan)', this).length == 1) {
    $(this).addClass('red');
    } else if ($('span.post-labels a:contains(Jelek)', this).length == 1) {
    $(this).addClass('green');
    } else if ($('span.post-labels a:contains(Bosan)', this).length == 1) {
    $(this).addClass('blue');
    } else if ($('span.post-labels a:contains(Mamamia)', this).length == 1) {
    $(this).addClass('yellow');
    }
    });
    di kemanain..?? apa di sisipkan untuk menganti <span class='post-labels'> atau di masukan di tempat javascrift biasa.

  • Taufik Nurrohman

    @Suwardi Unggit Bukan, span.post-labels itu cuma buat indikator area yang menjadi bahan pengecekan. Script yang Saya tulis di atas dimasukkan ke dalam tag <script> seperti biasa. Kalau bisa dimasukkan ke dalam event .ready() terlebih dahulu supaya kita tidak perlu khawatir mengenai peletakkan yang tepat:

    <script>
    $(document).ready(function() {
    // Kode di sini...
    });
    </script>
  • Unknown

    @Taufik Nurrohman [Help] Masih ndak bisa bang, mungkin aku yang salah mengerti maksud yang abang tulis sehingga salah dan tidak bisa diterapkan. bisa buat tutornya kayak untuk anak playgroup atau anak Taman kanak-kanan ndak bang (step by step gitu)?? maklum ini tutorialnya bahasanya udah setingkat dewa jadi perlu merenung berjam-jam dan membuat dahi lebih cepat berkerut,untuk seorang newbie seperti saya dengan templete denim yang udah jadul itu terkadang tutornya masih perlu di sesuaikan lagi...hehehehe

  • Taufik Nurrohman

    @Suwardi Unggit Hmmm... =p*

  • Unknown

    @Taufik Nurrohman kenapa nich kok Hmmm

  • Unknown

    @Taufik Nurrohman Saya masih penasaran dengan yang ini, udah tak coba ubek2 masih juga tidak mau..............

  • Unknown

    makasi om taufik :)
    tutorial nya sukses sayah praktek.kan di blog ini => cafe-xp.blogspot.com

  • Unknown

    Iya bekerja, terima kasih

    hack b:loop ? kira2 seperti ini

    
    <b:loop values='data:post.labels' var='label'>
    <div expr:class='data:label.name'>
    <div class='post hentry' />
    </div>
    </b:loop>
    

    tapi tidak sampai menyentuh bagian comments form :'(

  • Anonim

    nah di bagian penutup itu kayaknya masalah utama sy menerapkan fungsi ini , kalau saya posting artikel biasanya overdosis label , hahaha :D

    oh iya sekalian tanya nih , kalo seandainya fungsi ini diterapkan ke template Blogazine 21.04.92 yang pernah Mas taufik bagikan ( yang sudah diperbaharui ) kira2 apakah akan berjalan lancar mas ? seandainya loh mas. soalnya ada blog saya yang pke blogazine dari Mas

    dan untuk penutup saya cuma mau ngasih 2 Jempol atas tulisan Mas Selama ini :Q

    • Taufik Nurrohman

      Overdosis label karena masuk ke dalam <b:loop>. Lebih baik nama labelnya saja yang digandakan, elemen HTML tidak usah digandakan:

      <b:if cond='data:post.labels'>
      &lt;div class=&#39;<b:loop values='data:post.labels' var='label'>
      <data:label.name/>
      </b:loop>&#39;&gt;
      </b:if>
      <article class='post'> ... </article>
      <b:if cond='data:post.labels'>
      &lt;/div&gt;
      </b:if>
      <!-- Akan berubah menjadi: -->
      <div class='
      Label1
      Label2
      Label3
      ...
      '>
      <article class='post'> ... </article>
      </div>

      Seandainya fungsi ini diterapkan ke template Blogazine 21.04.92 yang pernah Mas Taufik bagikan (yang sudah diperbaharui) kira-kira apakah akan berjalan lancar mas?

      Template polos seperti itu cuma diubah pada HTML dasar dan CSSnya saja. Selebihnya masih original bawaan dari Blogger.

      • budkalon

        hehe :) tentu cara ini bisa dikatakan lebbih efektif, karena tidak memerlukan kode javascript (EH, Jquery)

      • you

        maaf mas sedikit menyimpang mau tanya apakah pemanggilan class bisa diimplementasikan pada tinyscrollbar ?..

  • Anonim

    mas kalo tag body yang ditambahin class bisa gak ?

  • Unknown

    bisa diterapin di blog selain wordpress ga? mampir juga ke www.creamputih.blogspot.com

  • Unknown

    mas, gimana caranya menggunakan cara di atas tetapi yang di ubah bukan hanya tampilan dari class .post saja, tapi tampilan dari <body> juga di ubah mas?
    *maaf kalimatnya kalo susah dimengerti...

  • ANANTA

    sebagai masukan seputar background yang berubah ubah..
    cukup lihat ID body template kalian , lalu pasang css nya di tiap postingan dalam tipe HTML.
    contoh
    <style>
    body{background:#000;}
    </style>
    lalu lihat hasinya. salam buat mas taufik.

  • Randy

    pembahasan menarik bang, pengen nerapin buat post khusus blogazine jadi pas label blogazine dia layar full , aku baca-baca di post zhinto tapi masih gak ngeh karena kodenya ada yg diparse atau gak bang ini linknya
    http://zhinto.blogspot.com/2013/07/menandai-postingan-berdasarkan-kategori.html
    mohon petunjukknya

  • Unknown

    kalau misalkan mau mengubah warna backgroud pada sidebar atau komentar mas.
    tapi itu dihalaman item yang memiliki label ex: TEST

    • Taufik Nurrohman

      Dulu Saya pernah nemu tutorial begitu tapi lupa alamatnya. Caranya memakai loop label posting, lalu disisipkan tag <style> di situ.

      • Unknown

        Terimakasih mas. sudah bisa kok, saya hanya menambahkan loop label posting di halaman item dan pada akhirnya hanya merubah begini saja.
        $('.outer-wrapper').each(function() {
        if ($(this).find('.post-labels a:contains(Menyenangkan)').length) {
        $('.sidebar-wrapper').addClass('red');
        }
        dst......................

  • Unknown

    mas ,gimana jika saya ingin memberi warna/background pada nama-nama labelnya saja mas, jadi tiap-tiap ".post-labels a" mempunyai background dengan warna yang berbeda-beda, ?

    • Taufik Nurrohman

      Tambahkan nama label sebagai atribut HTML, terserah mau atribut apa, misalnya atribut title seperti ini:

      <li expr:title='data:label.name'> … </li>

      Kemudian kode CSS akan seperti ini:

      #Label1 li[title="Lorem"] {background:red}
      #Label1 li[title="Ipsum"] {background:green}
      #Label1 li[title="Dolor"] {background:blue}
      …
      • idyn1d

        makasih mas. mantep...

  • rullynovriyandi

    nunggu demo dan tutorial pengembangan ini mas :)

Komentar telah ditutup.