Kadang template yang kita gunakan tidak sesuai dengan harapan kita, contohnya kolom widget yang disediakan hanya ada satu padahal kita membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.
Untuk mempercantik blog dengan susunan gadget yang sesuai dengan harapan Sobat, dalam hal ini jumlah kolom widget, Sobat sanggup membuatnya sendiri dan terserah mau meletakkannya dimana, sanggup di bawah posting, di atas posting, di bawah header, di dalam sidebar, di bab footer ataupun di lain tempat.
Berikut Cara Membuat dua Buah Elemen Gadget/Widget :
- Login Blogger Sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari instruksi ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
- Letakkan script berikut ini diatas ]]></b:skin> :#box-main-container {*Anda sanggup mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya yakni Jarak ( Atas, Kanan, Bawah, Kiri ).
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
*Anda juga sanggup merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan instruksi 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'>
*<div id='main-wrapper'> yakni posisi halaman utama anda. Biasanya digunakan untuk penempatan sajian horizontall atau daftar isi sebuah blog.
*<div id='content-wrapper'> yakni posisi postingan.
*<div id='header'> yakni posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
*<div id='sidebar-wrapper'> yakni posisi sidebar blog.
*<div id='bottom'> yakni posisi paling bawah. Atau Footer Blog Anda.
Silakan pilih salah satu, mau menempatkannya dimana. - Jika sudah didapat atau hampir sama dengan instruksi diatas, letakkan instruksi 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>Silakan Anda letakkan di bab atas atau dibawah salah satu instruksi tadi.
<div style="clear: both;"> </div></div>
*Sebagai pola saya letakkan dibawah instruksi <div id='main-wrapper'>
*Hasilnya menyerupai gambar berikut - Jika sudah final klik Preview / Pratinjau dulu, gres klik Save Template / Simpan Template.
Semoga Tutorial diatas sanggup berkhasiat dan bermanfaat...