LarhTech – Sebuah blog dinilai dari bagaimana ia menyajikan kontennya. Meskipun Anda sudah memiliki tata letak (layout) yang rapi, jika daftar artikel Anda ditampilkan dengan gaya jadul, hanya teks memanjang ke bawah tanpa struktur visual yang menarik, pengunjung akan cepat bosan.
Secara default, saat kita memanggil widget Blog di XML, Blogger akan menggunakan desain bawaan mereka. Untuk mengambil alih desain tersebut sepenuhnya, kita harus melakukan override (menimpa) sistem bawaan menggunakan tag sakti bernama <b:includable id=’main’>.
Di dalam tag tersebut, kita akan menggunakan <b:loop> untuk melakukan perulangan (menampilkan artikel pertama, kedua, ketiga, dan seterusnya) lalu membungkus setiap artikel dengan elemen HTML dan CSS buatan kita sendiri. Mari kita ubah daftar postingan Anda menjadi desain kartu (Card Grid) yang modern!
Langkah 1: Membongkar Widget Blog
Buka kembali dashboard Blogger Anda dan masuk ke menu Tema > Edit HTML.
Pada Part 2, kita menulis widget Blog dengan kode penutup singkat seperti ini:
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>Sekarang, kita harus membukanya agar bisa diisi dengan instruksi baru. Ubah baris kode tersebut menjadi seperti ini (perhatikan perubahan tanda penutupnya > dan </b:widget>):
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
Langkah 2: Menimpa Desain Bawaan (Override b:includable)
Di dalam tag <b:widget> yang baru saja kita buka, tambahkan tag <b:includable id=’main’>. Ini adalah perintah yang menyuruh mesin Blogger: “Hei, jangan gunakan desain bawaanmu, gunakan desain yang aku tulis di dalam sini!”
Masukkan kode ini ke dalamnya:
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main'>
<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:includable>
</b:widget>Penjelasan Tag Ajaib:
- <b:loop values=’data:posts’ var=’post’>: Mengambil semua data artikel dari database Blogger, lalu kita beri nama alias post.
- expr:src dan expr:href: Jika Anda ingin memasukkan Data Blogger ke dalam atribut HTML (seperti link atau sumber gambar), Anda harus menambahkan awalan expr:.
- <data:post.title/>: Memanggil judul artikel.
- <data:post.snippet/>: Memanggil ringkasan/cuplikan teks artikel.
Langkah 3: Menghias Kartu dengan CSS
HTML di atas sudah berhasil mengambil data, tapi tampilannya masih berantakan. Mari kita sulap menjadi Grid yang indah.
Gulir ke atas, cari area <b:skin><![CDATA[ tempat Anda menyimpan CSS dari Part 2. Tambahkan kode CSS ini di bagian paling bawah sebelum ]]></b:skin>:
/* --- POST CARD GRID (Daftar Artikel) --- */
.post-container {
display: grid;
/* Membuat grid responsif: minimal lebar 250px, selebihnya menyesuaikan layar */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.post-card {
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Efek melayang saat disentuh mouse */
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.post-thumb {
width: 100%;
height: 160px;
object-fit: cover; /* Agar gambar tidak gepeng */
border-bottom: 1px solid #e5e7eb;
}
.post-info {
padding: 15px;
}
.post-title {
font-size: 1.1em;
margin: 0 0 10px 0;
line-height: 1.4;
}
.post-title a {
text-decoration: none;
color: #1f2937;
transition: color 0.2s;
}
.post-title a:hover {
color: #2563eb; /* Berubah biru saat di-hover */
}
.post-snippet {
font-size: 0.85em;
color: #6b7280;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 3; /* Membatasi teks maksimal 3 baris */
-webkit-box-orient: vertical;
overflow: hidden;
}
.read-more {
display: inline-block;
background-color: #2563eb;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
text-decoration: none;
font-size: 0.85em;
font-weight: bold;
transition: background-color 0.2s;
}
.read-more:hover {
background-color: #1d4ed8;
}
Langkah 4: Simpan dan Nikmati Hasilnya!
Klik tombol Simpan (ikon disket), lalu buka halaman depan blog uji coba Anda. Untuk demo dari hasil ini bisa klik ini -> Demo Hasil.
Jika di Part 1 Anda sudah membuat 2 atau 3 artikel uji coba (yang memiliki gambar dan teks panjang), Anda akan langsung melihat perubahannya. Artikel Anda kini tidak lagi berbaris jelek ke bawah, melainkan tersusun rapi di dalam kotak-kotak berbayang yang sangat cantik seperti web profesional!
Kesimpulan
Luar biasa! Di Part 3 ini Anda sudah mempelajari “Jantung” dari mesin tema Blogger. Dengan memahami <b:includable> dan <b:loop>, Anda kini memiliki kekuatan tak terbatas untuk merancang tata letak web magazine, portofolio, atau katalog produk murni hanya menggunakan Blogger!
Lanjut Part 4 Final: Desain Halaman Artikel dan Kondisional
Namun, kita masih punya satu pekerjaan rumah. Jika Anda mengeklik tombol “Baca Selengkapnya“, Anda akan menyadari bahwa halaman isi artikel (Single Post) juga masih berantakan. Di Part 4 (Final) nanti, kita akan belajar cara memisahkan desain halaman depan (Homepage) dan desain halaman artikel tunggal menggunakan b:if cond=’data:view.isPost‘. Tetap semangat!
Last Updated on Maret 25, 2026 by larhtechBro
