Membuat Widget Menu 2 Kolom Halaman Di Footer Bawah Blogger
 |
Siapa yang tidak ingin tampilan footer blog terlihat rapi, profesional, dan tetap ringan? Selama ini saya selalu merasa bagian bawah blog Lintasiana terlihat kurang lengkap — menu halaman penting seperti Kontak, Kebijakan Privasi, Tentang Kami, dan lain‑lain hanya berjejer biasa, kadang berantakan, kadang terlalu panjang ke bawah, dan sering kali tidak seimbang antara layar HP maupun komputer. Saya sudah melihat banyak blog cantik yang menampilkan tautan‑tautan ini dalam kotak‑kotak rapi, berjejer dua kolom, lengkap dengan ikon kecil di samping setiap namanya — persis seperti gaya yang sering dipakai di situs‑situs berita profesional.
Namun setiap kali saya mencari cara membuatnya, saya selalu menemui kendala: ada yang menyuruh memasang banyak kode CSS tambahan, ada yang memanggil ikon dari luar sehingga memperlambat pemuatan halaman, ada pula yang strukturnya berantakan sehingga saat di HP malah jadi satu kolom yang sangat panjang atau bertumpuk tidak beraturan. Saya juga takut kalau menambahkan kode sembarangan akan merusak tampilan template Wuzz yang sudah saya atur sedemikian rupa, atau bahkan menurunkan skor performa dan SEO yang sudah saya jaga tetap 98–100.
Setelah mencoba berkali‑kali, mengganti kode, menyederhanakannya, dan mengujinya berkali‑kali di berbagai ukuran layar — akhirnya saya menemukan cara yang SEMPURNA! Menggunakan murni HTML dan CSS, tanpa satu baris kode JavaScript pun, ikon langsung tertanam di dalam kode sehingga tidak perlu memuat apa pun dari luar, tata letak otomatis dua kolom baik di komputer maupun HP, dan yang paling penting — tidak menurunkan skor performa maupun SEO sedikit pun! Dalam artikel ini, saya ingin berbagi seluruh pengalaman dan kode siap salinnya supaya kamu juga bisa membuat footer blogmu terlihat jauh lebih rapi dan profesional tanpa khawatir merusak apa pun.
Kata Kunci: cara membuat menu halaman di footer blogger, tautan halaman 2 kolom blogger, menu bawah blog elegan dengan ikon, menata footer tanpa merusak performa, kode menu halaman tanpa javascript, tautan kotak di bawah blog, tampilan footer profesional blogger, CSS grid 2 kolom tautan halaman.
Mengapa Menu Footer Itu Penting & Apa Masalah yang Sering Terjadi Pada Blog?
Banyak blogger menganggap bagian footer itu hanya pelengkap — cukup taruh teks hak cipta dan selesai. Padahal bagian bawah halaman itu adalah salah satu tempat yang paling sering dicari pengunjung ketika mereka butuh informasi penting: bagaimana cara menghubungi pemilik blog, apa aturan penggunaan isinya, di mana letak peta situs, atau syarat dan ketentuan layanan. Jika tautan‑tautan ini sulit ditemukan atau tampilannya berantakan, pengunjung bisa merasa tidak percaya dan pergi begitu saja.
Selain itu, menata halaman‑halaman wajib seperti Kebijakan Privasi, Penafian, Tentang Kami, Kontak, Syarat & Ketentuan, Peta Situs, dan halaman Kerja Sama dengan rapi juga sangat baik untuk SEO. Google menyukai situs yang strukturnya jelas dan mudah dinavigasi — tautan internal yang rapi saling menghubungkan halaman‑halaman penting sehingga perayapan berjalan lancar dan semua halaman mudah ditemukan.
Namun kendala yang sering kita temui saat ingin menata menu ini adalah:
- Tampilan berantakan: satu kolom sangat panjang ke bawah sehingga terlihat tidak rapi
- Terlalu lebar di layar besar tapi terlalu sempit di HP — atau sebaliknya
- Menambahkan ikon malah memperlambat blog karena memuat font ikon dari luar
- Menambahkan kode CSS yang terlalu rumit sehingga bentrok dengan gaya template asli
- Takut skor performa turun karena terlalu banyak elemen atau kode berat
Itulah sebabnya saya sangat teliti saat mencari solusi ini. Saya tidak ingin menambah beban pada blog saya, tapi saya juga ingin tampilannya maksimal. Dan akhirnya — solusi yang saya temukan ini menjawab SEMUA kebutuhan tersebut!
Cara Kerja Widget Halaman Di Footer Solusi Ini & Mengapa Aman untuk Blogmu
Sebelum masuk ke kodenya, saya ingin menjelaskan sedikit prinsip yang saya pakai supaya kamu paham juga bahwa ini benar‑benar aman dan tidak akan merusak apa pun:
✅ Menggunakan CSS Grid untuk Tata Letak Dua Kolom Otomatis
Daripada menggunakan cara lama dengan mengatur lebar persentase yang sering berantakan di HP, saya memakai properti CSS grid dengan pengaturan repeat(2, 1fr). Artinya — selalu buat dua kolom dengan lebar yang sama persis, apa pun ukuran layarnya. Di komputer lebar dibagi dua, di HP tetap dua kolom yang lebih sempit tapi tetap rapi, tidak berantakan menjadi satu tumpukan panjang. Ini jauh lebih ringan dan lebih stabil daripada menggunakan cara lain.
✅ Ikon SVG Langsung Tertanam — Tanpa Memuat Apa Pun dari Luar
Setiap ikon yang kamu lihat di kode itu adalah kode SVG murni yang tertulis langsung di dalam HTML. Tidak ada tautan ke Font Awesome, tidak ada file font yang harus diunduh, tidak ada permintaan tambahan ke server lain. Setiap ikon hanya beberapa ratus karakter — jauh lebih ringan daripada satu gambar kecil sekalipun. Warnanya juga otomatis mengikuti teks dengan menggunakan stroke="currentColor", jadi tidak perlu diubah manual jika kamu mengganti tema blog.
✅ Semua Kelas CSS Unik — Tidak Bentrok dengan Template
Saya memberi nama kelas yang khas dan unik seperti wd‑label‑wrap, wd‑label‑grid, dan seterusnya. Ini berarti gaya‑gaya ini hanya berlaku untuk kotak menu yang kita buat ini saja, tidak akan menimpa atau mengubah tampilan bagian lain dari blogmu. Bahkan jika template Wuzz atau tema lain kamu ganti nanti, kode ini tetap aman dan tidak akan mengacaukan apa pun.
✅ Satu Baris JavaScript PUN Tidak Ada — Sangat Ringan
Banyak solusi menu lain membutuhkan kode JavaScript untuk mengatur tata letak atau efek — padahal sebenarnya tidak perlu sama sekali! Semua tampilan, tata letak dua kolom, efek saat diarahkan kursor — semuanya bisa dibuat hanya dengan CSS. Tanpa JavaScript berarti tidak ada kode yang menghalangi pemuatan halaman, tidak ada yang memblokir tampilan awal, dan Core Web Vitals tetap terjaga dengan baik.
Kode Siap Salin — Menu Halaman Footer 2 Kolom Untuk Blogger Lengkap dengan Ikon
Inilah kode lengkap yang sudah saya uji berkali‑kali — berfungsi sempurna, tampil rapi dua kolom di semua perangkat, ikon cantik berbeda untuk setiap halaman, tautan sudah disesuaikan dengan halaman‑halaman yang ada di blogmu, dan semuanya ringan tanpa merusak apa pun. Cukup salin seluruh kode di bawah ini dan tempelkan di bagian mana pun yang kamu inginkan — biasanya di bagian bawah sebelum teks hak cipta atau di dalam widget footer:
<!-- ==============================================================
✅ 2 KOLOM SELALU — HP & DEKSTOP
✅ IKON SVG BERBEDA SETIAP LABEL
✅ DAFTAR & LINK SESUAI PERMINTAAN
✅ TANPA TOMBOL TUNJUKKAN SEMUA
✅ MURNI HTML + CSS — TANPA KODE BLOGGER
============================================================== -->
<style>
:root {
--box-border: #e5e7eb;
--box-bg: #ffffff;
--text-name: #1f2937;
--text-num: #6b7280;
--icon-stroke: #9ca3af;
--radius: 6px;
--gap: 12px;
}
.wd-label-wrap {
margin: 1.2rem 0;
}
.wd-label-title {
font-size: 15px;
font-weight: 600;
color: #374151;
margin: 0 0 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid #eee;
}
.wd-label-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* SELALU 2 KOLOM */
gap: var(--gap);
margin: 0;
padding: 0;
list-style: none;
}
.wd-label-grid li {
margin: 0;
padding: 0;
}
.wd-label-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
background: var(--box-bg);
border: 1px solid var(--box-border);
border-radius: var(--radius);
color: var(--text-name);
font-size: 14px;
text-decoration: none;
line-height: 1.4;
transition: all 0.2s ease;
}
.wd-label-link:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.wd-label-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-stroke);
}
.wd-label-text {
flex-grow: 1;
}
</style>
<div class="wd-label-wrap">
<h3 class="wd-label-title">Links</h3>
<ul class="wd-label-grid">
<!-- Contact Us — Ikon Amplop/Pesan -->
<li>
<a href="https://www.lintasiana.com/p/contacts-mes.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<span class="wd-label-text">contact Us</span>
</a>
</li>
<!-- Kebijakan — Ikon Dokumen/Aturan -->
<li>
<a href="https://www.lintasiana.com/p/kebijakan-privasi.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14,2 14,8 20,8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
</svg>
<span class="wd-label-text">kebijakan</span>
</a>
</li>
<!-- Tentang — Ikon Orang/Info -->
<li>
<a href="https://www.lintasiana.com/p/tentang-kami.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="wd-label-text">tentang</span>
</a>
</li>
<!-- Disclaimer — Ikon Segitiga Peringatan -->
<li>
<a href="https://www.lintasiana.com/p/penafian.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
<span class="wd-label-text">disclaimer</span>
</a>
</li>
<!-- Sitemap — Ikon Peta/Struktur -->
<li>
<a href="https://www.lintasiana.com/p/sitemap-us.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="3 9 9 3 15 9 21 9 21 15 15 21 9 15 3 15 3 9"></polygon>
<line x1="9" y1="3" x2="9" y2="15"></line>
<line x1="15" y1="9" x2="15" y2="21"></line>
</svg>
<span class="wd-label-text">sitemap</span>
</a>
</li>
<!-- Kerjasama — Ikon Tangan Berjabat -->
<li>
<a href="https://www.lintasiana.com/p/bekerja-sama.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 10c.7-.7 1.69 0 2.5 0a3.5 3.5 0 1 1 0 7h-3"></path>
<path d="M3.86 16.51a.52.52 0 0 1-.04-.72L6.5 13l2.5 2.5Z"></path>
<path d="M10.5 17H7a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.5"></path>
<path d="M15 17v-2a2 2 0 0 1 2-2h1"></path>
<path d="M15.25 16.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"></path>
<path d="M18 10a2 2 0 0 1 2 2v2"></path>
</svg>
<span class="wd-label-text">kerjasama</span>
</a>
</li>
<!-- S&K — Ikon Buku/Aturan -->
<li>
<a href="https://www.lintasiana.com/p/syarat-ketentuan.html" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span class="wd-label-text">s&k</span>
</a>
</li>
<!-- Index — Ikon Kaca Pembesar/Daftar -->
<li>
<a href="https://lintasiana.com/search/label" class="wd-label-link">
<svg class="wd-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
<span class="wd-label-text">index</span>
</a>
</li>
</ul>
</div>
Itulah seluruh kodenya! Sekarang saya akan jelaskan sedikit cara memasangnya supaya kamu tidak bingung:
- Buka menu Tata Letak di dasbor Blogger kamu
- Cari bagian tempat kamu ingin menaruh menu ini — biasanya di bagian bawah sebelum teks hak cipta, atau tambahkan widget baru jenis HTML/JavaScript di area footer
- Klik untuk mengeditnya, lalu hapus kode apa pun yang sudah ada di sana
- Salin SEMUA kode di atas dari awal <style> sampai akhir </div>
- Tempelkan ke kolom yang tersedia
- Klik Simpan — dan selesai! 🎉
Setelah disimpan, buka blogmu di tab baru — kamu akan melihat menu halaman yang rapi berjejer dalam dua kolom, setiap tautan ada di dalam kotak yang rapi lengkap dengan ikon cantik yang berbeda‑beda sesuai fungsinya. Coba lihat di HP juga — tetap dua kolom, tetap rapi, tidak berantakan! Saat kamu mengarahkan kursor ke salah satu kotak, warnanya akan berubah sedikit memberi tahu bahwa itu bisa diklik — efek halus dan elegan tanpa berlebihan.
Hal‑Hal yang Bisa Kamu Sesuaikan Sesuai Selera
Meskipun kode ini sudah berfungsi sempurna, tentu saja kamu bisa mengubahnya sedikit agar lebih cocok dengan selera atau warna tema blogmu:
🎨 Mengubah Warna
Di bagian paling atas kode CSS ada bagian :root yang berisi pengaturan warna. Kamu bisa mengubah nilainya sesuai keinginan: ganti #ffffff dengan warna latar yang kamu suka, atau ubah #1f2937 untuk warna teks. Semua tempat lain akan ikut berubah otomatis — sangat praktis!
📏 Mengubah Ukuran atau Jarak
Nilai --gap: 12px mengatur jarak antar kotak — perbesar angkanya kalau ingin lebih renggang, atau perkecil kalau ingin lebih rapat. Sedangkan padding: 10px 14px di bagian tautan mengatur ruang di dalam setiap kotak — tambah sedikit angkanya kalau ingin kotaknya terlihat lebih besar dan lebih lapang.
➕ Menambah atau Mengurangi Tautan Halaman
Setiap halaman dibungkus dengan pasangan tag <li>…</li>. Kalau mau menambah halaman baru, cukup salin salah satu pasangan tersebut, ganti tautan href="…" dengan alamat halaman barunya, ganti teks yang terlihat, dan ganti kode SVG ikonnya dengan yang sesuai. Kalau mau menghapus, cukup hapus pasangan <li>…</li> tersebut — tata letak dua kolom akan otomatis menyesuaikan tanpa perlu mengubah yang lain!
Mengapa Ini Lebih Baik daripada Cara Lain — & Jaminan Performa
Setelah saya pasang kode ini di Lintasiana, saya langsung mengecek ulang di PageSpeed Insights untuk memastikan tidak ada yang berubah — dan hasilnya: skor performa tetap 98, SEO tetap 100, tidak turun satu angka pun! Inilah bukti nyata bahwa cara ini benar‑benar ringan dan tidak membebani blog sama sekali.
Berikut perbandingannya dengan cara lain yang sering dipakai:
- ✅ VS Font Ikon Eksternal: Tidak perlu memuat satu file pun dari luar — SVG langsung di dalam kode → jauh lebih cepat & ringan
- ✅ VS Tabel atau Float Lama: CSS Grid otomatis mengatur tata letak → selalu rapi di semua layar tanpa kode tambahan
- ✅ VS JavaScript Menu: Tanpa satu baris JS → tidak memblokir rendering, tidak menambah waktu pemuatan
- ✅ VS Gambar Ikon: SVG vektor berukuran beberapa ratus byte vs gambar beberapa puluh ribu byte → ratusan kali lebih ringan
- ✅ VS Menu Teks Biasa: Tampilan lebih profesional, mudah dikenali pengunjung, struktur jelas → pengalaman pengguna & SEO lebih baik
Hal yang paling saya sukai dari cara ini adalah kesederhanaannya — kodenya pendek, mudah dipahami, mudah diubah, tapi hasilnya terlihat seperti fitur profesional yang dibuat oleh tim pengembang berpengalaman. Ini membuktikan bahwa kita tidak selalu membutuhkan kode rumit atau alat mahal untuk membuat tampilan blog terlihat hebat — kadang yang kita butuhkan hanyalah memahami cara kerja dasar HTML dan CSS, lalu menyusunnya dengan rapi dan teliti.
Kesimpulan
Membuat menu halaman di footer Blogger yang rapi, elegan, dua kolom, lengkap dengan ikon cantik, dan tetap ringan ternyata jauh lebih mudah daripada yang saya bayangkan — asal kita tahu caranya yang benar. Tidak perlu kode rumit, tidak perlu memuat font ikon dari luar, tidak perlu JavaScript yang membebani halaman. Semua bisa dilakukan dengan murni HTML dan CSS yang ringan, rapi, dan terstruktur baik.
Melalui pengalaman ini, saya belajar beberapa hal penting: selalu cari solusi yang paling sederhana dulu sebelum mencoba cara yang rumit, pastikan setiap tambahan yang kita pasang di blog kita benar‑benar diperlukan dan tidak membebani kinerja, dan jangan takut mencoba lalu menguji berkali‑kali sampai menemukan yang paling pas.
Kini bagian bawah blog Lintasiana terlihat jauh lebih lengkap dan profesional. Pengunjung bisa dengan mudah menemukan halaman yang mereka butuhkan — mulai dari cara menghubungi kami, aturan privasi, informasi tentang situs, sampai halaman kerjasama — semuanya tersusun rapi dalam dua kolom yang seimbang, lengkap dengan ikon yang membantu mereka mengenali fungsi setiap tautan sekilas saja. Dan yang paling penting — skor performa serta SEO tetap terjaga sempurna, tidak ada yang turun sedikit pun.
Semoga panduan lengkap dan kode siap salin yang saya bagikan ini bermanfaat untuk blogmu juga. Cobalah pasang, sesuaikan warnanya dengan tema blogmu, dan lihat betapa berbedanya tampilan footer blogmu — dari yang biasa saja menjadi terlihat rapi, lengkap, dan profesional tanpa mengorbankan kecepatan maupun kualitas blogmu. Semangat terus berkarya dan membangun blog yang hebat! 💪🚀
