Trik Menambah Tiga Kolom di Bagian Footer Blog

Buat kalian yang inggin membuat kolom footer menjadi tiga seperti contoh gambar di bawah ini.





Caranya cukup mudah kok dan simpel lagi , begini caranya:

1. Login ke Blogger.

2. Tata Letak >> Edit HTML

3. Centang atau contreng Kotak Expand Widget Template.

4. Kemudian cari kode ]]></b:skin>, dan letakkan kode berikut ini di atas kode ]]></b:skin>



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




5. Selanjutnya carilah kode berikut ini :



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




6. Lalu letakkan kode berikut ini di bawah kode no.5


<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;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>

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




7. Setelah semuanya selesai sekarang kita tinggan Save Template nya.





Sekarang tinggal kita lihat hasilnya dengan klik menu Tata Letak,bagus bukan hasilnya?

Sekian tips dari saya ,bila ada masalah tinggal comment aja di blog saya.

Blog, Updated at: 8/18/2011 11:42:00 PM

4 comments:

  1. kemarin sohib ane nyari kaya gini ni bro, ternyata ketemu disini,

    linknya udah ane pasang sob, silahkan di cek

    ReplyDelete
  2. mntp.... inpo bagus...
    ^________^

    makasih udah mau mengsharr ilmu nya yang bermanfaat

    ReplyDelete
  3. Makin jauh ane melangkah dari blog ke blog makin pusing kepala ini, tapi alhamdulillah ada manfaatnya jadi tambh ilmu seperti disini ane bru faham dan bru ngert thxs infonx Makin jauh ane melangkah dari blog ke blog makin pusing kepala ini, tapi alhamdulillah ada manfaatnya jadi tambh ilmu seperti disini ane bru faham dan bru ngert thxs infonx

    ReplyDelete

ROUGER DELUFFY CHANNEL