postingan grid di halaman beranda Blogspot (Blogger)
Untuk membuat tampilan postingan grid di halaman beranda Blogspot (Blogger), kamu perlu mengedit template HTML dan CSS-nya agar menampilkan postingan dalam bentuk kotak-kotak (grid) seperti di website modern. Berikut langkah-langkahnya:
✅ 1. Masuk ke Blogger dan Edit Template
-
Login ke Blogger.
-
Masuk ke blog yang ingin diubah.
-
Klik Tema > Edit HTML.
✅ 2. Tambahkan CSS Grid Layout
Cari tag <head> atau sebelum </head>, lalu tambahkan CSS ini:
<style>
/* Container untuk grid post */
.grid-post-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px;
}
/* Gaya tiap kotak post */
.grid-post {
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
background: #fff;
}
.grid-post:hover {
transform: scale(1.02);
}
/* Gambar thumbnail */
.grid-post img {
width: 100%;
height: 180px;
object-fit: cover;
}
/* Judul */
.grid-post h2 {
font-size: 18px;
padding: 10px;
}
/* Ringkasan */
.grid-post p {
padding: 0 10px 10px;
font-size: 14px;
color: #555;
}
</style>
✅ 3. Modifikasi Loop Postingan di Template
Cari bagian seperti ini di HTML (biasanya dalam tag <!-- posts --> atau b:loop):
<b:loop values='data:posts' var='post'>
...
</b:loop>
Lalu bungkus loop tersebut dalam div .grid-post-wrapper, dan ubah tampilannya menjadi seperti ini:
<div class="grid-post-wrapper">
<b:loop values='data:posts' var='post'>
<div class="grid-post">
<a expr:href='data:post.url'>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='data:post.thumbnailUrl' alt='Thumbnail'/>
<b:else/>
<img src='URL_GAMBAR_DEFAULT' alt='Default Image'/>
</b:if>
<h2><data:post.title/></h2>
</a>
<p><data:post.snippet/></p>
</div>
</b:loop>
</div>
✅ 4. Simpan dan Lihat Hasilnya
Klik Simpan, lalu buka beranda blog kamu. Postingan sekarang ditampilkan dalam bentuk grid responsif.
💡 Catatan:
-
Gantilah
URL_GAMBAR_DEFAULTdengan gambar fallback jika tidak ada thumbnail. -
Pastikan postingan punya gambar utama agar tampil rapi.
-
Untuk kontrol lebih, kamu bisa pakai custom snippet atau menambahkan tombol "Baca Selengkapnya".