-->

Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blogger

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).

Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blog

Selain itu widget footer ini berfungsi sebagai menu navigasi untuk memudahkan pengunjung dalam mencari informasi atapupun tutorial dalam blog anda sendiri.
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.
    Cara Mudah Membuat Widget Footer Responsive 4 Kolom di Blog
  • 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.

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.

Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 4 )
    Tutup Komentar

    4 Komentar

    1. Mantul tutor nya, lengkap ... Sangat membantu..

      BalasHapus
    2. oke siap gan, terima kasih sudah berkunjung :)

      BalasHapus
    3. Tutor buat syantax highlighter dong seperti blog ente

      BalasHapus
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!