Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger

Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger
Cara Menambah Widget Footer
Assalamu’alaikum Warahmatullahi Wabarakaatuh

mastagul.com - Bagi seorang Blogger Sobat pasti sudah tidak asing dengan kata-kata Widget  Footer. Kali ini mastagul.com 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 binggung, karena sobat bisa menambahkan Widget Footer sesuai dengan keinginan Sobat. Caranya juga sangat mudah, saya yakin sobat bisa mempraktekkanya.

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


Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger

Langkah 1:
Silahkan Sobat Login ke Blog Sobat, dan masuk ke Dashboard Blogger.

Langkah 2:
Pilih Tema / Template kemudian pilih Edite HTML. Setelah masuk ke Menu HTML silahkan klik dan tekan CTRL F secara bersamaan. Kemudian kode  ]]></b:skin>

Langkah 3:
Jika Kode di Langkah 3 sudah ketemu, silahkan Sobat ambil kode dibawah ini dan letakkan diatas kode ]]></b:skin>
 
<!-- Awal Widget Footer Menjadi 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;
}
<!-- Akhir Widget Footer Menjadi 4 Kolom -->
 

Langkah 4:
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).

Langkah 5:
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.

Langkah 6:
Silahkan simpan Tema / Template Sobat.

Langkah 7:
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.

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

Semoga tutorial ini bisa bermanfaat buat Sobat blogger semuanya, jika menurut sobat blogger artikel ini bisa membatu silahkan Share dan tingalkan komentar jika ada yang kurang jelas.

Terimakasih.
Assalamu’alaikum Warahmatullahi Wabarakaatuh.






Tutorial Blog


Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Menambah Widget Footer Menjadi 4 Kolom di Blogger"

Posting Komentar

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar bersifat iklan, spam, titip link Semua akan dihapus oleh admin

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel