Membuat 3 Kolom Footer

Request ketiga dari sobat blogger gusi merah, gimana cara buat 3 kolom footer? Artinya kita menambahkan 3 bagian untuk menambah gadget baru di bagian bawah BLOG kita. Seperti yang telah kita ketahui bersama, gak semua template yang kita download sudah mempunyai fasilitas 3 kolom footer pada bagian page elemen BLOG kita. Karena rasa kurang puas tersebut, muncullah keinginan untuk menambahkan 3 kolom footer lagi pada bagian BLOG kita. Tanpa basa basi lagi, sekarang kita ke langkah-langkah pembuatannya.
1. Masuk ke Menu Layout/Tata Letak
2. Masuk ke mode Edit HTML dan jangan lupa untuk mencentang Expand Widget Template
3. Back up terlebih dahulu template sobat untuk mengantisipasi terjadinya ERROR.
4. Cari kode seperti dibawah ini, tekan CTRL+F untuk mempercepat pencarian:

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

5. Ganti kode yang berada pada baris kedua diatas, yakni <b:section class='footer' id='footer'/> dengan kode dibawah ini:

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

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; 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 id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

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

Perhatikan kode yang berwarna merah width: 30% width:40% width: 30%, itu kalo di total berarti akan 100%, yakni lebar template sebelum dibagi-bagi. Jadi dengan kode tersebut, kita akan membagi 3 kolom tersebut dengan lebar kolom pertama 30%, lebar kolom kedua 40% dan lebar kolom ketiga 30%.

6. Cari kode </b:skin>
7. Letakkan kode dibawah ini diatas kode </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

8. Simpat template sobat dan liat hasilnya pada bagian Page Elemen. Sekarang template sobat sudah mempunyai 3 kolom footer tambahan.

Hmm kayaknya PR-ku udah selesai sob, selamat mencoba ^_^