Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog

Membuat 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.Membahas tutorial blog yang berhubungan dengan menambah kolom sebenarnya kang roni sudah pernah share dengan judul Cara super mudah menambahkan elemen di atas postingan dan kali ini kang roni juga akan membahas cara menambahkan kolom/elemen widget akan tetapi letaknya bukan di atas postingan tapi di bagian bawah footer dan 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 seperti yang kangroni share dulu (menambahkan kolom di atas posting).

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 mari kita lanjutkan untuk melihat bagaimana Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

1.Pergi ke Rancangan/Desain >Edit HTML.
2.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.
3.Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat di atasnya.

#footer-left {

width: 33%;

float: left;

margin:5px;

text-align: left;

}

#footer-center {

width: 34%;

float: left;

margin:5px;

text-align: center;

}

#footer-right {

width: 33%;

float: right;

margin:5px;

text-align: right;

}

#footer-column-container {

clear:both;

}

.footer-column {

padding:5px;

}

4.Selanjutnya sobat cari kode ini

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Setelah ketemu sobat ganti kode yang di cetak tebal dengan kode dibawah ini

<div id='footer-wrapper'>

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

<div id='footer-left'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer-center'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer-right'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

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

</div>

</div>

---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

Perhatikan keterangan lebih lanjut,bila sobat tidak menemukan kode pada langkah nomor 4 seperti dibawah ini

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Sobat cari aja kode <div id='footer'> kemudian dibawahnya taruh kode ini

<div id='footer-wrapper'>

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

<div id='footer-left'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer-center'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer-right'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

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

</div>

</div>

---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

Ket:Bila hasilnya nanti tidak sejajar itu berarti ukuran kolom widgetnya terlalu besar,jadi sobat perlu merubah angka yang di cetak warna merah di atas dengan nilai angka yang lebih rendah.

sumber>>http://roningasinanblog.blogspot.com/2011/11/tips-cara-membuat-blog-cantik-dan.html