Kamis, 25 November 2010

Membuat Footer Menjadi 3 Kolom

Seperti yang telah kita ketahui kebanyakan template untuk blog hanya memiliki satu Columns pada footer. Yang pada akhirnya menyebabkan kita tidak dapat meletakkan banyak widgets di ruang tersebut. Dengan membuat ruang footer menjadi tiga bagian, maka banyak widgets seperti Pesan Terbaru, Recent Comments, Archives dan iklan dapat dimasukkan. Membuat footer seperti pada blogspot sangat mudah dengan hanya mengikuti langkah dibawah ini :

Catatan: sebelum anda mengedit template adalah disarankan agar membuat salinan template terlebih dahulu dengan mengklik Download Template pada situs Layout --- Edit HTML
Pindahkan dahulu widget yang ada di footer ke side bar atau bagian yang lain.

1. Pada Design pilih edit HTML

2. Cari kode berikut

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</ Div>

(Catatan: pada beberapa template selain dari footer-wrapper Anda mungkin akan menjumpai footer atau footer-section)


3. Ganti kode diatas tadi dimulai dari <div> ke </ span> dengan kode berikut:

<div id='footer'>
<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='#5d5d54' width='90%'/> </ p>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</ B: section>
</ Div>
<div style='clear:both;'/>
</ Div>

4. Kemudian save template Anda.