Cara Menambah Widget Sidebar Blogger Menjadi 2 Kolom
Setelah tadi berkeliling mencari bagaimana cara menjadikan widget sidebar saya menjadi dua kolom, akhirnya saya nemu di blognya sobat lost-sector.net . caranya tidaklah sulit, mungkin jika ada kendala adalah tidak semua template sobat bagasi31.blogspot memiliki css cript yang sama. #tentusaja hehe, ok sekedar share kepada sobat tentang tutorial blog, biar tidak update software terus, ok langsung saja di simak baik baik ya..
 |
| contoh |
Nah gambar di atas adalah contoh dari sidebar kiri yang berhasil di eksekusi menjadi dua kolom. Cara Menambah Widget Sidebar Blogger Menjadi 2 Kolom, perhatikan langkah-langkah berikut dengan seksama
- Tentu saja masuk ke acount > Blogger.com
- Klik menu Template > Edit HTML | note : saya sarankan backup dulu template sobat
- Cari ]]></b:skin> dan copy paste kode di bawah ini tepat di atas kode ]]></b:skin>
#left-column {
width: 49%;
float: left;
}
#right-column{
width: 49%;
float: right;
}
- Kemudian cari kode seperti yang ada dibawah ini
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
</div>
- Nah inilah yang saya bilang di awal tadi, tidak semua template memiliki code yang sama dengan yang atas, akan tetapi jika sobat tidak menemukan code diatas, coba cari dengan keyword "sidebar" atau "wrapper" atau cari yang mirip dengan kode diatas.
- Selanjutnya, Copy Pastekan code dibawah ini diantara kode <div id='sidebar-wrapper'> dan </div> atau yang mirip dengan code merah ini.
<b:section class='sidebar' id='left-column' showaddelement='yes'/>
<b:section class='sidebar' id='right-column' showaddelement='yes'/>
<div style='clear: both;'/>
- Jika Diterapkan, maka codenya akan seperti terlihat dibawah ini
<div id='sidebar-wrapper'>Keterangan ;
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Popular Posts' type='HTML'>
<b:includable id='main'>
<b:section class='sidebar' id='left-column' showaddelement='yes'/>
<b:section class='sidebar' id='right-column' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
Warna Merah : Merupakan kode pembuka dan kode penutup widget atau sidebar
Warna Ungu : Merupakan kode widget yang sudah ada sebelumnya
Warna Biru : Merupakan kode widget atau kolom yang ditambahkan atau dibagi 2
- Dan terakhir simpan. deh.. dan lihat hasilnya di > Tata letak
