Menambah Elemen Footer Menjadi Multi Kolom

Situseo Blog : Membuat footer multi kolom sehingga menjadi 2, 3, 4 atau bahkan 5 kolom, bagi sebagian template tidak terdapat kolom footer widget yang berguna untuk menempatkan beberapa widget didalamnya, untuk memodifikasi atau menambahkan kolom footer tersebut, kita bisa menambahkan kode CSS didalamnya.

Sebelumnya pernah kita bahas mengenai cara merubah ukuran halaman sidebar, post body dan footer, jika tertarik untuk mengetahuinya, kalian bisa meng-klik link tersebut. Melanjutkan cara memasang footer multi kolom, kalian bisa ikuti caranya sebagai berikut:

• Login ke akun Blogger - pilih Design/Rancangan - Edit HTML
• Sebelum melakukan penambahan script sebaiknya melakukan backup template terlebih dahulu, dengan men-Download Full Template, supaya mudah mengembalikan template kebentuk semula bila hasilnya tidak sesuai dengan yang di inginkan.
• Cari kode ]]></b:skin> tambahkan kode CSS dibawah ini diatas kode ]]></b:skin>

#footbar { margin-top:15px; padding:0px;}
#footbar-1 { float:left; width:30% }
#footbar-2 { float:left; margin-left:10px; width:30% }
#footbar-3 { float:left; margin-left:10px; width:30% }

#footbar .widget { background:none }
#footbar .widget h2 { background-color:#F7941D; padding-left:10px }
#footbar .widget-content { background:transparent }

kemudian cari kode dibawh 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>

tambahkan kode dibawah ini di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/>, Jika tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode dibawah ini dibawah <div id='footer'>

<div id='footbar'>
<div class='clear'>&#160;</div>
<div id='footbar-1'>
<b:section class='footbar-div' id='footbar-1' preferred='yes'>
</b:section>
</div>
<div id='footbar-2'>
<b:section class='footbar-div' id='footbar-2' preferred='yes'>
</b:section>
</div>
<div id='footbar-3'>
<b:section class='footbar-div' id='footbar-3' preferred='yes'/>
</div>
</div>

• Save template dan lihat hasilnya

kode CSS yang ditempatkan diatas kode ]]></b:skin> adalah yang membentuk tampilan kolom footer, kalian bisa mengedit bagian tersebut, untuk lebar kolom bisa menggunakan ukuran pixel(px) yang dalam contoh menggunakan ukuran %, dengan menggunakan ukuran pixel kalian bisa menentukan ukuran lebar kolom footer sesuai dengan yang dinginkan, jika ingin menambahkan kolom menjadi 4 atau 5 kolom, kalian bisa menambahkan footbar-4 dan footbar-5.

Semoga bermanfaat,