Cara membuat 3 kolom pada footer

Cara membuat footer pada blogger, tips membuat footer di blogger. Baiklah pada hari ini saya akan sharing cara membuat kolom footer blog di blogger dengan multi kolom yaitu 2, 3, atau 4 kolom. Problem tentang kolom footer blog ini sering sekali kita temukan di saat kita download template dari situs penyedia template atau dari default blogger sendiri dan disana tidak menyediakan widget pada footer untuk kita menempatkan elemen blog yang kita anggap pantas untuk di taruh di bagian tersebut. dan juga sebagai salah satu optimasi SEO pada loading blog. Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung saja ke TKP :

1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D

2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.

3. Setelah itu, cari kode ]]></b:skin> dengan menekan CTRL + F

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

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

5. Cari lagi di find kode yang kira-kira seperti ini :

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

Atau

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

6. Setelah ketemu, tambahkan kode di bawah ini tepat di bawah  <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

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

Jika ingin footer 3 kolom. Gunakan kode ini :

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

7. Jika sudah klik Save Template. Lalu klik Page Element untuk melihat hasilnya.

Semoga anda lebih bisa mengkreasikan blog anda dengan kreatifitas.