Cara Membuat Footer Multi Kolom

Setelah kemarin kita belajar seo dalam postingan kita sebelumnya, maka kali ini saya akan mengajak sobat untuk kembali mengutak-atik template blog sobat supaya lebih kelihatan profesional. Tutorial yang akan saya sajikan kali ini adalah bagaimana cara membuat footer multi kolom seperti pada blog doodey ini.

Apa itu footer multi kolom? Jika sobat melihat bagian bawah dari blog doodey ini, maka sobat akan melihat footer blog (kaki blog) yang terdiri dari multi (banyak) kolom. Nah, tertarik untuk membuat yang sama? Berikut tutorialnya.

1.      Silakan sobat tuju ke bagian Edit HTML, lalu tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {

background: #444 url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/s1600/buttommenu-c.png) no-repeat;

width: 900px;

position: relative;

clear: both;

float: center;

color: #fff;

margin: 0 auto;

}

.footer-column {

padding: 10px;

}

2.      Setelah itu, cari kode di bawah ini :

<div id='footer-wrapper'>

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

</div>

atau

<div id='footer'>

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

</div>

3.      Tambahkan kode berikut di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut di bawah <div id='footer'>

Untuk pilihan berapa kolom yang akan sobat gunakan, berikut adalah pilihan jumlah kolomnya :

Jika ingin membuat footer 2 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer 3 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer menjadi 4 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

4.      Jika sudah, klik Save template. Kalau sudah berhasil, maka hasilnya akan menjadi seperti ini :

Footer 2 kolom

Footer 3 kolom

Footer 4 kolom

Nah, jika sobat sudah berhasil mempraktekkan tutorial cara membuat footer multi kolom ini, maka hasilnya bisa kurang lebih seperti tampilan footer multi kolom blog doodey ini. :D Selamat mencoba..