Cara membagi gadget menjadi dua kolom

Ada kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.
Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?

OK..., seperti yang dirasakan oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :

Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :

#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :

Catatan:
Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'.

Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :

7. Sisipkan kode dibawah ini diantara </b:section> dan </div> :

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

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

Sehingga tampak seperti berikut :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

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

</div>

8. SIMPAN TEMPLATE

Selesai...., silahkan anda lihat hasilnya....
Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara membagi gadget menjadi dua kolom; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Cara buat slide menu drop down Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down. Dibuat menggunakan fitur CSS dan beberapa HTML, cara kerjanya ringan dan memiliki e ... readmore
Cara membuat gambar memutarFitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah bany ... readmore
Cara membuat fitur slide showBanyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banya ... readmore
Cara Membuat Navigasi HalamanCara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan ... readmore
Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore