Halo teman-teman! Saat memodifikasi template Blogger, memahami logika pengondisian (kondisi IF) sangatlah penting agar widget atau elemen tertentu hanya muncul di halaman yang kita inginkan saja. Berikut ini adalah rangkuman lengkap yang bisa Anda simpan:
========================================================================
RANGKUMAN LOGIKA IF (KONDISI) PADA BLOGGER / BLOGSPOT
========================================================================
Gunakan kode-kode di bawah ini di dalam menu 'Edit HTML' tema Blogger Anda
untuk mengatur muncul atau sembunyinya suatu konten/widget.
------------------------------------------------------------------------
1. HANYA MUNCUL DI HALAMAN AWAL (HOMEPAGE)
------------------------------------------------------------------------
<b:if cond='data:view.isHomepage'>
<!-- Konten ditaruh di sini -->
</b:if>
------------------------------------------------------------------------
2. SEMBUNYI DI HALAMAN AWAL (MUNCUL DI HALAMAN LAIN)
------------------------------------------------------------------------
<b:if cond='!data:view.isHomepage'>
<!-- Konten ditaruh di sini -->
</b:if>
------------------------------------------------------------------------
3. HANYA MUNCUL PADA ARTIKEL/POSTINGAN TERTENTU
------------------------------------------------------------------------
<b:if cond='data:view.url == "URL_POSTINGAN_ANDA"'>
<!-- Konten ditaruh di sini -->
</b:if>
------------------------------------------------------------------------
4. HANYA MUNCUL PADA LABEL (KATEGORI) TERTENTU
------------------------------------------------------------------------
<b:if cond='data:view.search.label == "NamaLabel"'>
<!-- Konten ditaruh di sini -->
</b:if>
------------------------------------------------------------------------
5. LOGIKA PENTING LAINNYA
------------------------------------------------------------------------
* Hanya Halaman Artikel : <b:if cond='data:view.isPost'>
* Hanya Halaman Statis : <b:if cond='data:view.isPage'>
* Hanya Halaman Cari & Label : <b:if cond='data:view.isSearch'>
* Hanya Halaman Indeks/Banyak : <b:if cond='data:view.isMultipleItems'>
------------------------------------------------------------------------
6. MENGGUNAKAN FUNGSI "JIKA TIDAK" (ELSE)
------------------------------------------------------------------------
<b:if cond='data:view.isHomepage'>
<!-- Jika di halaman utama -->
<b:else/>
<!-- Jika BUKAN di halaman utama -->
</b:if>
========================================================================
CATATAN: Pastikan setiap pembuka <b:if> selalu ditutup dengan </b:if>
========================================================================
Nah, setelah mempelajari logika di atas, kita juga bisa memanfaatkannya untuk menampilkan elemen interaktif. Sebagai bonus pelengkap, berikut adalah 3 desain animasi CSS modern yang bisa Anda terapkan di blog Anda:
1. Orbital / Revolution Animation
Animasi mengorbit menciptakan efek di mana sebuah objek berputar mengelilingi pusat lingkaran secara konstan. Sangat cocok untuk visualisasi sistem planet atau presentasi core-value produk.
2. Morphing Blob Animation
Menggunakan manipulasi border-radius dinamis untuk menghasilkan gerakan mirip cairan organik (Blob) yang berubah bentuk secara halus. Tren ini sangat populer untuk latar belakang grafis modern.
3. Floating & Levitation Animation
Animasi melayang naik-turun secara berkala yang memberikan kesan elegan dan ringan. Bagus digunakan untuk menarik perhatian pembaca pada tombol CTA (Call to Action) atau ikon fitur.
🚀
Melayang
CSS Floating
Masing-masing komponen di atas sepenuhnya dibuat menggunakan HTML dan CSS murni (tanpa Javascript) sehingga sangat ringan saat dimuat di perangkat mobile maupun desktop.