Setelah kemaren saya menjelaskan
Cara Membuat Breadcrumb Di Blog maka kali ini saya ingin menjelaskan bagaimana cara membuat footer 3 kolom di blog.
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'>
<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>
7. Kalau sudah silahkan
Save Template sobat.
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 wasallam
oya silahkan baca juga
Cara Membuat Breadcrumb Di Blog
Judul : Cara Membuat Footer 3 Kolom
Deskripsi : Setelah kemaren saya menjelaskan Cara Membuat Breadcrumb Di Blog maka kali ini saya ingin menjelaskan bagaimana cara membuat footer 3 kolom...