Penggunaan widget yang terlalu banyak pada sisi sidebar membuat sidebar melorot. Jika di lihat pada halaman utama blog tampilan template pada sidebar normal-normal saja. Tetapi sidebar bisa melorot apabila kita mempunyai postingan yang pendek atau sedikit ini akan membuat sidebar akan lebih panjang di banding main postingan kita dan sidebar yang lebih panjang ini akan turun berada di bawah main postingan.

Sebuah solusi yang bisa dilakukan yaitu dengan meletakkan atau mengurangi widget sidebar pada footer section. Secara default template sebuah footer hanya memounyai 1 kolom dengan lebar yang sama dengan header. Widget yang kita akan pindahkan hanya mempunyai lebar yang kecil, maka akan terdapat seperti ruang kosong di sampingnya.

Ini tampilan Layout untuk 1 kolom footer


Agar tidak ada ruang kosong pada footer maka kita bisa membaginya menjadi 3 kolom seperti yang di terngkan oleh BloggerBuster

1. Langkah pertama yaitu login ke blog anda, setelah anda berada di halaman dashboard. Klik Layout (Tata Letak) pada blog yang akan edit kemudian Pilih Edit HTML. Di sarankan sebelum anda mengedit code template untuk membackup terlebih dahulu. Untuk Membackup template, Pada Template>Edit HTML , and klik pada "Download Full Template", kemudian simpan file XML pada komputer. Hal ini bertujuan apabila setelah proses pengeditan terjadi error maka anda tinggal mengupload lagi template anda.

2. Pindahkan Terlebih dahulu semua widget yang ada di footer untuk sementara. Hal ini untuk mempermudah pengeditan.

3. Lalu Cari kode (Untuk Firefox silahkan tekan Ctrl + F). jangan centang Expand Template Widget :

<div id='footer-wrapper'>

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

</div>

4. Ganti code yang berwarna merah dengan

<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:section>
</div>

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

5. Cari CSS untuk Footer, ganti semua dengan

/* Footer
----------------------------------------------- */
#footer {
width:100%;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#footer-column-container {
background:#FFFFFF;
margin-top:20px;padding-top:0px;
clear:both;
}
.footer-column {
background: #EFEFEF;
border:2px solid #cccccc;
padding: 10px;margin-bottom:5px;
margin:20px 0 20px 10px;
}
.footer-column ul {
list-style:none;
margin:0 0 1.25em;
padding:0;
}
.footer-column ul li {
background:url("http://www2.blogblog.com/rounders2/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:16px;
margin-bottom:3px;
border-bottom:1px dotted #000;
line-height:1.4em;
}
#footer-bottom {
background: #FFFFFF;
border-top:2px solid #cccccc;
margin:0px;
padding: 10px;
}
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Jika CSS footer tidak ada, anda bisa menambahkannya sebelum code </b:skin >

6. Hasilnya akan nampak pada layout




Thanks......By : Bembenk

Artikel Terkait :