postingan grid di halaman beranda Blogspot (Blogger)

Darmudi Susanto

7 Mei, 2025

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  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_DEFAULT dengan 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".