Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label

kak sakti

jQuery, Panduan Blog

Sabtu, 11 Januari 2014

add comment

Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label - Karena tadi ada yang request tutorial tentang membuat tampilan posting Berbeda-Beda Berdasarkan Label , sebetulnya cara ini tidak terlalu sulit , anda hanya butuh memahami css , java script serta html , ok langsung saja tanpa panjang lebar mari kita buat tampilan posting Berbeda-Beda Berdasarkan Label

Berikut Tutorial Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label :

Langkah Pertama adalah sobat  harus temukan terlebih dahulu elemen yang biasanya digunakan untuk membungkus daftar label . cara mengetahuinya dengan cara inspect elemen

Langkah yang kedua 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: Android)
Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut

Setelah itu Pasang kode Java Script  di bawah ini tepat diatas kode </body>

<script type='text/javascript'>
$('.post').each(function() {
    if ($(this).find('.post-labels a:contains(Android)').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');
    }
});
</script>

Nah langkah yang terkahir sobat pasang CSS ini di atas ]]></b:skin> atau </style>

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

Kemudian Simpan Template . Untuk memudahkan cara ini , saya sarankan untuk menggunakan Tool  ini

Jika sobat ingin Tampilan Posting Berbeda-Beda Berdasarkan Label seperti pada blog ini , maka sobat harus kembangkan sendiri ya css nya :)

source:http://www.dte.web.id/