Cara Menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom Diatas Footer

Cara Menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom Diatas Footer - Istilah menambah gadget baru/elemen kolom di atas footer blogspot lebih dari 1 kolom lebih kerennya dengan nama membuat multi kolom di footer. Untuk cara meletakkan penambahan kolom baru yang berada diatas footer blog ini tidaklah sulit, namun tidak semua template blog terpasang footer. Kadang dengan sengaja si pembuat template tidak mencantumkan bagian elemen footer blog. Sekarang ke topik pembahasan bagaimana cara membagi footer menjadi multi kolom, seperti membagi footer menjadi 2 kolom, 3 kolom atau 4 kolom. Kalau membuat 4 kolom di footer blog, lebih bagusnya kalau mempunyai ukuran blog yang lebar. Terlebih dahulu simak postingan mengenai cara menambah 1 kolom, 2 kolom, 3 kolom dibawah header blog.

Cara Membuat Multi Kolom di Footer Blogspot

1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Backup template (Download Full Template)
4. Tekan F3, cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

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

5. Selanjutnya cari kode seperti dibawah ini

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

atau bisa juga cari kode seperti dibawah ini

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

6. Letakkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Apabila tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan aja kode berikut dibawah <div id='footer'>

Menambah 2 Kolom Diatas Footer

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

Hasilnya dari menambah 2 kolom di footer seperti gambar dibawah ini

Menambah 3 Kolom Diatas Footer

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; 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: 33%; 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: 33%; 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>

Hasilnya dari menambah 3 kolom di footer seperti gambar dibawah ini

Menambah 4 Kolom Diatas Footer

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

Hasilnya dari menambah 4 kolom di footer seperti gambar dibawah ini