Cara Membuat Widget 3 Kolom Di Footer Blog

footer yang ane maksud seperti pada gambar di atas.

Bagi anda yang ingin memasang widget footer tersebeut berikut langkah-langkahnya, oo iyaa jangan lupa backup dulu template blognya untuk menjaga jaga bila terjadi kesalahan.. hehehehe (^^,)

1. login ke blog anda.
2. pergi ke EDIT HTML
3. Cari code yang mirip dengan code berikut :

#footer-wrapper {
....
....
.... } 

4. Kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini :

/* FOOTER */
#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:none;
border:none;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMtA-ovJVge2OpY1d0QLM84FvUlwngt3DMmr2FrcznJmyz7A1JlHiP2couMP9fOaki_qA7vdFv2zgWPt-A1t2ZN8-8jw-7vWXcrY7em-ctVuvag26eFRhamzTHttloQYrqR9IVHfhbOMQ/s1600/widgettitle-bg.png) left top no-repeat;background-size:300px 36px;margin:0 0 10px 0;padding:10px 0 10px 12px;color:#787878;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}

#footer1 {width:300px;float:left;background:transparent; padding: 5px;border: 0px solid #cccccc;}
#footer2 {width:300px;float:left;background:transparent; padding: 5px;border: 0px solid #cccccc;}
#footer3 {width:300px;float:left;background:transparent; padding: 5px; border: 0px solid #cccccc;}

/* Fotter 4-5 kolom tambahkan code css style disini */

#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}

/* Fotter 4-5 kolom tambahkan code css disini */

#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}

/* end Footer style, Ardianta Developedkiddie footer style */

5. Kemudian cari kode yang mirip dengan kode diwah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

 

7. Setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini :

<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>

<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

/* Fotter 4-5 kolom tambahkan code html disini */

</div>
<div style='clear:both;'/>
</div>
<!-- end footer-wrapper -->

8. Simpan template, dan lihat hasilnya.

OOoo iyaa.. untuk menambahkan jumlah kolom menjadi 4 atau 5, caranya tinggal menambahkan kode berikut:

code css style :

#footerNOMOR URUT {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;} code css :

#footerNOMOR URUT .widget-content {margin:0 .5em 0 ;} code html :

<b:section class='footer' id='footerNOMOR URUT' preferred='yes'>
</b:section>ganti tulisan NOMOR URUT dengan urutan nomornya, dan rubah width/lebar kolom tersebut 

agar cocok dengan template Anda.

Note :
Agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan. kode CSS yang ada di tutorial ini adalah kode CSS yang ada di blog ane.. (^^,)