Bagi anda yang kesulitan dan ingin memperbanyak ruang kolom pada bagian footer template anda dengan cara yang fleksibel tanpa harus menemukan kode seperti berikut:
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
atau
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
Dan bukan itu saja, anda pun dapat dengan mudah menambahkan berapa banyak kolom yang dikehendaki dan ini tidak hanya berlaku untuk penambahan kolom di bagian footer saja, tapi juga dapat digunakan sekehendak anda, dimana pun anda mau menambahkan kolom tersebut. Bisa untuk menambahkan satu kolom atau beberapa kolom di atas postingan atau di bawah dan di atas header, dan bisa juga di sisi kiri dan kanan postingan. Resep ini saya dapat dari herman blog dan ini semua sudah saya praktekan dan hasilnya cukup memuaskan, bagaimana ! Ok langsung aja kita mulai: :)
Login ke Blogger. Klik Design -> Edit HTML. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
Kalau sudah, cari kode ]]></b:skin> kalau sudah ketemu, tambahkan kode dibawah ini diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
pemberian nama variabel "#foorter-column-divide", dapat anda ubah sesuai kehendak anda. Di sini pemberian nama variabel footer untuk menjelaskan bahwa kita akan membuat dan menambahkan satu kolom atau beberapa kolom di bagian footer. Begitu juga untuk pemberian nama variabel ".footer-column"
Jika ingin membuat footer 2 kolom. Gunakan kode berikut:
<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>
Membuat footer 3 kolom. Gunakan kode berikut:
<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; 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: 33%; 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: 33%; 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>
Membuat footer menjadi 4 kolom. Gunakan kode berikut:
<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>
Gimana, ngerti apa bingung. Kalau masih bingung bisa tanyakan langsung melalui kotak komentar di bawah ini. Saya akan menjawabnya, terima kasih.
