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>.
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.
artikel bagus sob niceee http://wizard-game.blogspot.com
ReplyDeletethanks sob
DeleteWah
ReplyDeletekeren sob infonya
thanks berat sob, mohon ijin pasang tadi udah ane coba dan berhasil.trims
ReplyDeleteMaaf sob ane lupa naruh address kapan2 tengok saya ya sob, thanks
ReplyDeleteCara Membuat Footer Menjadi 2,3,4 Kolom
iya sob
DeleteFooter itu apa ya? Maaf belum ngerti ._.
ReplyDeletebar bagian bawah blog
Deleteinfo yang sangat membantu buat newbie seperti saya ini :)
ReplyDeletesalam kenal dan terima kasih :)
Nice Info Gan...salam kenal,,dan thanx more...mampir gan katacahjonegoroan.blogspot.com
ReplyDeleteManteep sob informasi artikelnya :)
ReplyDeleteIjin share http://grosiracemaxstasik.com/obat-alami-diare/
Terimakasih infonya Gan (y)
ReplyDeleteIni yang sedang saya cari-cari
http://grosirobatjellygmat.com/obat-herbal-kanker-payudara/
http://jamutradisionalmujarab.com/
terimakasih gan informasinya sangat bermanfaat :)
ReplyDeleteilmu yang sangat bermanfaat nih, terimakasih gan
ReplyDeletehttp://goo.gl/Za0GE0