Membuat Berbagai Macam Widget Search untuk blog

Hmm.. setelah 4 hari keluyuran entah kemana tanpa memposting satu artikel pun jadi kangen juga ingin posting lagi nih.. Padahal dari dua hari yang lalu sudah niat ingin posting. Tapi berhubung waktu terakhir pengecekan kapasitas blog ini yang hasilnya sangat membuat saya pusing karena ternyata blog ini sangat berat. Ya sudah untuk mengurangi bera dari blog ini, saya harus merelakan code-code yang kurang berguna diantaranya pengurangan code css, javascript, dll.

Masuk ke tujuan utama kita yaitu membuat berbagai macam bentuk atau style search box untuk blog. Nah untuk membuat widget pencari di blog sekarang gak usah susah susah.. ni caranya

1. Widget search dengan javascript

Login ke blog

Pilih tataletak

klik tambah gadget lalu pilih html/javascript

Copy code dibawah lalu pastekan pada form widget tadi

<script src="http://www.geocities.com/ebenk_789/search.js" type="text/javascript"></script>

2. Widget search box simple

Login ke blog

Pilih tataletak

klik tambah gadget lalu pilih html/javascript

Copy code dibawah lalu pastekan

<div class="style1" align="center">
<form id="searchform" action="/search" method="get">
<p>
<input id="q" onfocus="if (this.value == 'Cari Artikel ...') {this.value = '';}" value="Cari Artikel ..." name="q" onblur="if (this.value == '') {this.value = 'Cari Artikel ...';}" size="20" type="text">
<input style="padding-top: 3px;" src="http://img84.imageshack.us/img84/2457/viewmagsc7.png" name="image" height="19" type="image" width="20">
</p>
</form>
</div>

<div class="style1" align="center"><br /><form id="searchform" action="/search" method="get"><br /><p><br /><input id="q" onfocus="if (this.value == 'Cari Artikel ...') {this.value = '';}" value="Cari Artikel ..." name="q" onblur="if (this.value == '') {this.value = 'Cari Artikel ...';}" size="20" type="text"><br /><input style="padding-top: 3px;" src="http://img84.imageshack.us/img84/2457/viewmagsc7.png" name="image" height="19" type="image" width="20"><br /></p><br /></form><br /></div>

3. Widget classic search

Login ke blog

Pilih tataletak

klik tambah gadget lalu pilih html/javascript

Copy code dibawah lalu pastekan

<style>
/* cari1
----------------------------------------------- */
.cari1 {
margin:0pt;
padding:0pt;
}

.cari1 span {
margin:0pt;
padding:0pt;
}

#search{
display: none;
}

#sidebar form {
margin:0;
padding:5px 0;
clear:both;
}
.searchtitle {
font:bold 15px "Trebuchet MS", sans-serif, "Lucida Sans", Tahoma!important;
color:#fff;
}
#searchform {
margin: 5px auto ;
padding: 0;
}

#searchform #s {
height:15px;
width:130px;
margin-left:10px;
font:10px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}

#searchsubmit {
padding:0;
background:#000;
color:#fff;
border:none;
width:48px;
height:20px;
font:11px "Trebuchet MS", "Lucida Sans Unicode", Verdana;
}


#searchsubmit:hover {
background:#fff;
color:#000;
}
</style>

<div class="cari1">
<span>
<form id="searchform" action="/search" method="get">

<table border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td><input id="s" value="" name="q" type="text"></td>
<td><input id="searchsubmit" value="Search" type="submit"></td>
</tr>
</tbody>
</table>
</form>
</span>
</div>

4. Widget cool search

Login ke blog

Pilih tataletak

klik tambah gadget lalu pilih html/javascript

Copy code dibawah lalu pastekan

<style>
/* ----- cari ebenk789 ----- */

.txt_cari{
background-image:url(http://www.iconlet.com/icons/crystal09/16x16/search.png);
background-position:2px 2px;
background-repeat:no-repeat;
padding-left:20px;
border:1px solid #999999;
padding-right:2px;
padding-bottom:2px;
padding-top:2px;
color:#006699;
background-color:#FFFFFF;
}
</style>

<div align="center">
<form id="searchthis" action="/search" style="display: inline;" method="get"><input id="search-box" class="txt_cari" name="q" type="text"><input id="search-btn" value="Cari" type="submit"></form>
</div>

Udah ah.. kebanyakan pusing... Coba aja ya..
Klo masih gak bisa.. tanyain aja ya..