Kadang kala pada template yang kita pakai ada bagian-bagian yang kita senangi ada pula yang tidak, contoh yang saya alami saat ganti templateternyata tidak ada kolom dibagian footernya., padahal sudah terlanjur senang pada template itu , akhirnya terpaksa deh kolom footernya ditambahkan sendiri secaramanual , itulah latar belakang kenapa saya posting tentang cara Buat Footer Multi Kolom ini, disamping sebagai arsip pribadi , siapa tahu nanti akan utak-atik bagian footer lagi, kan dah ada disini seperti postingan yang dulu tentang Cara Membuat Kolom Tambah Gadget di Bawah Header , atau siapa tahu ada sobat yang memerlukannya .
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