Mengobah Jumlah Kolom Pada Footer Blog

Apa itu footer multi kolom? Jika saudara melihat bagian bawah dari blog ini, maka kamu akan melihat footer blog (kaki blog) yang terdiri dari 3 (tiga) kolom. Nah, kolom ini dapat dibuat lebih banyak lagi, bahkan sesuai kebutuhan, tertarik untuk membuat yang sama? Berikut cara membuatnya.

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://tutorial-sauterico.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 kamu 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 kamu gunakan, berikut adalah pilihan jumlah kolomnya :
Jika ingin membuat footer 2 kolom, gunakan kode berikut :


Ini scriptnya:
<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 :



Ini scriptnya:
<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 :



Ini scriptnya :

<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. Lalu simpan

Selamat mencoba, semoga berhasil.