Tampilan Posting Berbeda-Beda Menurut Label Tanpa Javascript

Published by Concept Phone Kamis, 08 November 2018

Opsi 1: Dengan Label itu Sendiri

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

&lt;div class=&#39;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 memilih nama kelas yaitu hard-coded, alasannya yaitu label tidak mempunyai nilai abnormal menyerupai 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

Sumber https://www.dte.web.id/