Search Box Collection For Blogger

Hey friends today i will show you how to add beautiful search box to your blog,I am having 4 good looking search box right now so I will share this with you in this post.

For adding any search box you like below just copy the code and paste it in html/javascript and save it.

Simple Cool Css

<div class='topsearch'>  <div class='clerfix' id='search'>      <form action='/search' id='searchform' method='get'>          <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>          <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmT5WLHOWC5KZKuokYY_5G9IaMlzOH1mEROcydJuwceEykmVZ1qw6wVdBltaIO1spWl63SpI41Y2etOXTfFkr6tuiW-mXbbfCZw-dknvJC43mtgsSrynZD9ntTn_eOgk0RpokMhk4Qjkc/s1600/search.png' title='Search' type='image'/>      </form>  </div>
<style>
#search{width:300px; margin-left: 10px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NGMDDOrEVlCPlRoVrAO5csAw-cDRpACh5GwgUMGbJbS__SRC2kmvDULsn8bURAWoSdeq2SxxheB7Ty1DLM2TzpkTChdefxUSfVcm6ljLgZUfvJLv_lUwP5m-YC9wII_QWWBBvEYwYcQ/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}
</style></div>

Sleek and Cool

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjeevJ4kqGLlJXWaP2jCAZ57LE6Q6TYE1Dyx7UfAeXhXS1-5qv42iHHHpkbNFfPaXr3DUvury_DFKUJ3aXknC__-zWkHrOGggC-02LR6yBOypzp4qYziQ0GmQIf9kbYrQUfVqfUNdJGo/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-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>

Sleek And Cool Style 2

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVLVybkEEShXGDglTdcYUo6z_CN0k11Vffh79VbIj6HnlMkV4sneXBQNiQL2qvIBZnbPO9TVuCysonal2OgGUhY8n2T41pypvRZ_zjLRY69caBAfbHa3d7WC4V6Z0E1Ltt1olpa6T_wA/s400/bluez+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-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>

Beautiful and Fresh

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgYHl2upiMr4xQlrA2HF4T2l75sBiFN0HtgEd3wh6Vuoq42qPTvD5oUM78AStUjtiluxPsLHYjsndFlWZPWHvett0OqXmGApD94KvXAJhjw7wMAXGOXn9w-b4wCw4c2jWgwkSN2_3Sk_8c/) 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>

Dashing Red

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJKUDetQa0nphTQD4bVmWMhzunc-RSwfpdaRqSgLbEKlSgracngdl3foQb4j5nbeJjBXIlpE4KDAF3hiU3m2d15VW3QNlRTb87suZXVLR1K_k6t5ZgQ-Sm8W4k9Bu76yA3PP5Z-46idz7/) 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>