Saturday, July 18, 2009

Membuat 3 Kolom Widget di Footer

To The Point, Langsung aja ke pokok permasalahan. Apabila template yang anda gunakan belum menyediakan kolom widget di footer, ini cara membuatnya :



Login dulu ke blog yang anda miliki
Pilih menu Layout >> Edit HTML
Jangan lupa menceklis Expand Widget dan back up dulu template anda.
Cari kode dibawah ini :

<div id='footer-wrapper'>
<b:section class='footer'/>
</div>


Setelah menemukan code yang dicetak tebal diatas, selanjutnya ganti dengan code 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;'/>

<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>

Selanjutnya, cari code </b:skin> letaknya berada ditengah-tengah.
Setelah menemukan code diatas tadi, selanjutnya copy code dibawah ini tepat diatas code tersebut.
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Simpan template, dan lihat hasilnya. Akan seperti footer di blog ini.


22 comments:

  1. salam sobat,,nice info,nich,,bisa menambah cantik blog karena ada 3 kolom widged di footer. trims infonya ini.

    ReplyDelete
  2. Thanks infonya sob..
    tukeran link yuuk..

    ReplyDelete
  3. kmu jago yaa htmlnya...q mah gabisa2 dari dulu maklum katro hehehe

    ReplyDelete
  4. Tau aja sy lagi cari yg beginian..! thanks ya??? tak coba ni

    ReplyDelete
  5. Nice info.. tapi keknya akud dah ada tuh hehehehe....

    ReplyDelete
  6. kagak bisa sob??? div katanya gak di tutup dg benar

    ReplyDelete
  7. ente kosongin dulu widget yang ada di footer blog ente...trus coba lagi.

    ReplyDelete
  8. Thank's Info nya Sob.....
    XChange yuk......

    ReplyDelete
  9. Mantab sob. Lagi belajar html nih. dari dulu gak pinter2. Akan segera dipraktekkan.Thank's infonya ya....

    ReplyDelete
  10. Happy weekend beepee... i put your banner already..

    ReplyDelete
  11. nah ini yang gw cari,,,thanks sob infonya

    ReplyDelete
  12. wah muantebs sob... tks 4 info...

    ReplyDelete
  13. infonya oks buanget, langsung ke TKP nih

    ReplyDelete
  14. numpang baca artikel, cock nih kayaknya buat blogku

    ReplyDelete
  15. mantappp bro,,,, makasih atas infonya yah,,,

    ReplyDelete
  16. Thanks infonya buat footer tiga kolom.., sangat membantu buat aq yg masih newbie.., berkunjung balik ye..

    ReplyDelete

Silahkan berkomentar, mohon tidak meninggalkan LINK didalam komentar. Terima kasih