10 Fashionable Advanced Search Box For Blogger Blogspot

The search box is an of import business office of whatsoever Website or Blog. With search box, your weblog visitor tin easily uncovering the information that he/she desire to see. And if you lot volition direct the fashionable search box for your blog. It tin attract people to search on your blog. In this post, I am going to order 10 fashionable Search box for Blogger blog. That tin brand your weblog to a greater extent than stylish. So let's start. Also read this: How to alter mouse cursor inwards your Blogger blog.

How to add together custom search box inwards Blogger blog.

Go to the blogger together with log inwards your account.
Now select your weblog where you lot desire to add together the custom search box.
From your weblog dashboard click on the layout option.
Click on the Add Gadget link from a department where you lot desire to demo the search box.
It volition opened upwards a novel window. From this window select the HTML/javascript widget.
Now a novel page volition appear. In this page, you lot volition run into a text box.
Enter the next code into the search box. And click on the salvage button.

1. H5N1 uncomplicated search box.

<style>
#hob-search
{
padding:10px;
}
#hob-submit
{
border:1px venture #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#hob-input
{
border:1px venture #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:180px;
}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

2. H5N1 uncomplicated white search box.

<style>
#hob-search
{
padding:10px;
}
#hob-submit
{
border:1px venture #111;
background: #fff;
padding:5px;
color:#111;
font:14px verdana;
border-radius:5px;}
#hob-input
{
border:1px venture #333;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:180px;
border-radius:5px;}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

3. H5N1 dark search box for blogger.

<style>
#hob-search
{
background:#333;padding:10px;
width:260px;
border-radius:10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;}
#hob-submit
{
border:1px venture #333;
background: #000;
padding:5px;
color:#ffffff;
font:14px verdana;
border-radius:5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;}
#hob-input
{
border:1px venture #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:180px;
border-radius:10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

4. Green search Box.

<style>
#hob-search
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:260px;
padding:10px;
}
#hob-submit
{
border:1px venture green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
border-radius:5px}
#hob-input
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px venture #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

5. H5N1 beautiful ruby search box.

<style>
#hob-search
{
background-image: -moz-linear-gradient( 90deg, rgb( 255, 32, two ) 0%, rgb( 251, 138, 132 ) 50%, rgb( 255, 0, 24 ) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb( 255, 32, two ) 0%, rgb( 251, 138, 132 ) 50%, rgb( 255, 0, 24 ) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:260px;
padding:10px;
}
#hob-submit
{
border:1px venture #8e0202;
background: #8e0202;
padding:5px;
color:#ffffff;
font:14px verdana;
border-radius:5px}
#hob-input
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px venture #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

6. Stylish dark search box.

<style type="text/css">
#hob-search{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgvS6yAMTwZsggy5yjyoUKlKkYb_i1NsheuTZRW95Tm64s6KGV8m_CC_8aqlZGI8Cis_sue6WWd_x_QzK6yPkD1rQVcYDpgMHjfyxsiqnzRL5qkuGArD902viBjZ7QJlxtDWssS1FlJ8/s1600/helponblogging.blogspot.com-search-box.png) no-repeat scroll centre midpoint transparent;width:307px;height:50px;disaply:block;}
#hob-searchform{display: block;padding: 10px 12px;margin:0;}
#hob-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="hob-search">
<form id="hob-searchform" action="/search/max-results=8" 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...";}'/>
</form>

7. Wood mode search box.

<style type="text/css">
#hob-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEoqo78p5GjBD8ODqmJ2ORE3aHS_eo8modUQ5r-7G897ESKvJHxk_uDyT_75rCe9tma4Jo9ijdScFHxmJTPtgJVXTqWQvTIxPRl0rJC4o_GCp5J9kGK8A-c84xtskEWq_RDG-u442f0F0/s1600/helponblogging.blogspot.com-wood-style-search-box.png) no-repeat scroll centre midpoint transparent;width:307px;height:50px;disaply:block;}
#hob-searchform{display: block;padding: 10px 12px;margin:0;}
#hob-searchform #input{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="hob-searchbox">
<form id="hob-searchform" action="/search/max-results=8" method="get">
<input type="text" id="input" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>

8. H5N1 beautiful white search box.

<style type="text/css">
#hob-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hRwohLkRwovzo8lOTcSre3YLd3xoJOfV7Wlol0kF6E4uaVoCUeduSAP26Xbe21D99h0k4Gs42t1Gmf71c4hKu1JsAPBvdz9sC9BeJeyyZ8a3xgX64aN24UAjUCjn7guaDaI4Sb4s3HE/s1600/helponblogging.blogspot.com-search-box-stylish.png) no-repeat scroll centre midpoint transparent;width:307px;height:50px;disaply:block;}
#hob-searchform{display: block;padding: 12px;margin:0;}
#hob-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="hob-searchbox">
<form id="hob-searchform" action="/search/max-results=8" method="get">
<input type="text" id="s" name="q" value=""/>
</form>
</div>

9. H5N1 pinkish search box.

<style type="text/css">
#hob-searchbox{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJH7dW3Td_jv4IUtFvXADnKuZtZgG3Rw40spSpx0cKfv6vgULP61euClrWKDStJvkMHrfhR-N36cGH1m9EJGOYdKY1fPf115YRXeZj3LqbRrrR9MbfvadM5jXTty3hWfubO1xoUHCgVgc/s1600/helponblogging.blogspot.com-pink-search-box.png) no-repeat scroll centre midpoint transparent;width:307px;height:50px;disaply:block;}
#hob-searchform{display: block;padding: 12px;margin:0;}
#hob-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="hob-searchbox">
<form id="hob-searchform" action="/search/max-results=8" method="get">
<input type="text" id="s" name="q" value=""/>
</form>
</div>

10. H5N1 search bar that increases on mouse hover.

<style> #hob-search
{
padding:10px;
}
#hob-submit
{
border:1px venture #fff;
background: #0686fd;
padding:5px;
color:#ffffff;
font:14px verdana;
border-radius:5px}
#hob-input
{
border:1px venture #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:100px;
border-radius:5px}
#hob-input:hover{width:200px}
</style>
<form action='/search/max-results=8' method='get' id="hob-search">
<input name='q' id='hob-input' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='hob-submit' type='submit' value='Search'/>
</form>

That's it. That was the search box for blogger blog. Thanks for reading my this post. Keep visiting for to a greater extent than useful posts. If you lot convey whatsoever Question most this post, you lot tin inquire me yesteryear dropping your comments below.