CARA PASANG KOTAK PENCARIAN (SEARCH BOX) DI BLOG

Dipagi yang subuh ini mumpung otak lagi fresh mending di isi dengan hal yang bermanfaat :D. kali ini saya akan share cara memasang kotak pencarian blog atau yang lebih dikenal dengan search box. 

search box ini berfungsi untuk mempermudah pengunjung kita menjelajahi isi blog kita. mereka dapat dengan mudah mencari artikel blog kita dengan modifikasi kata di kotak pencarian.

langsung saja begini carany, cekidot...!!! :

•  log in ke akun blogger kalian
• klik rancangan -- add gadget --pilih HTML / Java Script
• lalu masukkan atau pastekan kode dibawah ini (silahkan dipilih sesuai dengan minta sobat yaqindlive)

kode dibawah

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimByNowZP5dIxvZjl67YVJb9bsgywmLUn-4jNoygqgT_SbD_kEKWHz4yvh0pxnzP_SDGehyVQYsSP2BGHVp9_3dAEPfjipZ_dKaMeaWDP6IQlgId6gIQNn8Vu56wvgJpqNXSNGoh1Enuw2/) 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>

Kode Dibawah

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFF8HyTFGzLnHorXxAFYAg0EDwOqEWSSTTKHNnGOClqOulkV1-iiTQYjK3F5XDUXR1y4KFuIWt-NPLrDrjTxhvgq8us_lDTre5ztV6xgXj36R158oqvP6gku5QmEu6VzdXBqBIuLsMPjwt/) 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>

kode dibawah

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSS0GliDIapSWopCmh2qaj5SmYku4m2MGZBBuAZqb-ubrf-yBHtX0w4ZmCiVPj5z0uTPbaUfV21pR_pMLR8ima2l9zfGDKv242jV9NZ0497uj8PFw6qLg9TvOHqRjKiCLVejpSp8sVQDJy/) 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>

kode dibawah

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglt736n1lc_cC3nC-11jovvHwY7Oq23M00tCk09pI0Lo4ZIGYPImmo13irWfEy-_ENQnhdPcYVe6PY6ys6cOFvHnUeQ05mPzUpXwDdTKDmigM2kIjZvSy56DhPgTAmP0Wh6u-dxGaZq33S/) 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>

kode dibawah

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJMyTijbvBrQ0BRi27ZrwTZ3PLhoMrGW_dtBZ-knH9LfRiLLbVlYcbevSGvWABgXOyvIHs5oArTW4mLu3BExtso11SCl4R9kBR3iMa7rgtlnR5OdMsTuVwTnxGG1C1kzVkW2Ehz6OZopel/) 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>

Jika anda kesulitan dalam memasangnya harap tinggalkan komentar . hehe
selamat mencoba 

Sumber : Blog Otowebsite

..: Semoga Bermanfaat :..