Tutorial membuat 3 Kolom Footer

Fera

10 Mei 2012

Beberapa template baik bawaan Blogger atau template jadi tidak dilengkapi dengan kolom widget pada footer atau bagian bawah dari templatenya, Apakah ada masalah jika tidak memiliki kolom widget footer? tentu tidak tapi ruang kosong pada blog akan semakin banyak padahal kita bisa mengunakannya dan dimaksimalkan untuk keberluan lain seberti untuk sebagai space banner dan lain-lain

Selain itu tentu jika tidak terdapat kolom widget footer pada blog akan membatasi seorang admin blog dalam membuat blognya tampak padaat dan menarik. Solusinya kita bisa menambah kolom widget ini sendiri kedalam template, caranya :

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 ini tepat 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. Setelah semuanya dilakuakan Simpan template Anda dan lihat hasialnya. Semoga Sukses

Tag : artikel TI, belajar IT, blogspot, footer, html, Tips IT, web, widget