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 :..
7 komentar:
wah pada keren nih kotaknya.. ganti ah... terima kasih....
sangat bermafaat sekali gan ..visit blog newbie ane gan....http://cimploh.blogspot.com/
banyak banget kang script-nya, apakah ga memperlambat loading blog tuh ?
tq gan tas infonya...
MANTAP DAH TUTORNYA KAWAN
http://acemaxs31.com/obat-herbal-hernia-ampuh/
http://i-bikeco.com/
http://mas-galih.com/
thanks infonya gan
http://ramuantradisionalkita.com/
nice artikelnya, sangat membantu sekali :)
http://kedaijellygamatgoldg.com/
http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/
http://jellygamatgoldg31.com/
Post a Comment