stylish search engine for blog

It's Simple.....

Step 1: Click On Add a Gadget On Blog Layout Page.

Step 2 : In that Add Gadget window , choose HTML / JAVASCRIPT .


Step 3 : Now add following HTML in that window.



Style 1:

For this one:
<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmuvOJYpi_5X6kSL1IaDj_b3NztfPXcK6CZUiec9xQNha6G8Utwd5P1JJmjD20P0THY63XyrDMBEt2w7EQCBb-Y5yt1-XSXhhzNQX9Rz-8s-MEeiKWX-0R8G8F8rokFslCZylqk8riA/s1600/Yellow-Search-Engine.png) 
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2:

For this one:

<style type="text/css"> 

#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlropwwdqHDNpWUxsSLrCa8U6acGodzBLCEPP8qgepUj_4Ty9leNZdaX97me7PbvT0K7XuEVnkelxQiSRsuehQ9qeIWqRkMIN5pUJkZeKqTpnRed6Mr_bB3b0nHqYKBDeXuOqhG4JYag/s1600/Black-Search-Engine.png) 

no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 

form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}

form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 

form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 

</style> 

<div id="exe-searchbox"> 

<form id="exe-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 

{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Style 3:

For this one:

<style type="text/css"> 

#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqnkj-oaMoNEDWFGDGStBH_x4N7MLr5Lk42FJx4Mx6CCMyMxuwd7yqLhkpX60WH-V7DdrjA4EnCxr3l35iyJRqSBAloTVk8tW2xylEWHheNtgj0mOjJU9ZmVQQKoQBmf7QgjZ9nB4KUQ/s1600/Blue-Search-Engine.png) 

no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 

form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}

form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 

form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 

</style> 

<div id="exe-searchbox"> 

<form id="exe-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 

{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Style 4:

For this one:

<style type="text/css"> 

#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOQN0YrASk8S763DjMjyd5yYJVTsm2_o7u66Ji4TWdp6PN-Q3K1RC3RQwtZlLLRzaU3gAyx8vKvZfYvtEmn8ZTUw_f4nIcugCN3o70qvF11Z6SX8hYZBoJuHKrMPWN0zzlVP6jgVYbHg/s1600/Green-Search-Engine.png) 

no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 

form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}

form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 

form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 

</style> 

<div id="exe-searchbox"> 

<form id="exe-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 

{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Style 5:

For this one:

<style type="text/css"> 

#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_a51Y76am9yoUbMZdrwtPxG2T2nATWLyFqt8XbI4oCX5g_GLY-YcCVT9JSLaj7odHDZVVxtUPkB68GOU01B6nNgcm29Nza3n1k8mOQu6yGjMCLeRDCDDMSGXCCiNiTm8e0U_6QSR7g/s1600/Red-Search-Engine.png) 

no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 

form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}

form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 

form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 

</style> 

<div id="exe-searchbox"> 

<form id="exe-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 

{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>