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 Template jika dah ok ya..