Menambah Widget Di Footer

Trik Menambahkan Tiga Kolom Widget Di Footer Blog atau Tambahkan Tiga Kolom Widget Di Footer gunanya untuk menjadikan halaman blog terlihat cantik dan menarik juga rapi itulah yang kita inginkan. Menambahkan Tiga Kolom Widget Di Footer atau kita sebut elemen widget dapat memberikan gaya baru pada blog anda.  kita tahu bahwa footer itu adalah merupakan bagian paling bawah pada halaman blog,yang lebih keren lagi kita akan menambahkan tiga kolom widget sekaligus,jadi bukan hanya satu kolom widget.

Sebagai contoh,sobat lihat gambar dibawah ini yang akan menjelaskan bagaimana kita akan melakukan/membuat dan menambahkan tiga kolom sidebar ke bagian footer di template blogger.

Bila sobat sudah mengerti dengan apa yang dimaksut mari kita lanjutkan untuk melihat bagaimana Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

• Pergi ke Rancangan/Desain >Edit HTML 
• Download Template Lengkap,Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut untuk keamanan bila terjadi kesalahan dalam peletakan kode nanti 
• Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat di atasnya

#footer-left {<br /> width: 33%;<br /> float: left;<br /> margin:5px;<br /> text-align: left;<br /> }<br /> #footer-center {<br /> width: 34%;<br /> float: left;<br /> margin:5px;<br /> text-align: center;<br /> }<br /> #footer-right {<br /> width: 33%;<br /> float: right;<br /> margin:5px;<br /> text-align: right;<br /> }<br /> #footer-column-container {<br /> clear:both;<br /> }<br /> .footer-column {<br /> padding:5px;<br /> }

• Selanjutnya sobat cari kode ini <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div> dan hapus kode yang berwarna merah, jika kode yang berwarna merah tidak ada maka lansung saya kopikan kode dibawah ini di bawah <div id='footer-wrapper'>

<div id='footer-wrapper'><br /> <div id='footer-column-container'><br /> <div id='footer-left'><br /> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/><br /> </div><br /> <div id='footer-center'><br /> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/><br /> </div><br /> <div id='footer-right'><br /> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/><br /> </div><br /> <div style='clear:both;'/><br /> </div><br /> </div>

• Save dan lihat hasilnya pada halaman "Rancangan/Desain"
• jika berhasil "Alhamdulilah" jika tidak upload lagi template sobat yang di download tadi. Terima kasih

Share this :