Membuat Search BoX di Blog

Widget Search sangat berguna para "Visitor" Blog Sobat, karena dengan adanya widget tersebut para "Visitor" dapat dengan mudah menemukan artikel yang di inginkan. Search BoX bekerja dengan cara menemukan kata kunci atau keywords yang ada di setiap postingan blog Sobat. Sehingga para "Visitor" tidak perlu bersusah payah membuka postingan satu persatu. Coba Sobat bayangkan, ketika Sobat berkunjung ke suatu blog, dan ingin mencari kata atau frase kata tertentu untuk dibaca. Namun dalam blog tersebut tidak memiliki fasilitas search, dengan terpaksa Sobat harus mencarinya sendiri dengan membuka postingan satu persatu. Beruntunglah bagi pemilik blog, jika Sobat termasuk orang yang sabar, Tapi hitung berapa jumlah orang sabar yang mau berlama-lama mengunjungi suatu blog, tapi lemah dalam fitur navigasinya??? Yah... ujung-ujungnya setelah satu kali "say hello", pengunjung pada kabur mencari blog lain yang lebih user friendly. Maka dari itu fasilitas search sangat bermanfaat bagi kelestarian suatu blog.

Sebenarnya Blogger sudah menyediakan Widget tersebut, namun widget tersebut tidak dapak di modifikasi agar terlihat lebih indah dan sesuai dengan template yang kita gunakan :/ . Jadi Vey lebih suka untuk menggunakan Search BoX buatan ini :$ .
Untuk membuatnya silahkan copy code berikut di Widget Html/Java Script Sobat.

<div id='search'>
<form action='/search/' method='get'>
<input class='searchtextbox' name='q' onblur='if (this.value == "") {this.value = "enter your keywords here...";}' onfocus='if (this.value == "enter your keywords here...") {this.value = ""}' type='text' value='enter your keywords here...'/>
<input class='searchsubmit' id='searchsubmit' name='search_submit' type='submit' value='Find it'/>
</form></div>

Dan masukkan Code CSS berikut di atas Code ]]></b:skin>

#search {
float:right;
width:260pxx;
height:30px;
display:inline;
margin:5px 5px;
background-color: #transparent;
}
#search .search_text_box {
width:190px;
float:left;
display:inline;
background:none;
border:1px ridge #eee;
border-radius: 20px;
-moz-border-radius: 20px 5px 20px 5px;
-webkit-border-radius: 20px 5px 20px 5px;
color:#fff;
font-size:13px;
margin:5px;
padding-left:10px;
}
#search .search_submit {
width:50px;
float:left;
display:inline;
margin:5px;
background: #010101;
color: #fff;
border:1px ridge #eee;
border-radius: 20px;
-moz-border-radius: 20px 5px 20px 5px;
-webkit-border-radius: 20px 5px 20px 5px;
cursor:pointer
}