4 Kolom Untuk Elemen Footer

Tulisan sebelumnya, membuat header menjadi 2 kolom dan kini membuat elemen footer menjadi 4 kolom. Dengan adanya 4 kolom tersedia, Agan bisa menaruh banyak widget nantinya.

1. Masuk ke Template, klik Edit HTML.
__Pilih lanjutkan, tidak usah centang expand template widget.

2. Carilah kode ini ]]></b:skin>.
__Gunakan CTRL F untuk memudahkan pencarian.

3. Masukkan kode berikut ini di atas kode ]]></b:skin>  tadi.

#footer-column-divide { clear:both; } .footer-column { padding: 10px; }

4. Cari juga kode seperti ini. Tidak harus sama persis.

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

Atau seperti ini <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div>

Atau seperti ini   <footer> <div class='footer-outer'>

Agan bisa cari sendiri karena setiap template berbeda-beda.

5. Jika sudah ketemu, masukkan kode ini di bawahnya.

<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>

6. Contoh letak pemasangannya. Jika di blog saya.

<footer><div class='footer-outer'>
<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>

7. Setelah itu klik SIMPAN. Dan masuk ke Tata letak untuk melihat hasilnya.