Langsung saja ke langkah-langkah Buat Footer Multi Kolom itu kira-kira seperti ini :
- Masuk dulu ke Dashboard atau ke blogger.com
- Terus pilih Layout dan Edit HTML
- Sebelum lanjut klik dulu deh Download Full Template sebagai backup siapa tahu nanti malah amburadul.
- Kalau sudah, cari kode ]]></b:skin>
- Diatas kode no. 4 tadi (]]></b:skin> ) , tamnahkanlah kode dibawah ini : #footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
} - Sudah ditambahkan belum ??, jika sudah lanjutkan cari kode dibawah ini.<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
- Jika dah ketemu , yo kita buat kolom2 dalam footer itu sesuai keinginan kita, caranya hapus kode warna merah diatas, ganti dengan kode dibawah ini : Untuk footer 4 kolom, kodenya seperti ini :
Kalau mau yang 3 kolom,, ambil deh yang ini :<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>
Ah.. 2 kolom footer aja silahkan copas yang ini :<div id='footer-column-divide'>
<div id='footer1' 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='footer2' 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='footer3' 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><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> - Jangan lupa Save
Selamat mencoba.. untuk Buat Footer Multi Kolom …
[sumber]
http://zonablogging.blogspot.com/2012/05/cara-bikin-3-4-5-kolom-footer-di.html
0 komentar:
Posting Komentar