Memasang kotak search/pencarian di blog (terbaru..!!)

Kali ini saya membantu anda untuk memasang kotak pencarian atau kotak search. Berbeda dengan kotak pencarian yang biasanya, yang ini sudah didesain sebelumnya di design3edge sehingga kelihatan menarik dan dapat disesuaikan dengan warna pada blog anda. Bagi anda yang sudah punya tidak perlu dibuat
lagi tapi bila mau mencoba silahkan.

Langsung saja, silahkan login terlebih dahulu. Masuk pada menu design atau rancangan dan tambah widget baru. Pilih HTML/Javascript dan masukkan salah satu script code dibawah ini sesuai dengan warna keinginan anda.

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqcUF7YJpwDB8xYBObgEWzKe4S3F0rIN1kU__IpDM40L5jO5Z6O1ZqCx07u67dtxiCbIa40jI9WomkORlWdIcyRBU9-Tuce7iaap2HsEUW8DeQ84mhZX_4vgpqerKrb0Er9PUuCNu7Jg/s1600/style1.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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6X3GBhsOPUzqoABF00Jmt_UeT2SLCFTGGOWXjSKqjrkoobMD_a5fk5Tod_SmU9BT6vClCAy2xl1X4welZUqWVvxYE4eYjOcm_PljoNUw4g-S3c4MTxy-0LZj62QCUxZ7fIRH2jiL_VRs/s200/style2.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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs632vZ0nwE0e78RzoBj2pkc_afrTc73DO6uzof-uZ5k2WrIuksGlyHeaTqHXhlVVesN2BdIhgrvXRhApYZgM_Cj25_8czeLyD6H1Zi8q8OBEeZT0FumZLd4XpeCnlq_FUCOZYfUoVLgs/s200/style3.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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogmTlJq61fRYORyuGf6tN5_erzePVX98PfLHO53P01dDgz2zpwNsTYVLPc_Lr4qtHPw-z5c3HvHkjRPLtowLP246RgvhfgXWirFWCyMES5kRFXFKnVERdZXrWsejS6ftusgnskRhGG5E/s200/style4.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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYCxvSPA7AMRrNhifhLZ_z9T7OxmPrp9jzMKGajtjgqCmQvNVNY_9KJQPymwW3aoIxRWxT4RgX-7yvqTlZRAlfLkj3kplGlA8ricZP7_mEdXZp3a17EEDAzotMya9Z8O45VH3NjR2M2Q/s200/style5.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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhb3z3h6uSYp3nJQZoiPvjegqRA8HhBvZIiX8cscCfvnffGhu7ewBVwkoQuUUHw2nEbuqHJ-ehPqN4c4L9rmKLm61l9nbN29wgNHqYAm-stjIocg3NJPo9Sk-6EuqYnlJ3u1X8K9j2JYc/s200/style6.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>

Selamat mencoba, semoga bermanfaat...

Artikel Terkait