Membuat Footer Multi Kolom

Footer multi kolom sudah lama saya gunakan di blog ini. Untuk membuat footer multi kolom kita hanya dituntut untuk cermat untuk melihat kode html di paling bawah pada menu edit html, agar tidak bingung ikuti langkah-langkah berikut :

• Masuk ke blogger

• Klik Tata Letak

• Klik tab Edit Html

• Lalu cari kode seperti ini
  
  
  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'/>
  </div>
  
  
• Tapi ada juga yang seperti ini, tapi prinsipnya sama
  
  <div id='footer-wrap1'><div id='footer-wrap2'>
  <b:section class='footer' id='footer'>
  <b:widget id='Text1' locked='false' title='' type='Text'/>
  </b:section>
  </div></div>
  
  
• Lalu ganti kode berwarna merah dengan kode seperti 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><!--kolom pertama-->
  
  <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><!--kolom kedua-->
  
  <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><!--kolom ketiga-->
  
  <div style='clear:both;'/>
  <p>
  <hr align='center' color='#5d5d54' width='90%'/></p><!--garis horisontal-->
  
  <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>
  
  

Sedikit tambahan bahwa kode merah dapat diganti dengan presentase sesuai kawan, tapi jangan sampai lebih dari 100%, kode merah adalah kode untuk mengganti lebar widget.

• Setelah itu, letakkan kode ini di atas kode  ]]></b:skin>
  
  #footer-column-container {
  clear:both;
  }
  
  .footer-column {
  padding: 10px;} 
• Lalu klik simpan

Jika kawan sudah berhasil, silahkan kawan cek pada tab elemen halaman, maka akan ada elemen seperti ini di bawah elemen post

Selamat mencoba..... 

Related Articles :