Contoh :
langsung saja yach!!!
Langkah-langkahnya sebagai berikut :
1. Masuk ke "Dasbor"
2. Klik "Tata Letak"
3. Klik "Edit HTML"
4. Beri Centang pada kotak kecil "Expand Template Widget"
5. Silahkan cari di dalam template anda kode ]]></b:skin>
6. Persis sebelum kode tersebut, copypastekan script berikut ini :
Untuk 1 Widget yang Berada Diatas dan Dibawah
/* Untuk 1 Widget yang Berada Diatas dan Dibawah */
#widget-atasbawah {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
position: relative;
text-align: center;
}
#atasbawah, #widget-atasbawah2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* background: #FFFFFF;
border-top: 1px solid none;
border-left: 1px solid none;
border-right: 1px solid none; */
}
#atasbawah .widget, #widget-atasbawah2 .widget {
margin: 0;
padding: 10px 0;
}
Kalau sudah kamu Copy Paste script yang diatas tadi, sekarang kamu Copy Paste juga script yang ada dibawah ini dan letakkan di <head> = untuk posisi widget diatas + </head> = untuk posisi widget dibawah :
Ni scriptnya ^_^
<div id='widget-atasbawah'>
<b:section class='atasbawah' id='atasbawah' preferred='yes'/>
</div>
Jangan lupa di Save yach!!!
* Untuk 3 Widget
/* -- Untuk 3 Widget -- */
#3-Widget {
width:960px;
clear:both;
margin:7px 0px 7px 0px;
float:left;
padding:4px 0px 0px 0px;
color:#333;
background:#eeeeee;
border-top:#ffffff;
border-bottom:#ffffff;
}
#3-Widget a:link {
color:#006699;
text-decoration:none;
}
#3-Widget a:hover {
color:#c06000;
text-decoration:underline;
}
#3-Widget a:visited {
color:#808080;
text-decoration:none;
}
#3-Widget h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#3-Widget ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:#333;
}
#3-Widget ul li {
line-height: 1.8em;
list-style-type:none;
border-bottom:0px solid none;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rfL33IQr8ITIvw8GLrxH7EPe32Stw_UmynXZA7lEKzFc9-ZkJoR2w_P-bNXSeB1BtSGusoAUsG7TZGOqF1QeVUfmWQ7w-aOihSTCz2fR2qINN1bmMG9kaak1X1tmG0MtKsauMn_txSc/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}
#3-Widget1 {
width:299px;
float:left;
padding:0 20px 0 20px;
}
#3-Widget2 {
width:299px;
float:left;
padding-right:15px;
#3-Widget3 {
width:299px;
float:right;
padding-right:15px;
}
Keterangan :
Width : 960 => Bisa kamu ubah sesuai dengan ukuran Template anda.
Width : 299 => 'Panjang Widget' bisa kamu ubah sesuai dengan keinginan anda.
Biasa!!! kalau sudah di Copy Paste, jangan lupa Copy Paste juga script di bawah ini dan letakkan di <head> = untuk posisi 3 widget berada di atas dan </head> = posisi 3 widget di bawah.
<div id='3-widget'>
<b:section class='3-widget' id='3-widget1' preferred='yes'/>
<b:section class='3-widget' id='3-widget2' preferred='yes'/>
<b:section class='3-widget' id='3-widget3' preferred='yes'/>
</div>
Lanjutkan!!!
Untuk membuat widget menjadi 2 caranya sangat mudah ko!!!
1. Untuk membuat 2 widget :
Kamu hapus aja Scriptnya yang seperti ini
#3-Widget2 {
width:299px;
float:left;
padding-right:15px;
tapi jangan lupa, hapus juga Script yang menyerupai di bawah ini
<b:section class='3-widget' id='3-widget2' preferred='yes'/>
Simpan
Selasai
***Selamat Mencoba***
COMMENTS :
Don't Spam Here
0 komentar to “ Cara Menambahkan Widget / Tambah Target di blogger ”
Post a Comment
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda dan Saya follow juga. Blog 7ASK adalah Blog Do Follow, Terimakasih atas kunjungan Anda..!