Membuat 3 kolom di footer section
Bosan dengan design template yang hanya 2 kolom atau 3 kolom saja? Jangan khawatir sekarang ada tutorial bagaimana membuat 3 kolom di bagian footer. Seperti sobat blogger lihat di bagian bawah blog ini. Saya akan coba mensadur tutorial ini dari Bloggerbuster semoga dapat di pahami.
1. Login dulu ke blogspot kemudian setelah masuk langsung menuju Tata Letak > Edit HTML. Sebelum memulai merubah kode, template terlebih dahulu di save klik Download Template Lengkap simpan file di tempat yang aman.
2. Setelah itu cari kode seperti dibawah yang berwarna merah, jangan centang Expand Template Widget :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<b:section class='footer' id='footer'/>
</div>
Harap di perhatikan tidak semuanya kode template sobat sama seperti di atas, bisa saja di sebut “footer-wrap” atau “footer”. Yang jelas di dalam Rounders templates, kalian perhatikan ada dua DIV section di sekitar footer section. Dalam hal ini kita hanya merubah kode yang berwarna merah saja.
3. Ganti kode yang berwarna merah tersebut dengan kode dibawah 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>
4. Ada bagusnya di save terlebih dahulu hasil pekerjakan kita, setelah selesai lanjutkan dengan mencari kode tag </b:skin > , setelah ketemu sisipkan kode di bawah sebelum kode tag </b:skin>.
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
clear:both;
}
.footer-column {
padding: 10px;
}
Kemudian save template, dan lihat hasilnya ke Tata Letak > Layout akan terlihat ada penambahan 3 kolom di footer. Bisa sobat sisipkan dengan widgets atau yang lainnya sesuai dengan keinginan sobat blogger.


0 comments:
Post a Comment