cara membagi footer menjadi tiga kolom

Sobat blogger merasa sudah punya template yang mantap tapi memiliki footer standar yang kurang sesuai kebutuhan? Footer tiga kolom bisa jadi solusi yang sobat blogger cari. Footer tiga kolom memang cukup bermanfaat jika template yang sobat pakai minim kolom, sidebar dan tidak easy navigate. Coba sobat perhatikan widget footer tiga kolom dibawah ini :

Nah, kira- kira inilah footer tiga kolom yang saya maksud. Meski tidak semua template memiliki bawaan footer seperti ini, ternyata membagi footer menjadi tiga kolom bukan hal yang sulit untuk dilakukan. Bagaimana jika saya ingin membuat 4 atau 5 kolom? Tentu saja sobat bisa memodifikasi sendiri langkah- langkah yang akan saya berikan.

Persiapan :

·         Pastikan sobat mengetahui akan membagi footer sobat menjadi berapa bagian, 3, 4 atau 5 kolom.

·         Cek lebar awal footer, sehingga ketika membagi footer ke beberapa kolom, maka lebarnya sesuai dan tidak terlihat lucu.

·         Cek warna untuk memastikan warna apa yang ingin sobat sesuaikan sebagai background footer. Untuk cek warna, silakan cek di kode warna ini.

Langkah- langkah membuat footer menjadi 3,4 atau 5 kolom :

1.       Login ke akun blogger sobat

2.       Pilih Tata Letak > Edit HTML > Centang Expand Template Widget ( Jika perlu back up template terlebih dahulu )

3.       Cari kode sebagai berikut atau jika tidak ada yang sama persis, pakai kode yang mirip dengan kode ini :

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

4.       Hapus kode tersebut dan ganti kode di atas dengan kode berikut 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;}

5.       Cari kode yang persis atau hamper mirip dengan kode di bawah ini :

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

6.       Ganti kode tersebut dengan kode 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 -->

7.       Simpan template!

Kode- kodenya sih memang agak panjang, tapi step- step yang Tutorial Blog Pemula jelaskan lumayan bikin ngeh kan, sobat?? –harus jawab iya ya! ;p. Catatan tambahan, khusus sobat yang ingin membuat 4-5 kolom, maka sobat perlu menambahkan beberapa kode pada kode footer ( saya beri warna hijau di kode diatas ) :

code css style :

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

code css :

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

code html :

<b:section class='footer' id='footerNOMOR URUT FOOTER' preferred='yes'>
</b:section>