LarhTech – Mendesain website ibarat merancang sebuah majalah. Halaman sampul (Homepage) harus penuh dengan gambar dan ringkasan yang menggoda mata, sedangkan halaman isi (Single Post) harus bersih, luas, dan nyaman untuk membaca teks yang panjang.
Pada mesin Blogger, kedua halaman ini sebenarnya dikendalikan oleh satu widget yang sama, yaitu Widget Blog. Agar kita bisa memberikan dua desain yang berbeda pada satu widget, kita membutuhkan sebuah “sakelar otomatis”. Sakelar ini akan mendeteksi: Apakah pengunjung sedang berada di halaman depan, atau sedang membaca sebuah artikel?
Di sinilah keajaiban Tag Kondisional (b:if) Blogger bekerja. Dalam seri penutup ini, kita akan membelah kode <b:includable> kita menjadi dua bagian: satu untuk desain Kartu Grid (Part 3), dan satu lagi untuk menampilkan isi artikel secara utuh (<data:post.body/>).
Langkah 1: Memahami Tag Kondisional Blogger
Blogger memiliki bahasa logikanya sendiri. Untuk membedakan halaman, kita menggunakan kondisi data:view.
- data:view.isMultipleItems: Bernilai BENAR jika pengunjung berada di halaman beranda, halaman indeks, atau pencarian (menampilkan banyak artikel).
- data:view.isSingleItem: Bernilai BENAR jika pengunjung sedang membuka satu URL artikel atau halaman statis.
Kita akan menggunakan struktur If-Else (Jika-Maka) dasar seperti ini:
<b:if cond='data:view.isMultipleItems'>
<b:else/>
</b:if>Langkah 2: Merombak Total b:includable main
Buka menu Tema > Edit HTML di blog uji coba Anda.
Cari kembali tag <b:includable id=’main’> yang kita buat di Part 3. Hapus isinya, dan ganti dengan struktur logika kondisional yang sudah disempurnakan ini:
<b:includable id='main'>
<b:if cond='data:view.isMultipleItems'>
<div class='post-container'>
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</b:if>
<div class='post-info'>
<h2 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
<p class='post-snippet'><data:post.snippet/></p>
<a class='read-more' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</article>
</b:loop>
</div>
<b:else/>
<div class='single-post-container'>
<b:loop values='data:posts' var='post'>
<article class='single-post'>
<h1 class='single-title'><data:post.title/></h1>
<div class='single-meta'>
Ditulis oleh <strong><data:post.author.name/></strong> pada <data:post.date/>
</div>
<div class='single-body'>
<data:post.body/>
</div>
</article>
</b:loop>
</div>
</b:if>
</b:includable>Kunci Rahasia: Tag <data:post.body/> adalah urat nadi sebuah blog. Tag inilah yang akan memanggil semua teks, gambar, video, dan heading yang Anda ketik di editor postingan Blogger.
Langkah 3: Menambahkan CSS untuk Halaman Artikel
Agar teks artikel nyaman dibaca (tidak terlalu mepet dan ukurannya pas), kita perlu menambahkan sedikit gaya.
Gulir ke atas menuju area <b:skin><
Langkah 4: Simpan dan Uji Coba (Final Test)
- Klik tombol Simpan di editor HTML Anda.
- Buka blog Anda. Di halaman depan, pastikan desain “Kartu” masih muncul dengan rapi.
- Sekarang, klik tombol “Baca Selengkapnya” pada salah satu artikel.
- BAM! Halaman akan berganti menampilkan judul artikel yang besar, nama penulis, dan seluruh isi teks beserta gambar yang Anda buat, terbungkus dalam kotak putih yang elegan. Sidebar Anda pun akan tetap setia menemani di sebelah kanan!
Kesimpulan Seri
Selamat! Anda telah resmi menjadi seorang Blogger Theme Developer. Hanya dalam 4 artikel, Anda berhasil mengubah kanvas XML kosong menjadi sebuah website responsif yang memiliki Grid Layout, Header, Sidebar, dan sistem deteksi halaman otomatis. Ilmu struktur XML (b:section, b:widget, b:includable, dan b:loop) yang Anda kuasai ini adalah kunci untuk memodifikasi atau bahkan menjual template premium Anda sendiri di masa depan.
Untuk hasil theme yang kita buat dari part 1 hingga part 4 ini bisa kamu klik ini -> Demo Hasil
Baca Juga: Cara Install WordPress Hanya 1 Click
Blogger mungkin adalah platform tua, namun di tangan developer yang memahami kodenya, ia bisa disulap menjadi mesin website gratis yang tidak kalah canggih dari WordPress atau Next.js!
