template footer HTML gratis Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/template-footer-html-gratis/ Mon, 06 Apr 2026 13:33:58 +0000 id hourly 1 https://wordpress.org/?v=7.0.1 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png template footer HTML gratis Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/template-footer-html-gratis/ 32 32 5 Template Footer Website Profesional Gratis & Siap Digunakan https://farhanhidayat.com/template-footer-website/ https://farhanhidayat.com/template-footer-website/#respond Mon, 06 Apr 2026 13:33:58 +0000 https://farhanhidayat.com/?p=2392 Footer sering dianggap bagian kecil dalam sebuah website. Padahal, kalau kamu perhatikan, bagian ini justru bisa menentukan kesan akhir dari tampilan web secara keseluruhan. Nah, kalau kamu ingin punya tampilan yang lebih profesional tanpa ribet, menggunakan template footer website bisa jadi solusi paling praktis. Di artikel ini, kita akan bahas kenapa footer itu penting, contoh […]

Artikel 5 Template Footer Website Profesional Gratis & Siap Digunakan pertama kali tampil pada Farhanhidayat.com.

]]> Footer sering dianggap bagian kecil dalam sebuah website. Padahal, kalau kamu perhatikan, bagian ini justru bisa menentukan kesan akhir dari tampilan web secara keseluruhan. Nah, kalau kamu ingin punya tampilan yang lebih profesional tanpa ribet, menggunakan template footer website bisa jadi solusi paling praktis.

Di artikel ini, kita akan bahas kenapa footer itu penting, contoh template yang bisa langsung dipakai, sampai tips biar hasilnya makin maksimal.

Pertama, footer berfungsi sebagai navigasi tambahan. Biasanya, user yang sudah scroll sampai bawah butuh akses cepat ke halaman lain seperti kontak, tentang, atau layanan. Jadi, footer bisa bantu mereka tetap “nyambung” dengan website kamu.

Selain itu, footer juga berperan dalam membangun kesan profesional. Website yang punya footer rapi akan terlihat lebih lengkap dan terpercaya. Bahkan, banyak website bisnis menggunakan footer untuk menampilkan informasi penting seperti alamat, email, dan sosial media.

Sebelum pilih template, ada beberapa hal yang perlu kamu perhatikan. Pertama, desainnya harus simple tapi tetap modern. Jangan terlalu ramai, karena justru bisa bikin user bingung.

Selanjutnya, pastikan footer sudah responsive. Artinya, tampilannya tetap rapi baik di desktop maupun mobile. Ini penting, apalagi sekarang mayoritas user datang dari smartphone.

Terakhir, pilih template yang mudah di-custom. Biasanya, footer HTML CSS jadi pilihan terbaik karena fleksibel dan gampang diedit sesuai kebutuhan.

Sekarang masuk ke bagian yang paling ditunggu. Berikut beberapa contoh template footer website yang bisa langsung kamu gunakan:

Template ini cocok untuk blog atau portfolio. Desainnya sederhana, biasanya hanya berisi logo, menu, dan copyright. Walaupun simple, tampilannya tetap elegan.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Minimalis</title>

<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.footer {
    background: #f5f5f5;
    padding: 40px 20px 20px;
    color: #333;
}

.footer-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

.footer p,
.footer a {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
}

.footer a:hover {
    color: #007bff;
}

.footer input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.footer button {
    padding: 10px 15px;
    border: none;
    background: #4a6cf7;
    color: white;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

.footer button:hover {
    background: #3b5be0;
}

.footer-bottom {
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #777;
}
</style>
</head>

<body>

<footer class="footer">
    <div class="footer-container">

        <!-- Contact -->
        <div>
            <h3>Get in Touch</h3>
            <p>📞 +62 812 3456 7890</p>
            <p>📍 Jakarta, Indonesia</p>
            <p>✉️ email@website.com</p>
        </div>

        <!-- Links -->
        <div>
            <h3>Quick Links</h3>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </div>

        <!-- Subscribe -->
        <div>
            <h3>Contact Us</h3>
            <div style="display: flex;">
                <input type="email" placeholder="Your email">
                <button>Subscribe</button>
            </div>
        </div>

    </div>

    <div class="footer-bottom">
        © 2024 YourSite. All Rights Reserved
    </div>
</footer>

</body>
</html>

Kalau kamu fokus ke personal branding, template ini cocok banget. Biasanya dilengkapi icon sosial media seperti Instagram, LinkedIn, atau Twitter, jadi lebih interaktif.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Social Media</title>

<!-- Font Awesome (Icon) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
}

