Cara Membuat Kolom Footer Widget

Anda mungkin sudah melihat Kolom ini disetiap anda kunjungi pada setiap blog. dengan Widget yang diletakan pada Kolom Footer ini dan Kolom ini terdapat Di bawah Posting.

Kolom Footer Widget berfungsi sama dengan sidebar yaitu untuk meletakan sebuah widget dimana anda dapat meletakan widget apapun yang bisa anda pasang. Widget yang ini biasa anda taruh Widget yang tidak terlalu penting untuk dipasang, Seperti Widget, Recent Comment, dan lain-lain. atau Widget yang dipasang terlalu penuh yang dipasang pada Sidebar.

Widget Footer ini Berisi tiga Kolom Widget dimana anda bisa menaruh sebanyak mungkin widget yang bisa dipasang. Dan bagaimana cara untuk memasangnya?, Terlebih Dahulu Anda Back Up (Cadangkan) dulu Template Anda. Setelah itu, Ikuti cara berikut untuk memasangnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
• Cari Kode ]]></b:skin> ,dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini diatas kode ]]></b:skin> :

/* ----- YBB Footer ----- */
#footer {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#ffffff;
}
#footer-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#footerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.footerbar {margin: 0; padding: 0;}
.footerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.footerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.footerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.footerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}

Ketarangan:

1. Kode Yang Berwarna Merah adalah Warna Dari Background Footer, Jika ingin diganti, ganti dengan kode warna 6 digit
2. Kode Yang Berwarna Kuning adalah Lebar Dari Kolom Footer, Ganti Dengan Lebar yang sesuai dengan Lebar Blog anda.
3. Kode Yang Berwarna Biru adalah Ketebalan dari garis pembatas dan warna dari pembatas.
4. Kode Yang Berwarna Orange adalah Warna Dari Judul Widget, Ganti Dengan Warna yang ingin anda inginkan.
5. Kode Yang Berwarna Hijau adalah Font (Tulisan) Ukuran, Dan Jenis Font.
6. Kode Yang Berwarna Biru Muda adalah Warna Ketebalan, Dan Ketebalan dari Garis Pembatas Judul.
7. Dan Jika Anda ingin Menghapus Pembatas Footer, Hapus Kode border:1px solid #DEDEDE; .

• Setelah itu, Cari kode </body> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini diatas kode </body> :

<div id='footer'>
<div id='footer-wrapper'>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar1' preferred='yes'>
</b:section>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar2' preferred='yes'>
</b:section>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

• Lalu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG