62 Membuat Footer Kolom Pada Template Blogger

Membuat Footer Kolom Pada Template. Menambahkan 4 kolom footer spesial untuk pengguna blogger template Bamz Style. Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.

Cara Membuat atau menambah Footer kolom pada Template

• Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
• Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#bamzlower { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#bamzlower-wrapper { margin:auto;width: 860px; border:0; }
#bamzlowerbar-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.bamzlowerbar {margin: 0; padding: 0;}
.bamzlowerbar .widget {margin: 0; padding: 10px 0px 0px 0px;}
.bamzlowerbar h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.bamzlowerbar ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.bamzlowerbar li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.bamzlowerbar li a { text-decoration:none; color: #333; }
.bamzlowerbar li a:hover { text-decoration:none; color:#000;}
.bamzlowerbar li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/

• Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>

<!-- Kolom Footer By BamZ -->

<div id='bamzlower'>
<div id='bamzlower-wrapper'>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar1' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar2' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar3' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->

Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini

# bamzlowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }

Selanjutnya hapus kode

<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>

Simpan template dan jadilah 3 kolom Footer.

Jangan lupa berlangganan yah (Facebook, twitter, google plus atau mungkin di bookmark) dan dapatkan update-update seputar Tutorial blogger dan fitur template dari Blog Bamz hehehe :). Selamat mencoba dan semoga sukses!

Komentar →