Membuat Widget 3 Kolom Di Footer Blog

Widget 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika Anda pengen meletakkan widget anda yang pasti footer ini akan sangat berguna, contohnya pada Widget 3 Kolom Di Footer Blog ini.

Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :

1. login ke blog anda.
2. Klik Tata Letak.
3. Edit Html.
4. Cari code yang mirip dengan code berikut :

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

5. 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: #0000FF;
border: 1px solid $bordercolor;
}
#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 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px 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;}

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

Update :

Karena banyak temen yang menanyakan gimana kalau buat 4-5 kolom, kita tinggal menambahkan kode :

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.