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>
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;
}
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.
Thanks tutorialnya, kebetulan saya juga lagi mencari tutorial ini.
ReplyDeleteTerimkasih karena ini menambah ilmu pemblogeranku yang masih kencur ini
ReplyDeleteLha templatku sudah ancur, btw trik-nya manjur juga ternyata.... Harus modif tempalte lagi nich, kalo mo pasangin footer 3 kolom. Sukses dech untuk mbah mochal... Nggak pecuma tuh pake brand menuju ke sempurnaan. Perasaan menuju ke-kantor tuh.
ReplyDeleteyah namanya membagi ilmu om sawa, sama-sama lagi belajar aja hehehehehehehe....
ReplyDeleteWah ini yang dicari.. *nyari apaan?*.. Bingung mikirin mau diisi apa ya kolomnya ntar...
ReplyDelete# kolom footer.. ini gaya social network ya mas... bagusnya diisi bookmark ke layanan social bookmark yah.. tapi bisa apa aja sih ya..
ReplyDeletebtw makasih mas.. salam kenal dari saya.
oh gitu tha caranya...
ReplyDeletedari kemaren mo baca gak jadi2...karena judulnyga gak menarik (gak tahu artinya soalnya..hehe) ternyata isinya bagus..thanks yah infonya...perlu belajar banyak nih dari sini..
@ Jovie > Ada Pepatah yang Om Tukul bilang " Don't Look From The Cover, Look it from inside" sama-sama belajar kita Jovie, artikel2 kamu bagus juga kok.
ReplyDeleteHmmm.... patut di coba niih :D
ReplyDelete@ Tanty > yups silakan say :-*
ReplyDeletethx bro manfaat banget. dah lama aku coba praktekin ini dari blog2 lain tapi malah jadi vertikal, bukan horizontal.
ReplyDeletethanks kang ya, langsung gerrr... punyaku jd ada pandangan baru gt
ReplyDeletetengkyu banget ya hackingnya, mau nanya neh.. kalo pengen merubah warna batas antar kolom hackingnya kayak apa ya? contohnya kayak punya mas Subagya kan warna pembatas blognya titik-titik warna merah tu, nah kalo pengen titik-titiknya ganti warna caranya gimana mas? bisa gak? tengkyu sebelum dan sesudahnya met menjalankan puasa ya mas..
ReplyDeletekeren nih, praktek ah...mo tanya nih, caranya nambah dua kolom dibawah header gimana ya...???
ReplyDeletethank banget kang, ahirnya ketemu juga ni tutorial /hiks
ReplyDeleteudah lama saya cari
Asyik..../baca
ReplyDeletelumayan buat nambah2 ilmu/lari
Bang Mochal Makasih ya
ReplyDeleteUdah jadi 3 kolom di fotter
Bang Mochal gimana cara buat pembatasnya
ReplyDeletebiar tambah cantik
seperti kreasi Amanda
Maksud gw border kolom widget kayak kolom label,recent post bang mochal, terus mau nanya kenapa recent comment post ama recent comment ditempat gw gak berfungsi, dimana salahnya ya Bang
ReplyDeleteDitunggu loh Bos tips2 terbarunya
ReplyDeleteLengkap banget nih he..he.. apa kabar?
ReplyDeletethx mas atas infonya:) kotak footernya aq udah modif dikit. kalo mau lihat contohnya di sini
ReplyDelete@ asal > yups, thinking out the box bro :D
ReplyDeleteThanks mas.
ReplyDeleteMannnttttapppp,,,,
ReplyDeleteMakasih mas,, di coba dulu ah,,, hehehe
ini yang aq cari2, akhirnya ketemu di sini. makasih mas
ReplyDeleteKo masi ga bisa ya? padahal saya sudah pakai template minima
ReplyDeletekalau menambah satu lagi jadi 4 kolom gmana??
ReplyDelete