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
>

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.


28 comments:

  1. Thanks tutorialnya, kebetulan saya juga lagi mencari tutorial ini.

    ReplyDelete
  2. Terimkasih karena ini menambah ilmu pemblogeranku yang masih kencur ini

    ReplyDelete
  3. Lha 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.

    ReplyDelete
  4. yah namanya membagi ilmu om sawa, sama-sama lagi belajar aja hehehehehehehe....

    ReplyDelete
  5. Wah ini yang dicari.. *nyari apaan?*.. Bingung mikirin mau diisi apa ya kolomnya ntar...

    ReplyDelete
  6. # kolom footer.. ini gaya social network ya mas... bagusnya diisi bookmark ke layanan social bookmark yah.. tapi bisa apa aja sih ya..

    btw makasih mas.. salam kenal dari saya.

    ReplyDelete
  7. oh gitu tha caranya...
    dari 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..

    ReplyDelete
  8. @ 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.

    ReplyDelete
  9. Hmmm.... patut di coba niih :D

    ReplyDelete
  10. @ Tanty > yups silakan say :-*

    ReplyDelete
  11. thx bro manfaat banget. dah lama aku coba praktekin ini dari blog2 lain tapi malah jadi vertikal, bukan horizontal.

    ReplyDelete
  12. thanks kang ya, langsung gerrr... punyaku jd ada pandangan baru gt

    ReplyDelete
  13. tengkyu 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..

    ReplyDelete
  14. keren nih, praktek ah...mo tanya nih, caranya nambah dua kolom dibawah header gimana ya...???

    ReplyDelete
  15. thank banget kang, ahirnya ketemu juga ni tutorial /hiks
    udah lama saya cari

    ReplyDelete
  16. Asyik..../baca

    lumayan buat nambah2 ilmu/lari

    ReplyDelete
  17. Bang Mochal Makasih ya

    Udah jadi 3 kolom di fotter

    ReplyDelete
  18. Bang Mochal gimana cara buat pembatasnya
    biar tambah cantik
    seperti kreasi Amanda

    ReplyDelete
  19. 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

    ReplyDelete
  20. Lengkap banget nih he..he.. apa kabar?

    ReplyDelete
  21. thx mas atas infonya:) kotak footernya aq udah modif dikit. kalo mau lihat contohnya di sini

    ReplyDelete
  22. @ asal > yups, thinking out the box bro :D

    ReplyDelete
  23. Mannnttttapppp,,,,
    Makasih mas,, di coba dulu ah,,, hehehe

    ReplyDelete
  24. ini yang aq cari2, akhirnya ketemu di sini. makasih mas

    ReplyDelete
  25. Ko masi ga bisa ya? padahal saya sudah pakai template minima

    ReplyDelete
  26. kalau menambah satu lagi jadi 4 kolom gmana??

    ReplyDelete