<style> berisi CSS pendek untuk menyatakan warna latar posting tunggal:<style type="text/css">
body
{ background: #DB8B23; }
body h1 small
{ color: #DB8B23; }
body #body
{ color: #000; }
</style>
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;
}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:
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
$('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');
}
});.post.red {background-color:red; }
.post.green {background-color:green; }
.post.blue {background-color:blue; }
.post.yellow {background-color:yellow;}<article> pada ilustrasi ini adalah posting-posting yang ada di dalam blog Anda: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.
Saya juga sudah menerapkan teknik ini di sini, namun tampak tidak begitu mencolok. Saya hanya memanfaatkannya untuk menandai setiap label Tingkatan Pembelajaran:
Saya juga sudah menerapkan teknik ini di sini, namun tampak tidak begitu mencolok. Saya hanya memanfaatkannya untuk menandai setiap label Tingkatan Pembelajaran:
