Cara membuat 1, 2, 3 kolom gadget diatas atau dibawah header dan post

Cara membuat kolom gadget artinya menambah ataupun menciptakan kolom gadget yang letaknya bisa dimana saja sesuai keinginan dan kebutuhan blog dengan cara memasukan dan membuat kode-kode scrift HTML sendiri, biasanya para blogger menambah kolom gadget digunakan untuk memasang iklan atau menambah aksesoris diblog sehingga blog kelihatan menarik, caranya sebagai berikut :

A. Cara membuat 1 kolom gadget diatas post, caranya sebagai berikut :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Apabila sudah ketemu ganti tulisan showaddelement='no' menjadi showaddelement='yes'
8. Klik Simpan dan lihat hasilnya di tata letak diatas post

B. Cara membuat 1 kolom gadget diatas header, caranya sebagai berikut :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Tambahkan Kode scrift ini <b:section class="header" id="topheader" preferred="yes">
   dibawah kode tersebut
8. Selanjutnya dibawah kode diatas akan melihat kode ini <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> ganti tulisan showaddelement='no' menjadi showaddelement='yes'
9. Klik Simpan dan lihat hasilnya di tata letak diatas post

Cara menempatkanya lihat gambar dibawah ini

C. Cara membuat 1 kolom gadget dibawah header, caranya sebagai berikut :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode ]]></b:skin> 
(gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 



#under_header
{ float:left; width:100%;
}


8. Cari kode  <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
9. Tambahkan Kode <b:section class="header" id="underheader" preferred="yes"> letakkan dibawah kode <div class="region-inner header-inner">
10. Klik Simpan dan lihat hasilnya di tata letak diatas post

D. Cara membuat 2 kolom gadget dibawah Header caranya sebagai berikut :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>


#box-kolom-widget { clear:both;
 }
 .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;
 }


8. Setelah itu cari kode dibawah ini :


1. <div id="main-wrapper">
2. atau <div id="main-outer">
3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)


9. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas


<div id='box-kolom-widget'>
<div id='box1' style ='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget'id='col1'  preferred='yes'  style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>


10. Klik Pratinjau, siapa tahu ada kesalahan
11. Klik Simpan

E. Cara membuat 3 kolom gadget dibawah Header caranya sebagai berikut :

1. Caranya sama seperti membuat 2 kolom gadget tinggal mengganti kode CSS dan scrift HTMLnya, seperti Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>


<div id="box3" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="box-widget" id="col3" preferred="yes" style="float: left;">


2. Setelah itu cari kode dibawah ini :


1. <div id="main-wrapper">
2. atau <div id="main-outer">
3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)


3. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas


<div id='box-kolom-widget'>
<div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
 </div>
<div style='clear:both;'/>
</div>


4. Klik Simpan

Baca juga artikel menarik lainnya :