Buat Footer Multi Kolom

Kadang kala pada template yang kita pakai ada bagian-bagian yang kita senangi ada pula yang tidak, contoh yang saya alami saat ganti template ternyata tidak ada kolom dibagian footernya., padahal sudah terlanjur senang pada template itu , akhirnya terpaksa deh  kolom footernya ditambahkan sendiri  secaramanual , itulah latar belakang kenapa saya posting tentang cara Buat Footer Multi Kolom ini, disamping sebagai arsip pribadi , siapa tahu nanti akan utak-atik bagian footer lagi, kan dah ada disini seperti postingan yang dulu tentang Cara Membuat Kolom Tambah Gadget di Bawah Header ,  atau siapa tahu ada sobat yang memerlukannya .

Langsung saja ke langkah-langkah Buat Footer Multi Kolom itu kira-kira seperti ini :

1. Masuk dulu ke Dashboard atau ke blogger.com
2. Terus pilih Layout  dan  Edit HTML
3. Sebelum lanjut klik dulu deh Download Full Template sebagai backup siapa tahu nanti malah amburadul.
4. Kalau sudah, cari kode ]]></b:skin>
5. Diatas kode no. 4 tadi (]]></b:skin> ) , tamnahkanlah kode dibawah ini :

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

6. Sudah ditambahkan belum ??, jika sudah lanjutkan cari kode dibawah ini.

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

7. Jika dah ketemu , yo kita buat kolom2 dalam footer itu sesuai keinginan kita, caranya  hapus kode warna merah diatas, ganti dengan kode dibawah ini :

        Untuk footer 4 kolom, kodenya seperti ini :

   <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>

   Kalau mau yang 3 kolom,, ambil deh yang ini :

   <div id='footer-column-divide'>
   <div id='footer1' 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='footer2' 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='footer3' 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>

   Ah..  2 kolom footer aja silahkan copas yang ini :

   <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>

8. Jangan lupa Save Template jika dah ok ya..
9. Lihat hasilnya , biasanya sih… kalau orangnya baik dan tulus ,hasilnya langsung ok tuh,, kalau belum berhasil.. wah.. wah.. perlu tobat dulu deh.. hehe..

Selamat mencoba.. untuk Buat Footer Multi Kolom … semoga sukses.

Technorati Tags: Footer,gadget