Membuat Elemen Footer Multi Kolom

Share tips cara membuat Elemen Footer Multi Kolom. Beberapa template style default Blogger telah menyediakan 3 kolom yang terletak di bawah post widget dan sidebar. Namun untuk area footer biasanya hanya berisi text "Diberdayakan oleh Blogger". Mungkin anda ingin menempatkan sesuatu yang berbeda pada footer, agar tidak terlihat bagian tersebut jadi mubazir. Jadi kita bisa memanfaatkan area tersebut dengan meletakkan apa saja yang

ingin ditambahkan, misalnya RSS feed atau kata kunci deskripsi blog anda. Jika anda tertarik, silahkan ikuti langkah-langkah berikut untuk membuatnya :

1. Login ke akun Blogger anda, pada Dashboard pilih Template dan klik Edit HTML.
2. Jangan lupa BackUp Template lengkap untuk mengantisipasi kegagalan dalam copy paste script.
3. Cari kode  ]]></b:skin> (untuk memudahkan pencarian tekan "F3 atau Ctrl + F" pada keyboards).
4. Copy lalu letakkan kode di bawah berikut di atas/sebelum kode  ]]></b:skin>

/* footer */
#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 }
/* footer end */

Kode CSS di atas untuk membuat tampilan kolom footer. Anda bisa mengedit untuk lebar kolom dengan menggunakan ukuran pixel (px) (warna biru),  jadi anda bisa mengatur ukuran lebar tiap-tiap kolomnya. Jika ingin menambahkan kolom menjadi 4 atau 5 kolom, anda bisa menambahkan footbar-4 dan footbar-5.

Sekarang kita akan membuat id properti kolomnya, carilah kode berikut

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

atau seperti berikut

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

Jika tidak menemukan kode tadi atau tidak ada, letakkan kode berikut di bawah kode <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. Selamat mencoba menambahkan elemen footer multi kolom.

Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Membuat Elemen Footer Multi Kolom
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2012/03/membuat-elemen-footer-multi-kolom.html

Related Post