Cara Membuat Layout Footer di Blogspot untuk Gadget
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!
Posting Komentar