កូដដាក់ប្រអប់ស្វែងរក( Search Box មាន៦ទំរង់) នៅក្នុង Blogger

There are many blogs that used a small rectangle to search in the blog, but the form of plain does not attract attention to him, especially visitors, many visitors and even when I was browsing through some websites and blogs do not pay attention to the rectangle for research, so these boxes for research are colorful and all tastes.

ដំបូង: Login Account Blgger របស់លោកអ្នក
- ហើយ: ចូលទៅ Add a Gadget ==> រើសយកពាក្យ HTML/JavaScript
- ចំលងកូដខាងក្រោម

Figure I

Its code

<style type="text/css">

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

Figure II

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG7_5A4tcfKW3gPOkKWDAlBJdsAsUMuYyq1xE-dTi6_1g_c2C1KMYTQgsmfaxjHzlPYtZfKEL8Al-ga1P5r-hhYvR7iL4iAFeiJkeGoBbFYmGAiJx5hQ11f_jbXC5xBJbqkroH1aO44Mh/) 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>

Figure III

Its code

<style type="text/css">

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

Figure IV

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiU8LqUpIyBykyeD-VIWyAE2eCSmTiLpTFXhyphenhyphen-WPuJKzZH4KFe58vwElevQBzzPjsx4zhcF-T-T0z2kxj2rTTmog1zM79TxUdU3Smc9D42_uP52BHHu3_2N3h8ZBMINXehI7_yDXpRB7TK/) 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>

Figure V

Its code

<style type="text/css">

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

Figure VI

Its code

<style type="text/css">

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