Posted by : Hilmi Feb 4, 2013

Cara Membuat Footer Menjadi 4 Kolom - Beberapa template blog yang kita download dari penyedia template tidak memiliki kolom widget di bagian footer untuk kita menempatkan elemen-elemen blog yang ingin kita letakkan pada bagian tersebut. Untuk itu, kita harus membuat footer tersebut menjadi beberapa kolom, berikut ini langkah-langkahnya.


1. Login Blogger > Template > Edit HTML.
2. Cari kode ]]></b:skin>.
3. Letakkan kode di bawah ini di atas kode ]]></b:skin>.

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

4. Setelah itu, cari kode seperti ini.

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

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

5. Setelah ketemu, tambahkan kode di bawah ini setelah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' showaddelement='yes'/>.

Untuk Membuat Footer 2 Kolom
<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Untuk Membuat Footer 3 Kolom
<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; 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>

Untuk Membuat Footer 4 Kolom
<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
 </div>

<div style='clear:both;'/>
</div>

6. Jika sudah selesai, simpan template dan lihat hasilnya.

{ 14 komentar... read them below or Comment }

  1. artikel bagus sob niceee http://wizard-game.blogspot.com

    ReplyDelete
  2. thanks berat sob, mohon ijin pasang tadi udah ane coba dan berhasil.trims

    ReplyDelete
  3. Maaf sob ane lupa naruh address kapan2 tengok saya ya sob, thanks
    Cara Membuat Footer Menjadi 2,3,4 Kolom

    ReplyDelete
  4. Footer itu apa ya? Maaf belum ngerti ._.

    ReplyDelete
  5. info yang sangat membantu buat newbie seperti saya ini :)
    salam kenal dan terima kasih :)

    ReplyDelete
  6. Nice Info Gan...salam kenal,,dan thanx more...mampir gan katacahjonegoroan.blogspot.com

    ReplyDelete
  7. Manteep sob informasi artikelnya :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-diare/

    ReplyDelete
  8. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/obat-herbal-kanker-payudara/
    http://jamutradisionalmujarab.com/

    ReplyDelete
  9. terimakasih gan informasinya sangat bermanfaat :)

    ReplyDelete
  10. ilmu yang sangat bermanfaat nih, terimakasih gan
    http://goo.gl/Za0GE0

    ReplyDelete

>
<

Popular Posts

Powered by Blogger.

Followers

- Copyright © 2014 Hilmi's Blog - DJogzs - Powered by Blogger - Designed by Johanes Djogan -