Seo Analizer: postingan grid di halaman beranda Blogspot (Blogger)

Rabu, 07 Mei 2025

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