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

Cara membuat 3 kolom gadget dibawah header

Pada postingan kali ini kita akan membahas cara menambah 3 kolom Gadget dibawah header, caranya sangat mudah sekali, ikuti langkah - langkah berikut ini :

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> 


<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;'/>\


8. Setelah itu cari kode dibawah ini :


1. <div id='main-wrapper'>  atau kode
2. <div id="main-outer"> atau kode
3. <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: 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>


10. Kli Pritinjau, siapa tahu ada kesalahan
11. Klik Simpan


Selamat mencoba

Cara membagi header menjadi 2 kolom

Untuk membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini dan semoga tutorial saya kali ini bisa membantu keinginannya kawan :

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 CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)


.header-outer {
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;} 


7. Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode dibawah ini


.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
 _background-image: none;min-height: 160px;
} 
#header {
width: 45%;
margin-right: 10px;float: left;
}
#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;
}


Keterangan


1. min-height: 160px; = Tinggi tampil di header anda adalah sebesar 160px, ganti sesuai selera
2. width: 47% = Lebar Header kanan atau yang baru ditambahkan dan ada 8% ruang antar header.
3. width: 45%;. = Lebar Header kiri


8. Setelah mengatur kode CSS tersebut diatas selanjutnya cari kode dibawah ini:


<div class="region-inner header-inner">


9. Setelah anda temukan kode  <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut diatas


<b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>



10. Setelah selesai, simpan dan tutup template


Selamat mencoba