Desember 05, 2011

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,

1 comment

7 Juni 2012 13.44  

kalau membuat satu kolom saja bisa gak gan ??? mohon pencerahaannya

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top