Cara Membuat Search Box Untuk Blogspot ( Style & Cool )

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Assalamuala’alaikum wr. Wb

Blog Si Taufik-Search Box atau kotak pencarian berfungsi untuk menemukan artikel/posting yang terdapat pada blog, dengan adanya fasilitas tersebut pengunjung akan dengan mudah mendapatkan artikel seperti yang mereka inginkan, sehingga penggunjung tidak perlu membuka daftar isi blog maupun membaca judul artikel satu-persatu.

Search Box merupakan fasilitas yang sangat penting dalam sebuah blog, bila cobt ingin menggunakannya kedalam blog cobt caranya sangat simpel dan tidak rumit karena kita hanya menggunakan kode CSS saja dalam membuatnya.
Untuk cara menerapkannya ke blog, Langsung Cekkidot…!!!

Langkah-langkah Membuat Search Box
1. Login ke blogger 
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, lalu masukan salah satu kode CSS dibawah ini:

Style 1

><style type="text/css"> 
  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TMSWAUwbIGBB35NiOwKC4APwXcJJOzbdT5DNxPRjwHVtw0E-DUQZf6zyzFGipPqM-Pdba5HhcJ5Sw_9_zrQUftEuFXaktGaZJHG5Oz2_PG0kHrcsRaMOOWv_4OA6MMiI6MJubhw8uXI/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

  
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> 

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div>

Style 2

  
<style type="text/css"> 

  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRyE2_uz8cn_yVxakak5QEWZK4q2tGxMPDV2rinOShVWCxV4kN-GXuXcilakpzKkWXMUMqGcpJZ6dWNGzxXQWrSLN_0ll3-pbwtrkPVPpuien-23spsy_w1N2G_feFBrBHv_DRoNqlhoI/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

  
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> 

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div> 

Style 3

<style type="text/css"> 

  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIboji6oyFs3PoQ83UIn3UH9t6uB9RgWFWP2iIB03BIQm4PizDVFFhYuC7KtG9dyC_5-eQQjJpvlt4tkh6DbbOdQ73gQqr1KihWRkDEOBkgAudrJrQTGR-7oQ0XvCpTsKz7vLmNKoYZM/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

  
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> 

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div> 

Style 4

<style type="text/css"> 

  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDywYnV0VhcAs_vPdUj9c_21Ou6yzT7bXra9ZhAE-QHGJenkg17rW6zooO51lyO5kFOmQuLOA2d71gpTTWpmUbUX7pCZPu2wrq7p1GwZRLEBnU-pFqVaF9I77wRCSFQwD9H-ckuFKEk4/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

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

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div> 

Style 5

<style type="text/css"> 

  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAoSii9rHNdWITI_x6eyd1epA_7i1f8Pkd8ftl8LY89VY14-dwEusq2IMQbJye8bW9qprag7MkwnHTxAUEjElWL9U8uR5EMEn6GVzOFcdvC_loyJ6vyNhpaLz3yY59ql61qhtZTCB8KQ/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

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

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div> 

Style 6

<style type="text/css"> 

  
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQCcHJeEgkeMECFvs_fMFDxfpUr19McODUpKKNDmIeJAOuYfbHi2de-q43MXn09xJ9ZqoZFMkGeD1i7XcOnoxGRklIK_06jr5JwnZQ2kBO9CwBdHdsFQIg1fH9pqCQpYXu2nVPLe-Gnk/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 

  
form#w2b-searchform{display: block;padding: 12px;margin:0;} 

  
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} 

  
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 

  
</style> 

  
<div id="w2b-searchbox"> 

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

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

  
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 

  
</form> 

  
</div> 

Sumber : http://kode-blogger.blogspot.com/2011/08/search-box-simpel-dan-keren-untuk.html