Tips membuat dua kolom widget di blog

jika agan ingin menambahkan dua kolom widget pada blog agan di sini tipsnya, memang terkadang template yang kita gunakan tidak sesuai dengan ke inginan kita, kita memnginginkan ada dua kolom widget, ternyata ada satu widget saja.

Disini saya akan kasih tips bagai mana menambahkan dua kolom widget kedalam widget kita, terserah agan mau di letakan di mana di samping, di atas postingan, maupun di bawah postingan, yang terpenting itu sesuai keinginan agan. nah bagi yang minat silahkan di simak tips berikut ini

• Login Blogger agan
• klik opsi lainnya > Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> dengan menekan CTRL+F
• Letakan script berikut di atas ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Agan dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ).

*Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.

• Kemudian cari kode

*<div id='main-wrapper'>
  *<div id='content-wrapper'>
  *<div id='header'> atau <div id='header-wrapper'>
  *<div id='sidebar-wrapper'>
  *<div id='bottom'>
Keterangan :
* <div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
  * <div id='content-wrapper'> adalah posisi postingan.
  * <div id='header'> atau <div id='header-wrapper'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
 * <div id='sidebar-wrapper'> adalah posisi sidebar blog.
 * <div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.
Silakan pilih salah satu, mau menempatkannya dimana.
Keterangan :

• Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini

<div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div>
<div style="clear: both;"> </div></div>

Silakan Agan letakkan di bagian atas atau dibawah salah satu kode tad
Sebagai contoh saya letakkan dibawah kode

• Hasilnya seperti gambar berikut

• Jika sudah selesai klik Preview / Pratinjau dulu, baru klik Save Template / Simpan Template.

sekian dulu tips dari saya semoga bermanfaat dan selamat mencoba, jangan lupa tinggalkan komentar agan di sini !

Posted by Unknown

Tweet