Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » Blogger » Lanjutan » Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

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

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . 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

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!