Bagaimana Cara Menambahkan Tiga Kolom dibagian Footer Blooger? Seperti Contoh ini:
Ada beberapa template blog yang sudah menyediakan tiga kolom dibagian footer-nya, tapi bagaimana yang belum mempunyai tiga kolom dibagian footer? Sobat tidak perlu kecewa soalnya disini Mr-Top sediakan caranya... Langsung aja kita ke TKP... Tapi sebelumnya Sobat terlebih dahulu untuk simpan template Sobat dengan klik "Download Full Template". Hanya untuk berjaga aja.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<div id='footer-column-container'> <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> <p> <hr align='center' color='#5d5d54' width='90%'/></p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'> <b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section> </div> <div style='clear:both;'/> </div>
- Langkah pertama adalah Login keblog Sobat, menuju menu Layout --> Edit HTML dan klik Expand Widget Templates.
- Dan cari kode berikut ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
- Untuk yang bewarna biru Sobat harus mengganti dengan kode di bawah ini:
<div id='footer-column-container'> <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> <p> <hr align='center' color='#5d5d54' width='90%'/></p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'> <b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section> </div> <div style='clear:both;'/> </div>
- Simpan template Sobat, setelah disimpan kita kembali ke Edit HTML dan cari element berikut </b:skin>. Untuk mencarinya Sobat teken CTRL + F secara bersamaan, ketik element tadi dan klik Next atau Previous sampai ketemu.
- Langkah selanjutnya copy kode berikut tepat di atas element </b:skin>
- Simpan template Sobat dan lihat hasilnya... Keren bukan???
Post a Comment