Membuat Footer Multi Kolom

Sebuah blog yang memang dibuat untuk memuat banyak berita sudah barang tentu lebih banyak memerlukan  kolom khusus untuk widget yang ingin ditampilkan. Jika template yang Anda gunakan memang sudah tersedia multiple kolom mungkin tidak perlu lagi untuk menambahkan kolom baru. Salah satu area pada template yang sering digunakan untuk menempatkan widget adalah bagian footer. Saat ini sudah banyak template yang menyediakan fasilitas multi kolom di bagian footer.

Tapi jika template yang anda gunakan belum ada fasilitas ini, saya akan coba berikan solusinya atau cara membuat  bagian footer template Anda  menjadi multi kolom. Maksud dari multi kolom disini adalah membagi kolom footer menjadi 2 kolom, 3 kolom atau 4 kolom, bisa disesuaikan dengan kebutuhan kolom yang Anda inginkan.  Baiklah, buat teman-teman yang ingin memperbanyak ruang kolom pada bagian footer template, langsug saja pada langkah-langkah pembuatannya :

1. Langkah pertama, Anda mesti login dulu ke Blogger
2. Kemudian klik Design
3. Backup template dengan klik pada Download Full Template agar bisa mengembalikan template ke kondisi semula jika hasilnya tidak memuaskan.
4. Kalau sudah, cari kode ]]></b:skin> 
5. Tambahkan kode di bawah ini diatas kode ]]></b:skin>
#footer-column-divide { clear:both; } .footer-column { padding: 10px; }

6. Kemudian 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>
7. Langkah selanjutnya tambahkan kode berikut dibawah kode atau
   Catatan: Jika pada template yang Anda gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>


Jika Anda menginginkan membagi footer menjadi 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>  

 Membagi footer menjadi 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>  

Membagi 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>
1. Terakhir Save Templet

Semoga Bermanfaat

sumber : Maskolis.com