Menambahkan 3 Kolom Footer

Maksudnya apa sih menambahkan 3 kolom footer??? Itu loh 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, sok atuh ikuti langkah-langkahnya :

1. Masuk ke Menu Rancangan
2. Masuk ke mode Edit HTML dan jangan lupa untuk mencentang Expand Widget Template
3. Back up terlebih dahulu template sobat dengan menyalin di notepad..
4. Cari kode seperti dibawah ini, tekan F3 untuk mempercepat pencarian:

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

5. Ganti kode yang berada pada baris kedua di atas, 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 di bawah ini di atas 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. Simple kan? Sekarang blog kamu pun jadi lebih canti. Selamat mencoba !!!Sukses.....

Jakarta, 16 Desember 2010