Photobucket

Membuat Footer 3 Kolom

Diposting oleh Nyom" Anak Kerissena Jumat, 01 Oktober 2010

Membuat Footer 3 Kolom

Pasti enak bila kita bisa membuat Footer blog kita menjadi 3 kolom, seperti diblog ini. kita bisa memperbanyak gadget dan widget sesuka hati kita. pertanyaannya, Bisakah kita membuatnya? untuk menjawab pertanyaan tersebut, kali ini saya postingkan caranya.


1. Login ke blogger
2. Tata Letak > Edit HTML > centang Expand Widget Template
3. Cari kode yang bercetak tebal seperti dibawah ini, tekan CTRL+F untuk mempercepat pencarian:


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


4. Ganti kode yang diberi warna stabilo pada baris kedua diatas dengan kode di bawah ini


<div id='footer-column-container'>

<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;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>
</div>


5. Save Templates

SELAMAT MENCOBA.....


http://www.kolasecinta.co.cc/