Cara Menambahkan Widget/Tambah Target di blog

Posted by Everything I Love 0 komentar

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("http://lh3.ggpht.com/_w3vbLlHM5kg/SbaWQmXKL8I/AAAAAAAAAEc/W7TmnpAs0x4/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>


Jangan Lupa di Save lagi ^_^

Wajib di Baca

Silahkan Tekan Tombol Dibawah Ini



Hehe gak deng becanda
Gak ada yang penting kali, hihi
Cory yua^_^

Sekarang bacanya dilanjutin lagi yach!!!
tapi ini di Tutup dulu, kant gak penting, hehe

Bye Bye


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***
Related Posts Plugin for WordPress, Blogger...