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 :
berikut :
A. Cara membuat 1 kolom gadget diatas post, caranya sebagai
berikut :
Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode <b:section class='main' id='main'
showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan
pencarian kode)
Apabila sudah ketemu ganti tulisan showaddelement='no'
menjadi showaddelement='yes'
Klik Simpan dan lihat hasilnya di tata letak diatas post
B. Cara membuat 1 kolom gadget diatas header, caranya
sebagai berikut :
Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode <div class="region-inner
header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian
kode)
Tambahkan Kode scrift ini <b:section
class="header" id="topheader" preferred="yes">
dibawah kode tersebut
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'
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 :
Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin>
(gunakan tombol CTRL + F3 untuk mempermudahkan pencarian
kode)
Copy paste kode CSS dibawah ini dan letakan diatas kode
]]></b:skin>
#under_header
{ float:left; width:100%;
}
Cari kode <div
class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk
mempermudahkan pencarian kode)
Tambahkan Kode <b:section class="header"
id="underheader" preferred="yes"> letakkan dibawah kode
<div class="region-inner header-inner">
Klik Simpan dan lihat hasilnya di tata letak diatas post
D. Cara membuat 2 kolom gadget dibawah Header caranya
sebagai berikut :
Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin> (gunakan tombol CTRL + F3
untuk mempermudahkan pencarian kode)
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;
}
Setelah itu cari kode dibawah ini :
<div id="main-wrapper">
atau <div id="main-outer">
atau <div class="main-outer"> sesuai dengan
versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian
kode)
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>
Klik Pratinjau, siapa tahu ada kesalahan
Klik Simpan
E. Cara membuat 3 kolom gadget dibawah Header caranya
sebagai berikut :
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;">
Setelah itu cari kode dibawah ini :
<div id="main-wrapper">
atau <div id="main-outer">
atau <div class="main-outer"> sesuai dengan
versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian
kode)
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>
Klik Simpan
0 komentar:
Post a Comment