Selamat membaca
Beginilah Cara Membagi Sidebar Menjadi 2 Kolom Gadget
semoga bermanfaat
Banner 300 x 460 widget kanan

Halaman Utama

Arsip Blog

BLOGSPOT kiri

Beginilah Cara Membagi Sidebar Menjadi 2 Kolom Gadget

Bersedekahlah untuk Mempercepat Rejeki dan Menjauhkan dari Bala dan Musibah

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:

Ditulis Oleh: Eko Purnomo Sedekah Untuk Hidup Yang Lebih Baik Updated at : 20:26

4 comments:

Silahkan berkomentar sesuai tema, gunakan kata-kata yang bijak dalam berkomentar (no iklan, no porn, no spam). Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM. Terima Kasih.

Kumpul Komunitas banner 300

Pesan Mas Eko

Assalamualaikum warohmatullohi wabarokatuh, Salam Sukses Dunia Menuju syurga. Pergunakanlah media sosial untuk hal yang positif berbagi kebaikan, sesuatu yg bermanfaat dan dapat memotivasi orang lain untuk berbuat kebaikan dan beramal sholeh. #SuksesDuniaAkherat
Facebook  Twitter  Google+ Instagram Linkedin Path Yahoo RSS Feed


Artikel Populer

Copy Code ini untuk Blog Anda

<!-- Start Code --><a target="_blank" href="http://ekomunikasi.blogspot.com/" title="Sedekah Untuk Hidup Yang Lebih Baik"><img alt="Eko Purnomo" src="http://3.bp.blogspot.com/-ddwd1JDQyso/UxCJjzA8e4I/AAAAAAAAAcA/FYF4-GJ6dSw/s1600/ekomunikasibanner.png" border="0" height="15" width="80" /></a><!-- End Code -->