Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger

Cara Menambah Widget Footer

Cara menambah widget footer menjadi 4 kolom di blogger. Bagi seorang Blogger Sobat pasti sudah tidak asing dengan kata-kata Widget Footer.

Kali ini tagul ingin berbagi pengalaman bagaimana cara menambah menu Widget Footer menjadi 4 kolom di blogger.

Dengan memiliki Widget Footer yang banyak sobat bisa lebih leluasa untuk menambahkan elemen-elemen yang sobat butuhkan.

Jika sobat hanya mengandalkan dari bawaan templatenya, terkadang hanya tersedia satu Widget Footer.

Untuk mengatasi hal itu sobat tidak usah bingung, karena sobat bisa menambahkan Widget Footer sesuai dengan keinginan Sobat.

Caranya juga sangat mudah, saya yakin sobat bisa menambah widget footer sendiri dengan mudah.

Cara ini sudah pernah tagul coba di blog mastagul yang menggunakan template Viomagz dan berhasil tanpa ada kendala.

Sehingga bagi sobat pengguna template Viomagz dan widget footer masih menggunakan 4 kolom jika masih kurang bisa menggunakan cara di bawah yang sudah pernah tagul coba sendiri.

Jika ingin merubah widget footer di sarankan sobat harus cadangkan terlebih dahulu template yang sudah terpasang, sehingga jika terjadi masalah dalam proses menambah widget footer sobat masih memiliki template cadangan.

Terkadang tampilan widget footer memang terlihat tidak begitu penting bagi sebagian blogger, akan tetapi bagi blogger yang blognya sudah bisa di pasang iklan tentunya keberadaan widget footer sangat di butuhkan.

Bagi template yang hanya menggunakan 2 kolom widget footer tentunya akan sangat kekurangan ketika ingin memasang iklan yang banyak di blog.

Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger

Cara ini sudah saya terapkan di blog saya sendiri mastagul.com dan tidak mempengaruhi performa dari blog itu sendiri.

1. Login Blogger

Langkah pertama Silahkan Login ke Blogger dan masuk ke Dashboard Blogger.

1. Masuk Menu Edit HTML

Langkah ke dua Pilih Tema / Template kemudian pilih Edite HTML. Setelah masuk ke Menu HTML silahkan klik dengan di sertai menekan CTRL + F secara bersamaan. Kemudian cari kode ]]/b:skin

3. Cari Kode Script HTML

Langkah ke tiga Jika Kode di Langkah 3 sudah ketemu, silahkan ambil kode dibawah ini dan letakkan diatas kode ]]/b:skin

 
<!-- Awal Widget Footer Menjadi 4 Kolom -->
#widget-footer-container {
 background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEily9P9Os5Dqk-ZyHppsGBBsQyLXL_G-nqhGO0un1_M3JTX_Jg2UiE9KYQHZinZY-J4DYPQoYzQusC9DyZVq9JncKVyLPLxRqogO-i1zAaXpu3zII-9H5VNFoLviKxLXAkRS9O5YLujJWt1/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;
}
<!-- Akhir Widget Footer Menjadi 4 Kolom -->

4. Hapus Kode Script HTML

Langkah ke empat Silahkan sobat cari kode seperti dibawah ini

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

Jika sudah ketemu hapus kode tersebut. ( disini mastagul.com menggunakan template Viomagz. jika sobat menggunakan template lain selain Viomagz, silahkan sobat sesuaikan sendiri kode Footer mana yang akan di hapus).

5. Ganti Kode Script HTML

Langkah ke lima Silahkan Sobat cari kode div id='footer-container' . Setelah ketemu Sobat ambil kode di bawah ini dan letakkan di atasnya.

 
<!-- Awal Widget Footer Menjadi 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'/>
<!-- Akhir Widget Footer Menjadi 4 Kolom -->

NB:

Jika sobat tidak menemukan kode div id='footer-container' , sobat bisa meletakkan kode di atas di tempat bekas sobat menghapus kode di Langkah 4. Silahkan simpan Tema / Template Sobat.

6. Tampilan Dashboard Blogger

Langkah ke enam Kembali ke Dashboard Blogger sobat kemudian pilih Tata Letak / Layout kemudain scroll ke paling bawah, disitu sobat akan menemukan menu Tambahkan Gadget / Add Gadget sebanyak 4 baris. Disitu Sobat bebas menambahkan Widget Footer sesuai dengan keinginan Sobat.

NB:

Jika Sobat ingin membuat 1 atau 2 kolom atau lebih, Sobat cukup menghapus atau menambah kode di bawah pada Langkah 5.

b:section class='widget-footer' id='widget-footer1' preferred='yes'/

Itulah cara menambah widget footer menjadi 4 kolom di blogger yang bisa di coba, sehingga sobat bisa memasang menu-menu yang di inginkan sesuai dengan keinginan tanpa harus kekurangan widget footer.

Cek Berita dan Artikel yang lain di Google News