cara membuat footer 3 kolom di blogger

Saturday, February 5, 2011

Banyak tugas jadi blog ku nganggur 2 hari.... nich, tapi tetep posting lagi.. :). kali ini kita akan membahas masalah cara membuat footer 3 kolom yang dimiliki oleh wordpress. Nah terus apa hubungannya sama blogger?, pastinya ada, karna kita akan membuat footer 3 kolom ini pada blogger.com. Agar lebih jelasnya anda bisa langsung lihat blog saya paling bawah sendiri. Supaya tidak terjadi kesalahan dalam membuat footer 3 kolom, sebaiknya anda backup terlebih dahulu template anda, untuk mengatisipasi kekeliruan saat pengeditan nanti.

Langkah - langkah nya sebagai berikut :

1. langkah pertama klik centang ekspand widget (agar semua widget yang tersembunyi muncul).
2. Cari code ]]></b:skin>
3. copy code dibawah ini diatas ]]></b:skin>

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

3. Setelah itu Cari kode dibawah ini.

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

4. Setelah ketemu, copy semua kode berikut ini dibawahnya

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

5. Klik Save dan lihat hasilnya.... :)

Oya setelah saya coba - coba peletakan code kadang berbeda dengan temp yang satu dengan yang lain... tapi rata - rata berhasil.

Popular Post

Labels: Tutorial Blog

Thanks for reading cara membuat footer 3 kolom di blogger. Please share...!