កូដដាក់ប្រអប់ស្វែងរក( 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

Figure II

 <style type="text/css">

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

<style type="text/css">

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

<style type="text/css">

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

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmai2koo3NWjDp9uOCcTCNp885tBwbVW6dq4cU96aVTGjg5CkFWR9c-6NF0yvb3-yfZ_9IFdqSjB4xS1u-o7uWFvQDZjLn0Tm0NJyQO8602uTBmsAB-9LPCjrjcR4wEDwpgV34OjHWBoM/) 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/AVvXsEgKfyFfHI9egFTeqgAX6z3AqJ_TD4cKqRt2DeTmPMZmPnXuHgew5OTwXpIucJyQPTMuT1IBdZ4wuvXD_YEoAq4nTNxkY_ynWjHUWBkzoujxfNqpeLuXU7osPMvbXQ2pKlCa4UkmINtIUBnS/) 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>

- រើសទំរង់ណាមួយដែលពេញចិត្តហើយ ចុច Save ជាការស្រេច។