Cara Membagi Sidebar Menjadi 2 Kolom Gadget

Cara Membagi Sidebar Menjadi Dua Kolom Gadget 

Pada tutorial kali ini, saya akan membahas tentang cara membagi sidebar menjadi dua kolom gatget. Tujuannya adalah agar disidebar blog tidak terlalu panjang kebawah, dan lebih menghemat tempat.

Widget sidebar seperti ini biasa digunakan untuk Kategori Label, Blogroll, Blog Info dsb. Cara untuk membagi dua kolom sidebar diatas sangat mudah, tinggal mengikuti langkah-langkah dibawah ini :


1. Login ke blogger dengan ID anda.
2. Klik Template >> Edit HTML.
3. Cari kode ]]></b:skin> , lalu letakkan kode dibawah ini tepat sebelum kode ]]></b:skin>

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

4. Cari kode pada bagian sidebar yang ingin dibagi menjadi dua, misalnya seperti kode 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>
</div>

Catatan : Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'. atau cari saja judul widget yang ingin dibawahnya dibagi menjadi dua kolom (Misalnya : LABEL atau POPULAR POST)

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

<div id=' .......... '>
<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='HTML' locked='false' title='' type='HTML'/> </b:section>
</div>

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

6. Sehingga akan tampak seperti ini :

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

7. SIMPAN template anda, dan lihat hasilnya.

Selesai,Sidebar kamu sudah terbagi menjadi dua kamu tinggal mengganti atau menambahkan gadgetnya saja.
Selamat mencoba, semoga sukses...

Mata air

Template blogger SEO Frendly Terbaru 2013

  Download template seo terbaru 2013 dengan tampilan dinamis, simple tapi keren dan loadingnya cepat. Template blogspot ini dilengkapi berbagai fitur yang akan mempercepat blog terindeks oleh mesin pencari seperti google. Diantaranya adalah meta tag deskripsion dan keyword, breadcrumbs, permalink tag, dan artikel terkait dengan icon kecil. Template ini juga sudah dilengkapi readmore otomatis dan tanpa mengganggu laman blog (read more tidak mempengaruhi laman blog).
Berikut screenshot templatenya :

Tertarik dengan template SEO frendly terbaru 2013 ini ?? Silahkan download disini