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 -->Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.
<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 -->
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
Simpan template dan jadilah 3 kolom Footer.
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
Jangan lupa berlangganan yah (Facebook, twitter, google plus atau mungkin di bookmark) dan dapatkan update-update seputar Tutorial blogger dan fitur template dari Blog FaHen hehehe :). Selamat mencoba dan semoga sukses!
EmoticonEmoticon