Cara Menambah Widget Sidebar Blogger Menjadi 2 Kolom

Membagi Widget Blog Menjadi 2 Kolom | Seorang blogger sudah pasti sering mengedit template blog dan kadang apa yang diinginkan dari template tersebut tidak tersedia. Misalnya, widget yang tidak sesuai dengan posisi yang diinginkan atau kolom widget dari template tersebut masih belum cukup dan masih perlu di tambah. 

Untuk tutorial kali ini, saya akan berbagi tips blog tentang bagaimana cara menambah atau membagi widget blog menjadi 2 (dua) kolom. Selain menambah atau membagi widget sidebar, tips ini juga bisa anda gunakan sebagai referensi untuk menambah/membagi element-element yang lain, namun keberhasilan dalam menerapkannya adalah pada penempatan element pemanggil dari kode css yang harus tepat.

Gambar di atas adalah sebuah contoh pembagian atau penambahan widget blog dan untuk membagi/menambah kolom sidebar, perhatikan langkah demi langkah berikut ini :

• Login ke blogger
• Pilih Template » Edit HTML » Centang Expand Template Widget
• 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;
}

• Nah langkah selanjutnya cari kode seperti yang di bawah 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>

• Tidak semua template mempunyai kode yang sama, namun jika kode di atas tidak anda temukan, usahakan cari yang mirip dengan kode di atas, kemudian copy paste kode di bawah ini diantara kode pembuka <div id='sidebar-wrapper'> dan kode penutup </div>

<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 hasilnya akan terlihat seperti 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'>

<b:section class='sidebar' id='left-column' showaddelement='yes'/>
<b:section class='sidebar' id='right-column' showaddelement='yes'/>
<div style='clear: both;'/>

</div>

Keterangan :

Warna Merah : Merupakan kode pembuka dan kode penutup widget atau sidebar
Warna Hijau Tua : Merupakan kode widget yang sudah ada sebelumnya
Warna Biru : Merupakan kode widget atau kolom yang ditambahkan atau dibagi 2

• Langkah selanjutnya, klik simpan dan lihat hasilnya. 

Selamat mencoba dan Semoga tutorial ini bermanfaat. Salam Bloggers...!!!