Add the Search Box in Your Blogger - Six Forms ~ Log-Tutorial

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.

So followed me this explanation is a simple way:

To begin using this new gadget, go to Layout> and click "Add a Gadget" and
select HTML/JavaScript

Figure I

Its code

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWtxA6u8W5XShVCSAGUQcV2QA-k9H0tNX4modoC7qLtgtCQbBEW4FS0nfu2zbKGkJLY8JtXOVTPGrBXlPo_rxe3J1dRCqaMG1adfzpWMY3pSXfGllYdQSn8XRDdZ8-zCL04T44M0VAEdk/) 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/AVvXsEgzTAJfmkXkI6wZyNjWEoHv98Jso2bLy5TmxrtK08S7ZIsJLdTwsswvR4Qo9Bz93xTIxLs6oesOG5eY3xLxYkdzOTlT1TaeIkMAnPJ9Sndjv-pSsmLeN2x3XOf8mbCXsHqkSpVcHl3j6Na6/) 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/AVvXsEg17wtUbJaXE0DOhYD6oFvhszE-PfIctrt-vFMw_xBnVSnQ5Ik3v0R0kfH5CSbGPyX3l_fKLbFaFJ9axmhepcW7F5yQBPoygFpUkdbVruuI1Wd7_2YPlYJqJGTjaUU4QicuyejoiF_iFPgc/) 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/AVvXsEjeWvpVToc57tEW6KkzHFN3idAVw-q5JoE3FXFcfjf1CaR_SGSC32_z2qwk7hxiWSDcA0xOm6acd9xHuzoF0yIIZmoNW5CBgkSkKa1nc5ao3cyNXkJwffUwHGDuLYQctLThKdR79_xHVNDr/) 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/AVvXsEjnJBNHOymAlGse6boL2H5xtBkCAddjeHdg-vMeu2von0B1fjvhV2aKiXMw2w6na_1_BfqehjIgVxOF8q4eSPw2F1X6tZX_U3w_1x0ToglWpcnuQuBsu40chPxc6rIHJN5ar9Fz29z8e85J/) 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/AVvXsEiRmOMEbAcLgVLm4hTEmqW5WJ47W1Hf4Rij3Y7vBrwANai5KRgEV71PmYvaJEEP0239Vjmmqfpp5wQLtoJsIhGUeH3007sIPBkhNpmIjj5YXLpE-pyWuh7hYDM8_1C687cVckXs8lcy1QqV/) 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>