Cara Membuat Layout Footer di Blogspot untuk Gadget

Adam Muiz

Diperbarui: 14 Apr, 2025 • 0 • menit membaca

Daftar Isi

Jika kamu bosan dengan tampilan footer Blogspot yang hanya memiliki satu kolom, kamu bisa mengubahnya menjadi tiga kolom yang lebih rapi, profesional, dan responsif.

Desain ini sangat cocok untuk menampilkan profile singkat, sosial media, dan link halaman penting secara berdampingan di bagian bawah blog.

Keuntungan Menggunakan Footer 3 Kolom

Tampilan blog lebih profesional
Membantu pengunjung menemukan informasi penting
Mudah disesuaikan melalui Tata Letak Blogspot
Responsif di perangkat mobile

Langkah 1: Tambahkan Kode HTML Footer 3 Kolom

Masuk ke menu Tema → Edit HTML, lalu cari bagian <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>. Tepat sebelum baris itu, tambahkan kode berikut:

<footer class="custom-footer">
  <div class="footer-inner">
    <div class="footer-columns">
      <b:section id="footer-col-1" class="footer-column" maxwidgets="5" showaddelement="yes"></b:section>
      <b:section id="footer-col-2" class="footer-column" maxwidgets="5" showaddelement="yes"></b:section>
      <b:section id="footer-col-3" class="footer-column" maxwidgets="5" showaddelement="yes"></b:section>
    </div>
    <div class="footer-bottom">
      <p>© 2025 YourSiteName. All rights reserved.</p>
    </div>
  </div>
</footer>

Ganti YourSiteName dengan nama blog kamu.

Langkah 2: Tambahkan CSS untuk Tampilan yang Rapi

Masih di Edit HTML, cari tag </head> lalu tambahkan CSS berikut tepat sebelum baris tersebut. Atau kamu juga bisa masuk ke Tema → Sesuaikan → Lanjutan → Tambahkan CSS:

<style>
.custom-footer {
  background: #1a1a1a;
  color: #f0f0f0;
  padding: 40px 20px 20px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}

.footer-inner {
  max-width: 1200px;
  margin: auto;
}

.footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.footer-column {
  flex: 1;
  min-width: 250px;
}

.footer-bottom {
  text-align: center;
  font-size: 13px;
  color: #aaa;
  border-top: 1px solid #444;
  padding-top: 15px;
}

@media screen and (max-width: 768px) {
  .footer-columns {
    flex-direction: column;
    gap: 30px;
  }

  .footer-column {
    min-width: 100%;
  }
}
</style>

Langkah 3: Tambahkan Konten Lewat Tata Letak

Setelah kamu menyimpan semua perubahan, buka kembali menu Tata Letak. Di bagian footer, kamu akan melihat tiga area baru:

Footer-col-1: Gunakan untuk menampilkan profile singkat atau deskripsi blog.
Footer-col-2: Tambahkan link sosial media, ikon, atau label.
Footer-col-3: Masukkan daftar halaman, seperti About, Kontak, atau Kebijakan Privasi.

Hasil Akhir

Footer blog kamu sekarang memiliki tiga kolom yang tampil rapi di desktop maupun HP. Kamu bisa menyesuaikan warna, font, atau struktur kolom sesuai kebutuhan dan identitas blog kamu.

Penutup

Mengubah footer menjadi tiga kolom bukan hanya soal estetika, tapi juga fungsionalitas. Pengunjung akan lebih mudah menemukan informasi penting, dan blog kamu pun terlihat lebih profesional.

Semoga tutorial ini bermanfaat. Selamat mencoba dan jangan lupa untuk membagikan artikel ini jika berguna!

Adam Blog