Cara Membuat Footer 3 Kolom

Beberapa Template Yang Anda Download, Tidak Semuanya Menyediakan Kolom Footer. Dan Fungsi Footer Cukup Banyak.. Nah, kali Ini saya akan Memposting Cara Membuat Footer dengan Jumlah Kolom 3.

1.  Masuk pada akun blogger Anda
2. Pilih Rancangan >> Edit HTML
3. Untuk berjaga-jaga Download Template Lengkap Terlebih Dahulu
4. Centang Expand Template Widget
5. Cari :
   

   ]]></b:skin>

6. Copy kode berikut dan tempatkan tepat diatas kode ]]></b:skin>
   

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

7. Cari kode berikut yang sama atau hampir sama dengan kode berikut :
   Pencarian 1 :
   

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

   Jika tidak ketemu ganti pencarian menjadi :
   Pencarian 2 :
   

   <!-- end outer-wrapper -->

   atau pencarian 3 :
   

   <div id='footer'>

8. Jika yang kode pencarian yang ada pada blog :
   • Jika yang Anda temukan adalah kode Pencarian 1 maka :
     Ganti kode <b:section class='footer' id='footer'/> dengan kode dibawah ini.
   • Jika pencarian 2 atau 3 yang Anda temukan tempatkan kode dibawah initepat diatas kode tersebut.

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

9. Lalu Simpan. Dan Lihat Hasilnya.

Selamat Mencoba & Happy Blogging.


Sumber : http://www.katakan-hey.com