.footer {
    background: #f8f9fb;
    padding: 50px 20px 20px;
    color: #333;
}

.footer-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.footer h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

.footer p,
.footer a {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
}

.footer a:hover {
    color: #4a6cf7;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.social-icons a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    transition: 0.3s ease;
}

/* Individual colors */
.facebook { background: #3b5998; }
.twitter { background: #1da1f2; }
.youtube { background: #ff0000; }
.linkedin { background: #0077b5; }

/* Hover effect */
.social-icons a:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

/* Footer bottom */
.footer-bottom {
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #777;
}

/* Responsive tweak */
@media(max-width: 600px){
    .footer {
        text-align: center;
    }
    .social-icons {
        justify-content: center;
    }
}
</style>
</head>

<body>

<footer class="footer">
    <div class="footer-container">

        <!-- About -->
        <div>
            <h3>About Us</h3>
            <p>Kami menyediakan solusi website modern, cepat, dan profesional untuk kebutuhan digital kamu.</p>
        </div>

        <!-- Services -->
        <div>
            <h3>Services</h3>
            <a href="#">Web Design</a>
            <a href="#">Development</a>
            <a href="#">SEO Optimization</a>
        </div>

        <!-- Quick Links -->
        <div>
            <h3>Quick Links</h3>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>

        <!-- Social -->
        <div>
            <h3>Follow Us</h3>
            <div class="social-icons">
                <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
                <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

    </div>

    <div class="footer-bottom">
        © 2024 YourSite. All Rights Reserved
    </div>
</footer>

</body>
</html>

Untuk website bisnis atau landing page, template ini sangat efektif. User bisa langsung subscribe email, sehingga kamu bisa bangun audience dengan lebih mudah.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Dark Modern</title>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #111;
}

/* FOOTER */
.footer {
  background: linear-gradient(135deg, #1a1a1a, #0f172a);
  color: #ddd;
  padding: 50px 8%;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

/* TITLE */
.footer h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 18px;
}

/* LINKS */
.footer ul {
  list-style: none;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li a {
  text-decoration: none;
  color: #aaa;
  transition: 0.3s;
}

.footer ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* FOLLOW CHECKBOX */
.follow label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.follow input {
  margin-right: 10px;
  accent-color: #4f46e5;
}

/* NEWSLETTER */
.newsletter input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  margin-bottom: 10px;
  outline: none;
  background: #1f2937;
  color: #fff;
}

.newsletter button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.newsletter button:hover {
  background: #4338ca;
}

/* FOOTER BOTTOM */
.footer-bottom {
  border-top: 1px solid #333;
  margin-top: 40px;
  padding-top: 15px;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}

.footer-bottom span {
  color: #4f46e5;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .footer {
    padding: 40px 5%;
  }
}
</style>
</head>

<body>

<footer class="footer">
  <div class="footer-container">

    <!-- COLUMN 1 -->
    <div>
      <h3>Explore</h3>
      <ul>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Free Tools</a></li>
      </ul>
    </div>

    <!-- COLUMN 2 -->
    <div>
      <h3>Resources</h3>
      <ul>
        <li><a href="#">Learning Hub</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Templates</a></li>
      </ul>
    </div>

    <!-- COLUMN 3 -->
    <div class="follow">
      <h3>Follow Us</h3>
      <label><input type="checkbox"> Follow Updates</label>
      <label><input type="checkbox"> Join Newsletter</label>
    </div>

    <!-- COLUMN 4 -->
    <div class="newsletter">
      <h3>Newsletter</h3>
      <input type="email" placeholder="Enter your email">
      <button>Subscribe</button>
    </div>

  </div>

  <!-- BOTTOM -->
  <div class="footer-bottom">
    © 2024 <span>YourBrand</span> • Designed with ❤️
  </div>
</footer>

</body>
</html>

Template ini sering dipakai website perusahaan. Isinya lebih lengkap, seperti about, layanan, kontak, dan link penting lainnya. Jadi, terlihat lebih profesional dan terstruktur.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Multi Kolom</title>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #0f172a;
}

/* FOOTER */
.footer {
  background: linear-gradient(135deg, #0f172a, #020617);
  color: #ccc;
  padding: 60px 8%;
}

/* GRID */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}

/* TITLE */
.footer h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 18px;
}

/* TEXT */
.footer p {
  font-size: 14px;
  margin-bottom: 8px;
  color: #aaa;
}

/* LINKS */
.footer ul {
  list-style: none;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li a {
  text-decoration: none;
  color: #aaa;
  transition: 0.3s;
}

.footer ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* NEWSLETTER BOX */
.newsletter-box {
  background: rgba(255,255,255,0.05);
  padding: 15px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.newsletter-box input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  margin: 10px 0;
  background: #020617;
  color: #fff;
  outline: none;
}

.newsletter-box button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.newsletter-box button:hover {
  background: #16a34a;
}

/* PAYMENT ICON */
.payment {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.payment div {
  width: 50px;
  height: 30px;
  background: #1e293b;
  border-radius: 6px;
}

/* FOOTER BOTTOM */
.footer-bottom {
  border-top: 1px solid #1e293b;
  margin-top: 40px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  color: #888;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
</style>
</head>

<body>

<footer class="footer">
  <div class="footer-container">

    <!-- CONTACT -->
    <div>
      <h3>Contact Us</h3>
      <p>Email: support@yoursite.com</p>
      <p>Phone: +62 812 3456 7890</p>
      <p>Address: Jakarta, Indonesia</p>
    </div>

    <!-- LINKS -->
    <div>
      <h3>Useful Links</h3>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- NEWSLETTER -->
    <div>
      <h3>Stay Updated</h3>
      <div class="newsletter-box">
        <p>Subscribe untuk dapat info terbaru & update menarik.</p>
        <input type="email" placeholder="Masukkan email kamu">
        <button>Subscribe</button>
      </div>
    </div>

  </div>

  <!-- BOTTOM -->
  <div class="footer-bottom">
    <span>© 2024 Company Name</span>

     <div class="payment">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
  </div>
  </div>
</footer>

</body>
</html>

template footer website

Terakhir, ada pilihan footer dengan tampilan dark mode yang lagi populer. Selain memberikan kesan modern, desain ini juga terasa lebih nyaman di mata, terutama untuk website dengan gaya minimalis dan kekinian.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Dark Modern</title>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #020617;
}

/* FOOTER */
.footer {
  background: linear-gradient(135deg, #020617, #0f172a);
  color: #cbd5f5;
  padding: 60px 8%;
}

/* GRID */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

/* TITLE */
.footer h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 18px;
}

/* TEXT */
.footer p {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* LINKS */
.footer ul {
  list-style: none;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li a {
  text-decoration: none;
  color: #94a3b8;
  transition: 0.3s;
}

.footer ul li a:hover {
  color: #38bdf8;
  padding-left: 5px;
}

/* SOCIAL */
.social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  border-radius: 8px;
  text-decoration: none;
  color: #cbd5f5;
  transition: 0.3s;
}

.social a:hover {
  background: #38bdf8;
  color: #020617;
}

/* NEWSLETTER */
.newsletter {
  margin-top: 10px;
}

.newsletter input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  margin-bottom: 10px;
  background: #0f172a;
  color: #fff;
  outline: none;
}

.newsletter button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: #38bdf8;
  color: #020617;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.newsletter button:hover {
  background: #0ea5e9;
}

/* FOOTER BOTTOM */
.footer-bottom {
  border-top: 1px solid #1e293b;
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

/* PAYMENT */
.payment-title {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.payment {
  display: flex;
  gap: 10px;
}

.payment div {
  width: 50px;
  height: 30px;
  background: #0f172a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
  transition: 0.3s;
}

.payment div:hover {
  background: #38bdf8;
  color: #020617;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}
</style>
</head>

<body>

<footer class="footer">
  <div class="footer-container">

    <!-- ABOUT -->
    <div>
      <h3>About Us</h3>
      <p>Kami membantu kamu membangun website modern dengan mudah dan cepat.</p>
      <div class="social">
        <a href="#">F</a>
        <a href="#">T</a>
        <a href="#">I</a>
        <a href="#">L</a>
      </div>
    </div>

    <!-- LINKS -->
    <div>
      <h3>Quick Links</h3>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- SERVICES -->
    <div>
      <h3>Services</h3>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">UI/UX</a></li>
      </ul>
    </div>

    <!-- NEWSLETTER -->
    <div>
      <h3>Newsletter</h3>
      <p>Dapatkan update terbaru langsung ke email kamu.</p>
      <div class="newsletter">
        <input type="email" placeholder="Masukkan email kamu">
        <button>Subscribe</button>
      </div>
    </div>

  </div>

  <!-- BOTTOM -->
  <div class="footer-bottom">
    <span>© 2024 YourBrand. All rights reserved.</span>

    <div>
      <p class="payment-title">Payment</p>
      <div class="payment">
        <div>BCA</div>
        <div>VISA</div>
        <div>BRI</div>
        <div>BNI</div>
      </div>
    </div>
  </div>
</footer>

</body>
</html>

Setelah pilih template, langkah berikutnya cukup simpel. Pertama, kamu tinggal copy paste kode HTML CSS ke dalam project website kamu.

Setelah itu, kamu bisa langsung menyesuaikan isi footer. Ganti logo, teks, dan link sesuai kebutuhan. Dengan begitu, footer akan terasa lebih personal dan sesuai branding.

Terakhir, jangan lupa cek tampilannya di berbagai device. Pastikan semuanya tetap rapi, baik di desktop maupun mobile.

Walaupun terlihat mudah, masih banyak yang melakukan kesalahan. Misalnya, terlalu banyak memasukkan informasi sehingga footer jadi penuh dan tidak nyaman dilihat.

Selain itu, desain yang tidak konsisten dengan bagian lain juga sering terjadi. Akibatnya, website terlihat kurang profesional. Ditambah lagi, banyak yang lupa memastikan footer responsive, padahal ini sangat penting.

Supaya hasilnya maksimal, ada beberapa tips yang bisa kamu terapkan. Pertama, gunakan warna yang konsisten dengan brand website kamu. Ini akan membuat tampilan lebih harmonis.

Selain itu, tambahkan icon untuk memperkuat visual. Misalnya icon sosial media atau kontak. Dengan begitu, footer jadi lebih menarik.

Terakhir, jangan lupa tambahkan CTA (Call To Action). Contohnya seperti tombol subscribe atau kontak. Dengan cara ini, footer tidak hanya informatif, tapi juga bisa meningkatkan interaksi user.

Kesimpulan

Menggunakan template footer website adalah cara cepat untuk meningkatkan tampilan website tanpa harus mulai dari nol. Dengan memilih desain yang tepat, kamu bisa membuat website terlihat lebih profesional, rapi, dan fungsional.

Jadi, daripada bikin dari awal yang butuh waktu, lebih baik manfaatkan template yang sudah tersedia. Tinggal pakai, edit sedikit, dan website kamu langsung naik level.

Kalau kamu ingin memperdalam pemahaman tentang struktur layout atau desain warna, kamu bisa cek referensi berikut:

MDN Web Docs untuk layout CSS
W3Schools untuk dasar HTML footer
Canva untuk inspirasi warna desain

Buat artikel SEO-friendly dengan gaya santai dan hasil cepat. Plus, temukan tema WordPress terbaik untuk websitemu!

ArtikelPro

Artikel 5 Template Footer Website Profesional Gratis & Siap Digunakan pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/template-footer-website/feed/ 0