Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blogger

By Kurniawan Updated: 2020-09-20T10:55:14Z 4 ·

Daftar Isi [Tampilkan]

Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blogger - Hallo sahabat blogger, Widget Footer ini sudah banyak sekali di pakai dan di pasang di situs terkenal seperti detik.com, okezone.com dan situs terkenal lainnya. 

Widget footer ini  berfungsi untuk menampilkan link ataupun gambar. misalkan saja link internal dari blog itu sendiri seperti label, postingan populer, arsib blog, formulir kontak dan yang lainnya. sedangkan dari external itu sendiri seperti (author box ataupun link iklan).

Selain itu widget footer ini berfungsi sebagai menu navigasi untuk memudahkan pengunjung dalam mencari informasi atapupun tutorial dalam blog anda sendiri.

Baca Juga : Cara Membuat Widget Author Box keren pada Sidebar Blog

Tutorial ini juga saya buat karena ada seseorang yang request atau permintaan melalui kontak WA saya, agar di buatkan widget footer di dalam templatenya. oleh karerena itu pada kesempatan kali ini saya akan buat tutorial membuat widget footer dengan 4 kolom. oke kita langsung saja ke tutorialnya.

Berikut adalah Cara Membuat dan Memasang Widget Footer Responsive 4 Kolom di Blog :

• Masuk terlebih dahulu ke akun Blogger.com dan masuk menu dashboard.
• Pilih Tema atau Template > Edit HTML
• Silahkan anda cari kode ]]></b:skin> (gunakan tombol CTRL dan F untuk mencari kode tersebut)
• Jika sudah ketemu, silahkan anda copy script CSS di bawah ini dan letakan di atas kode tersebut.

/* FOOTER WIDGET 4 KOLOM */
#widget-footer-container {
 background: #000 url(https://3.bp.blogspot.com/-jlcKIZCfrDQ/WtzDK-6gopI/AAAAAAAABbM/G_i_u9ObEzUORoYivnCX0RJ-j3_AY3aNwCLcBGAs/s320/footer-arik.png);
 padding: 0 30px;
 overflow: hidden;
 line-height: 1.6em;
}
#widget-footer-wrapper {
 margin: 0 auto;
 max-width: 1000px;
 color: #fff;
}
#widget-footer-wrapper .widget {
 margin: 40px 0;
}
#widget-footer-wrapper .widget a {
 color: #ddd;
}
#widget-footer-wrapper .widget a:hover {
 color: #2ec4f2;
}
#widget-footer-wrapper .widget ul, #widget-footer-wrapper .widget ol {
 list-style: none;
 margin: 0 0;
}
#widget-footer-wrapper .widget ul li:before, #widget-footer-wrapper .widget ol li:before {
    display:none;
}
#widget-footer-wrapper .widget ul li, #widget-footer-wrapper .widget ol li {
 font-size: 13px;
    font-weight: 500;
    border: 0;
 margin: 0.3em 0;
}
#widget-footer-wrapper h2 {
 font-size: 15px;
 font-weight: 500;
 text-transform: uppercase;
 margin-bottom: 20px;
}
#widget-footer1 {
 width: 26%;
 float: left;
 padding-right: 20px;
 box-sizing: border-box;
}
#widget-footer2 {
 width: 26%;
 float: left;
}
#widget-footer3 {
 width: 26%;
 float: left;
 box-sizing: border-box;
}
#widget-footer4 {
 width: 22%;
 float: right;
 padding-left: 35px;
 box-sizing: border-box;
}

• Setelah itu anda cari kode seperti ini dan hapus kode tersebut (disini saya menggunakan template viomagz, jika anda memakai template lain, silahkan sesuaikan kode footer yang harus di hapus).

<div id='footer-widget-container'>
<b:section class='footer-widget' id='footer-widget' maxwidgets='1' showaddelement='yes'/>
</div>

<!-- footer nav menu -->
<div id='footer-navmenu'>
<nav id='footer-navmenu-container'>

<!-- menu navigasi footer start -->
<ul>
<li><a href='serieswans.com'>About</a></li>
<li><a href='serieswans.com'>Contact</a></li>
<li><a href='serieswan.com'>Privacy Policy</a></li>
<li><a href='serieswans.com'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

</nav>
</div>
<!-- footer nav menu end -->

• Setelah di hapus, selanjutnya anda copy script HTML di bawah ini dan letakan di atas kode <div id='footer-container'> atau tempat anda menghapus kode di atas.

<!-- footer widget 4 kolom -->
  <aside id='widget-footer-container'>
    <div id='widget-footer-wrapper'>
    <b:section class='widget-footer' id='widget-footer1' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer2' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer3' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer4' preferred='yes'/>
    </div>
  </aside>
  <div class='clear'/>
  <!-- footer widget 4 kolom -->

• Selanjutnya Simpan Tema atau Template.
• Setelah itu pergi ke Dashboard atau Menu Blog > Tata Letak , lalu scroll ke paling bawah. nah disana anda tinggal menambahkan widget footer pada 4 kolom yang tersedia. ntah itu label, arsip blog ataupun yang lainnya. contohnya bisa anda lihat gambar di bawah ini.
  
• Terakhir Simpan.

Jika anda hanya ingin membuat 2 atau 3 kolom saja, anda tinggal menghapus kode berikut
<b:section class='widget-footer' id='widget-footer4' preferred='yes'/>
Untuk gambar backgroundnya juga bisa anda ganti atau bisa anda rubah menjadi warna gradient, silahkan anda lihat di artikel cara membuat animasi gradient color di blogger.

Baca Juga : Cara Memasang Tombol Load More Ringan di Blogger

Nah, mungkin itu saja tutorial kali ini mengenai Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blogger. jika anda mempunyai pertanyaan, silahkan berkomentar di bawah. jangan lupa share juga ke teman-teman dan media sosial anda. semoga bermanfaat.

SHARE Facebook Whatsapp