Beginilah Cara Membagi Sidebar Menjadi 2 Kolom Gadget

Beginilah Cara Membagi Sidebar Menjadi Dua Kolom Gadget - Kali ini Saya akan belajar ngukrak-ngukrek template blog saya Cara membagi Gadget sidebar menjadi dua kolom gadget. seperti hasilnya saya menempatkan Alexa dan Histat agar bisa bersebelahan sehingga hemat tempat.

Tujuannya adalah agar sidebar blog tidak terlalu panjang kebawah hemat tempat dan tidak banyak ruangan kosong.

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

1. Login ke blogger dengan ID anda.
2. Penting! jangan lupa untuk mencadangkan template anda sebelum ber-aksi.

3. Klik Template >> Edit HTML.

4. Cari kode ]]></b:skin> , untuk memudahkan pencarian tekan ctrl+f kemudian copas saja tulisan yang berwarna biru tersebut. Setelah ketemu lalu letakkan kode di kotak kuning dibawah ini tepat sebelum kode ]]></b:skin>

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

inilah contoh screen shoot pada template blog saya,

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

Note : Untuk masing-masing template biasanya berbeda-beda 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 : untuk blog saya ini judulnya Rightbar)

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>

6.  Copy-kan kode di dalam kotak biru 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>

Note : Untuk masing-masing template biasanya berbeda-beda jika masih belum ketemu cari saja terus ke bawah pelan-pelan pada template anda. Dengan ciri script </b:section> dan </div> yang berdekatan. dan sebelum melakukan  Save harap lakukan Pratinjau dulu. karena ketika salah meletakkan script diatas bisa error templatenya. Sehingga yang tampak untuk template blog ini adalah sbb:

7. Setelah Aman di Pratinjau tidak Error maka SIMPAN template anda, dan lihat hasilnya di blog anda.

8. Selamat Berkarya...Selalu berbagi kebaikan.

ARTIKEL TERKAIT: