Cara Menambah kolom widget side bar

menambah kolom widget sidebar atau add element pada bagian header maupun footer tidaklah sulit. sering kita jumpai pada template  yang ingin kita gunakan terdapat keterbatasan pada jumlah maupun letak widget yang ingin kita pasang. misalnya kita ingin merubah dari 1 kolom menjadi 2 atau 3 kolom atau ingin menambah widget dibagian header dan footer agar benar-benar pas dengan keinginan kita terutama untuk widget iklan. hehehehe

yang perlu diperhatikan adalah sebelum kita memulai sebaiknya backup dahulu template yang kita miliki agar saat terjadi error kita tinggal upoad ulang dan kode-kode dibawah dapat kita rubah agar sesuai dengan blog kita. untuk yang pertama yaitu menambah kolom widget sidebar header yang bisa kita letakan di atas header maupun dibawah header.

1. login ke blogger sobat
2. lalu klik Tata Letak atau design dan klik Edit HTML
3. cari kode berikut: ]]></b:skin>
4. pastekan kode css berikut:

widget diatas header

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;
}

widget dibawah header

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

agar widget sidebar berfungsi pastekan kode html dibawah sesuai kode css yang dipilih diatas
widget diatas header cari dan letakkan diatas kode ini: <div id=’header-wrapper’>

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

widget sidebar dibawah header cari dan letakkan dibawah kode ini
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidget=”1″ showaddelement=”no”>
<b:widget id=’Header1′ locked=’true’ title=’test (Header)’ type=’Header’/>
</b:section>
</div>
pastekan kode ini

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

jangan lupa untuk klik tombol save dan lihat hasilnya dengan klik tombol Tata Letak atau design dan silahkan bereksperiment dengan widget sidebar .
lalu bagaimana jika menambah dibagian footer caranya tidak jauh berbeda.
letakkan kode css ini di atas kode ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#049ACC;
padding: 10px;
align='center';
width='90%';
}

cari kode berikut
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>
agar widget sidebar berfungsi pastekan kode html  ini dibawahnya (untuk menambah menjadi 3 kolom footer)

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

jangan lupa di save. dan ini screenshot dari salah satu blog saya: