Membuat 3 Kolom Footer

Halloo sobat semuanya langsung aja dibawah ini adalah cara membuat footer 3 kolom . Artinya kita menambahkan 3 bagian untuk menambah gadget baru di bagian bawah BLOG kita. Dan waktu itu Footer Blog saya cuma 2 kolom dan saya rubah 3 kolom. Setelah saya browsing ternyata cara ya seperti dibawah ini. 

Tanpa basa basi lagi, sekarang kita ke langkah-langkah pembuatannya.

1. Masuk ke Menu Layout/Tata Letak
2. Masuk ke mode Edit HTML dan jangan lupa untuk mencentang Expand Widget Template
3. Back up terlebih dahulu template sobat untuk mengantisipasi terjadinya ERROR.
4. Cari kode seperti dibawah ini, tekan CTRL+F untuk mempercepat pencarian:

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

5. Ganti kode yang berada pada baris kedua diatas, yakni <b:section class='footer' id='footer'/> (Kode ini kadang-kadang beda...tergantung template blog) dengan kode dibawah 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>


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

Perhatikan kode yang berwarna merah width: 30% width:40% width: 30%, itu kalo di total berarti akan 100%, yakni lebar template sebelum dibagi-bagi. Jadi dengan kode tersebut, kita akan membagi 3 kolom tersebut dengan lebar kolom pertama 30%, lebar kolom kedua 40% dan lebar kolom ketiga 30%.

6. Cari kode </b:skin>
7. Letakkan kode dibawah ini diatas kode </b:skin>

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

8. Simpat template sobat dan liat hasilnya pada bagian Page Elemen. Sekarang template sobat sudah mempunyai 3 kolom footer tambahan.

Semoga bermanfaat... dan sekses buat anda.

9 out of 10 based on 10 ratings. 9 user reviews.