karna cara ini sudah banyak bertebaran di mesin pencari jadi gak ada salah nya kan saya juga membuat artikel tentang Cara Membuat Footer 3 Kolom ya itung-itung untuk koleksi pribadi la, dan juga untuk para blogger baru seperti saya ini.hehe
ok kita langsung aja ke cara pembuatannya.
1. Seperti biasa Login ke blog sobat terlebih dahulu.
2. Klik Template > Edit HTML > beri centang Expand Template Widget
3. Cari code ]]></b:skin> untuk mempercepat gunakan Ctrl+f
4. Copy code di bawah ini lalu letakkan tepat di atas code ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Selanjutnya cari code <div id='footer'> atau id='footer'
6. Lalu copy lagi code di bawah ini letakkan tepat di bawah code <div id='footer'> atau id='footer' tadi
<div id='footer-column-container'>7. Kalau sudah silahkan Save Template sobat.
<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='#ffae00' 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>
Nah sekarang coba sobat lihat di Tata Letak.
bagaimana apakah berhasil..?
Ni screen shot nya sebelum di pasang footer 3 kolom.
Sebelum pasang |
Dan yang ini ketika sudah di pasang footer 3 kolom
Sesudah pasang |
Ok mungkin segitu aja dulu Cara Membuat Footer 3 kolom
kalau ada pertanyaan silahkan tulis di kolom komentar..
Terima Kasih
0 komentar:
Posting Komentar