Tutorial ini sudah seringkali saya coba dan alhamdulillah sukses.
Berikut ini cara membuat Multi Kolom/penambahan kolom di Footer Blogspot anda:
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 diatas kode tadi:
#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 ini dibawah kode diatas tadi:
<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 kode tadi:
<div id='footer'>
Kode untuk 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
Kode untuk 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 pada gambar dibawah ini:
Kode untuk 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>
Hasil dari menambah 4 kolom di footer seperti gambar dibawah ini:
Demikian tadi cara mudah menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom diatas Footer.
Semoga bermanfaat,
Thanks to: Agan Blogger
