Membuat Search Widget Blog sendiri

Dengan Search widget,pengunjung dapat mencari artikel yang mereka butuhkan dengan cepat.Banyak cara untuk membuat search widget ini.Tapi kali ini saya akan beritahu tentang cara membuat search widget rancangan kita sendiri.

• Masuk dulu ke akun blog kalian,
• Pilih rancangan,kemudian klik edit html
• Cari kode ]]></b:skin>
• Copy dan paste kode ini di atas kode ]]></b:skin>

#searchform {

position:letf;

top: 20px;

right: 0px;

background: url(http://sites.google.com/site/anasku2000/search-back.png) no-repeat right bottom;

height: 59px;

width: 210px;

}

#searchform #s{

background: #ffffff url(http://sites.google.com/site/anasku2000/form-field-bg.gif) no-repeat ;

height: 17px;

width: 148px;

margin: 30px 5px 0px 10px;

padding: 3px 7px 2px 5px;

color: #999999;

border: none;

}

#searchform #searchsubmit {

background: url(http://sites.google.com/site/anasku2000/searchbtnnk7.png) no-repeat left top;

height: 24px;

width: 24px;

border: none;

text-indent: -999%;

line-height: 1px;

margin-top: 6px;

}

• Ganti kode warna merah dengan gambar backgroundnya
• Ganti kode warna kuning dengan gambar background formnya
• Ganti kode warnna hijau dengan gambar tombol searchnya
• Untuk emlihat contohnya,buka kode yang diberi warna
• Kemudian simpan template
• Setelah itu,klik lagi edit laman,pada jendela rancangan
• Pilih Tambah gadget,kemudian cari HTML/Javascript
• Pastekan kode ini di kolom konten

<form id="searchform" action="/search" method="get">

<div>

<input type="text" id="s" value="" name="q" />

<input id="searchsubmit" value="Go" type="submit" />

</div>

</form>

• Kemudian simpan,dan lihat hasilnya

Anda juga bisa memasang search widget yang sudah disediakan,tanpa harus merubah kodenya,dan hasilnya seperti ini

Link :sutry95.blogspot.com.