Membuat Dua Kolom Widget di Blogspot tidak di permasalahkan jika sobat ingin menambahkannya, hal ini dilakukan karena keterbatasannya template bawaan blogspot sehingga sobatpun jenuh dengan widget yang adanya cuman satu. Pada kesempatan saya kali ini saya akan memberitahukan pada sobat blogger bagaimana cara membuat widget menjadi dua kolom. keuntungan dalam membuat widget menjadi dua tidak lain hanya untuk mempercantik blog dengan susunan gadget yang sesuai dengan
keinginan sobat, dengan cara yang satu ini sobat dapat membbuat widget ini baik dalam sidebar, body, ataupun header tergantung sobat ingin membuatnya mau di letakkan dimana. Silahkan ikuti langkah-langkah berikut:
1. Login ke akun blogger sobat
2. Pilih menu Template lalu klik Edit HTML
3. Cari kode ]]></b:skin> lalu letakkan kode berikut tepat di atas kode ]]></b:skin>
5. Setelah selesai mengatur padding selanjutnya cari kode
7. Jika sudah lalu letakkan kode di bawah ini sesuai keinginan sobat mau di letakkan sesudah atau sebelum salah satu kode di atas tadi
Semoga Bermanfaat
1. Login ke akun blogger sobat
2. Pilih menu Template lalu klik Edit HTML
3. Cari kode ]]></b:skin> lalu letakkan kode berikut tepat di atas kode ]]></b:skin>
#box-main-container {4. Atur padding sesuai keinginan sobat, itu untuk mengatur jarak posisi gadget
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
5. Setelah selesai mengatur padding selanjutnya cari kode
<div id='main-wrapper'>6. Silahkan pilih salah satu kode di atas, untuk membuat widgetnya mau diletakkan dimana
<div id='content-wrapper'>
<div id='header'> atau <div id='header-wrapper'>
<div id='sidebar-wrapper'>
<div id='bottom'>
7. Jika sudah lalu letakkan kode di bawah ini sesuai keinginan sobat mau di letakkan sesudah atau sebelum salah satu kode di atas tadi
<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>9. Jika sudah selesai silahkan klik pertinjau, kalau tidak terjadi error silahkan simpan template
<div style="clear: both;"> </div></div>
Semoga Bermanfaat
Comments
Post a Comment