Memuat berita terbaru...
الصفحة الرئيسية
Panduan Pemula
Tutorial WordPress

Cara Membuat Footer Keren di WordPress Tanpa Plugin

Cara membuat footer keren di WordPress tanpa plugin. Panduan praktis HTML & CSS responsif untuk tampilan profesional dan ringan. + contoh kode siap.
TipsTechPraktis

Membuat footer keren di WordPress tanpa plugin bisa meningkatkan tampilan profesional situs sekaligus menjaga kecepatan. Di panduan ini kamu akan belajar membuat footer responsif, rapi, dan informatif hanya dengan HTML dan CSS sederhana—tanpa perlu menambah plugin.

Kenapa Footer Penting?

Footer muncul di semua halaman, jadi ini tempat strategis untuk menaruh informasi kontak, link penting, social media, dan copyright. Footer yang rapi membantu navigasi dan memberi kesan profesional.

🔹 1. Rencana Isi Footer yang Direkomendasikan

  • Logo mini atau nama situs
  • Deskripsi singkat (1-2 kalimat)
  • Link cepat (Kontak, Tentang, Kebijakan Privasi)
  • Ikon sosial media (link ke profil)
  • Newsletter signup (opsional)
  • Copyright dan tahun update

🔹 2. Menambahkan Footer Tanpa Plugin — Dua Cara

  1. Via Widget/Customizer: Gunakan area Footer Widgets pada Appearance → Widgets atau Customizer untuk menambahkan widget "HTML Kustom" dan masukkan struktur HTML-nya.
  2. Via Additional CSS + Footer Template: Jika tema mendukung footer.php editing, tambahkan HTML di file footer (atau gunakan *Custom HTML widget*), lalu tambahkan CSS di Appearance → Customize → Additional CSS.

🔹 3. Contoh HTML Footer (Siap Pakai)

Masukkan HTML ini ke widget Custom HTML di area footer atau langsung ke file footer.php (jika nyaman mengedit tema):

<footer class="ttp-footer">
  <div class="container">
    <div class="f-col f-about">
      <h4>Tipstech Praktis</h4>
      <p>Panduan praktis seputar WordPress & blogging untuk pemula.</p>
    </div>
    <div class="f-col f-links">
      <h4>Link Cepat</h4>
      <ul>
        <li><a href="/tentang" title="Tentang">Tentang</a></li>
        <li><a href="/kontak" title="Kontak">Kontak</a></li>
        <li><a href="/kebijakan" title="Kebijakan Privasi">Kebijakan Privasi</a></li>
      </ul>
    </div>
    <div class="f-col f-social">
      <h4>Ikuti Kami</h4>
      <div class="social">
        <a href="#" aria-label="Instagram">IG</a>
        <a href="#" aria-label="Twitter">TW</a>
        <a href="#" aria-label="YouTube">YT</a>
      </div>
    </div>
  </div>
  <div class="f-bottom">
    <div class="container">
      <p>© <span id="year"></span> Tipstech Praktis. All rights reserved.</p>
    </div>
  </div>
</footer>

<script>
  // otomatis isi tahun
  document.addEventListener('DOMContentLoaded', function(){ 
    var y = new Date().getFullYear();
    var el = document.getElementById('year'); if(el) el.textContent = y;
  });
</script>

🔹 4. Contoh CSS (Responsive dan Minimal)

Tambahkan CSS ini di Appearance → Customize → Additional CSS atau file style.css tema anak (child theme):

.ttp-footer{background:#111; color:#eee; padding:36px 0; font-size:15px;}
.ttp-footer .container{display:flex; gap:32px; flex-wrap:wrap; max-width:1100px; margin:0 auto; padding:0 16px;}
.ttp-footer .f-col{flex:1 1 220px; min-width:200px;}
.ttp-footer h4{margin:0 0 10px; font-size:16px; color:#fff;}
.ttp-footer p{margin:0 0 12px; line-height:1.6; color:#cfcfcf;}
.ttp-footer ul{list-style:none; padding:0; margin:0;}
.ttp-footer ul li{margin-bottom:8px;}
.ttp-footer a{color:#cfcfcf; text-decoration:none;}
.ttp-footer a:hover{color:#fff; text-decoration:underline;}
.ttp-footer .social a{display:inline-block; margin-right:8px; padding:6px 10px; border-radius:4px; background:rgba(255,255,255,0.03);}
.ttp-footer .f-bottom{border-top:1px solid rgba(255,255,255,0.04); margin-top:24px; padding:14px 0; text-align:center; color:#aaa; font-size:14px;}
@media (max-width:720px){ .ttp-footer .container{flex-direction:column; gap:18px;} .ttp-footer .f-bottom{text-align:left;} }

🔹 5. Tips Desain dan SEO

  • Gunakan teks singkat di footer (1–2 kalimat) agar tidak memberatkan halaman.
  • Tambahkan link internal penting (Tentang, Kontak, Blog) untuk SEO dan navigasi.
  • Pastikan link social menggunakan atribut rel="noopener noreferrer" dan aria-label untuk aksesibilitas.
  • Gunakan warna kontras agar teks footer mudah dibaca, khususnya pada mode gelap.
  • Jangan menaruh terlalu banyak script di footer; idealnya hanya script ringan (mis. auto year) — scripts berat taruh di footer jika perlu atau gunakan defer.
Baca Juga :

🧠 Kesimpulan

Footer keren tidak harus dibuat dengan plugin. Dengan struktur HTML sederhana dan CSS responsif, kamu bisa membuat footer profesional yang ringan dan SEO-friendly. Sesuaikan konten footer dengan tujuan situs (katalog, portofolio, blog, atau toko).

💬 Coba dan Bagikan!

Sudah berhasil membuat footer sendiri di WordPress? Bagikan hasil atau pertanyaanmu di kolom komentar — biar pembaca lain dapat ide juga. 😊

Terima kasih sudah membaca di Tipstech Praktis. Nantikan panduan berikutnya: Cara Mengubah Tampilan Header di WordPress.

❓ Pertanyaan Umum

Apakah saya perlu plugin untuk membuat footer yang bagus?

Tidak. Footer sederhana dan menarik bisa dibuat hanya dengan HTML & CSS. Plugin berguna jika butuh fitur kompleks, tapi seringkali menambah beban situs.

Di mana saya menaruh kode CSS dan HTML footer?

Masukkan HTML ke widget "Custom HTML" pada area Footer (Appearance → Widgets) atau ke file footer.php jika pakai child theme. Tambahkan CSS di Appearance → Customize → Additional CSS.

Bagaimana cara memastikan footer tampil baik di mobile?

Gunakan CSS responsif (media query) dan atur kolom footer menjadi stack (satu kolom) pada layar kecil. Cek dengan mode responsive di browser atau perangkat asli.

إرسال تعليق