vibrasix: Cara Menambah Kotak Widget

Setelah muter-muter cari info di Mbah Google , Akhirnya terjawab juga salahsatu pertanyaan saya selama nie . Sekarang saya udah bisa nambahin kotak widget diblod saya . Ok , jika Sahabat Vibrasik ingin blognya ditambahin kotak widget , Ea 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 , Copy Paste script yang diatas tadi, sekarang Sobat 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/AVvXsEhn9Ps5oTZtY6IgZc0pE9KgUrNvyKpU2fFQ_bSTx2JYYFiiKPIYuGmnmzlCoFJIvuK7SPKDYfx6ylVJKfW9Ga7sMkzbueC5r8rgNniGi2jZHzx4PwlKfh_9N2HHQzioUwoZ4FMA-Nnw2dM/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 sobat ubah sesuai dengan ukuran Template sobat

Width : 299 => 'Panjang Widget' bisa diubah sesuai dengan keinginan sobat

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 Ea

Lanjutkan!!!

Untuk membuat widget menjadi 2 caranya sangat mudah ko!!!

1. Untuk membuat 2 widget :

sobat hapus aja script 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

"Salam Blogger Satu Jiwa"
By : Qiqie "Vibrasix" Sidqioe

21 Januari 2011

Cara Menambah Kotak Widget

2 komentar:

Daftar Blog Saya

Labels

Vibrasix