Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 31 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!