Mecha versi 2.6.3 sudah dirilis!

Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

Tabel Konten
  1. Opsi 1: Dengan Label itu Sendiri 
  2. Opsi 2: Dengan Nama Kelas Khusus 
  3. Contoh CSS 
Darcy Clarke

Opsi 1: Dengan Label itu Sendiri 

Kekurangan: Nama label harus valid sebagai nama kelas dalam CSS. Satu karakter spasi dalam sebuah nama label akan membuatnya berlaku sebagai dua buah kelas CSS, dua sebagai tiga, tiga sebagai empat, begitu seterusnya.

<div class='post
<b:loop values='data:post.labels' var='label'>
  post-<data:label.name/>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Opsi 2: Dengan Nama Kelas Khusus 

Kekurangan: Kondisional untuk menentukan nama kelas adalah hard-coded, karena label tidak memiliki nilai abstrak seperti halnya ID pada posting dan komentar.

&lt;div class=&#39;post
<b:loop values='data:post.labels' var='label'>
  <b:switch var='data:label.name'>
    <b:case value='Menyenangkan'/>
post-red
    <b:case value='Jelek'/>
post-green
    <b:case value='Bosan'/>
post-blue
    <b:default/>
post-white
  </b:switch>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Contoh CSS 

.post {border-left:4px solid white}
.post-red {border-left-color:red}
.post-green {border-left-color:green}
.post-blue {border-left-color:blue}

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label

10 Komentar

Rohman Masyhar

Saya kira kurang efektif kang.
Kalau artikel kita punya Label gimana? bisa bentrok itu template

Unknown

tapi untuk label yang 2 kata tidak bisa..

BIRZ

Templatenya keren

Dista

Apakah bisa untuk 2 label atau lebih mas? Soalnya Saya mau menambahkan elemen , bukan mengganti style... Trims ^_^

Taufik Nurrohman

Bisa, tapi hanya akan berlaku di dalam area posting. Contohnya bisa dilihat di sini.

<b:if cond='data:post.labels any (i => i.name in ["Label 1", "Label 2"])'>
…
</b:if>

Dista

Mantul mas :bd , terimakasih atas bantuannya ^_^

Komentar telah ditutup.