Wednesday, February 15, 2017

10 stylish advanced search box for blogger blogspot

The search box is an important part of any Website or Blog. With search box, your blog visitor can easily find the data that he/she want to see. And if you will choose the stylish search box for your blog. It can attract people to search on your blog. In this post, I am going to give 10 stylish Search box for Blogger blog. That can make your blog more stylish. So let's start. Also read this: How to change mouse cursor in your Blogger blog.
10 stylish advance search box for blogger blogspot

How to add custom search box in Blogger blog.

  1. Go to the blogger and log in your account.
  2. Now select your blog where you want to add the custom search box.
  3. From your blog dashboard click on the layout option.
  4. Click on the Add Gadget link from a section where you want to show the search box.
  5. It will open a new window. From this window select the HTML/javascript widget.
  6. Now a new page will appear. In this page, you will see a text box.
  7.  Enter the following code into the search box. And click on the save button.

1. A simple search box.
search box for blogger blogspot

<style>
#hob-search
{
padding:10px;
}
#hob-submit
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#hob-input
{
border:1px solid #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. A simple white search box.
search box for blogger blogspot


        <style>
#hob-search
{
padding:10px;
}
#hob-submit
{
border:1px solid #111;
background: #fff;
padding:5px;
color:#111;
font:14px verdana;
border-radius:5px;}
#hob-input
{
border:1px solid #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. A black search box for blogger.
search box for blogger blogspot

<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 solid #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 solid #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.
search box for blogger blogspot
  <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 solid 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 solid #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. A beautiful red search box.
search box for blogger blogspot
  <style>
#hob-search
{
 background-image: -moz-linear-gradient( 90deg, rgb( 255, 32, 2 ) 0%, rgb( 251, 138, 132 ) 50%, rgb( 255, 0, 24 ) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb( 255, 32, 2 ) 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 solid #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 solid #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 black search box.
search box for blogger blogspot
<style type="text/css">
#hob-search{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZQVnsPrJBTvgKSfTF-PDvghcUDq5bnr_v_18DFdRjUX4R0usZE7zcV15FPieuqck2McTfMTv2E5L_55yVdp4LWsHB67yRDgqe1FSgu9qW0bCXcTWyLA2JLwgK8xKUvVPRA7ep8N8QXs/s1600/helponblogging.blogspot.com-search-box.png) no-repeat scroll center center 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 style search box.
search box for blogger blogspot


<style type="text/css">
#hob-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHqoGbPqV-4SB1Q0g_7pwiMKFZ80oUBcztRPNvoD3i-gaUdOQMxqeDdqz7Wsh9XDcVr4SCA6DZoHrth19JusJFhGtePn_ndrFq3O0gGvZy983INxK_zykwiNuL1YNfZlhQKjeHXUDro4/s1600/helponblogging.blogspot.com-wood-style-search-box.png) no-repeat scroll center center 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. A beautiful white search box.
search box for blogger blogspot
<style type="text/css">
#hob-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Xsp6EyUsESnPOjGbZxdkjASohLYUjngjE42NFV55ncvacnNqkvy4pv0uPUjVDPLiNdB7WQJ4JIFy8hwtnc08FrQ8UxrvOJUvKkOJphLFbga_OkZKodEru2tnOVgHy-bw7HPP0BZgZMg/s1600/helponblogging.blogspot.com-search-box-stylish.png) no-repeat scroll center center 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. A pink search box.
search box for blogger blogspot
<style type="text/css">
#hob-searchbox{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CGot6hIZPMM8PLPygW5ah900v7XveS2S5HetU_x4QDmnc_2F-jk8YKkTB1fDZmVAfxwTuR4UTLEKGhh2r6aW-fv6-ZWNRV1LimKnahG-mygPVNxOLsX5I02lGCGvdUyUul54TZUKZwc/s1600/helponblogging.blogspot.com-pink-search-box.png) no-repeat scroll center center 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. A search bar that increases on mouse hover.
search box for blogger blogspot

<style> #hob-search
{
padding:10px;
}
#hob-submit
{
border:1px solid #fff;
background: #0686fd;
padding:5px;
color:#ffffff;
font:14px verdana;
border-radius:5px}
#hob-input
{
border:1px solid #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 more useful posts. If you have any Question about this post, you can ask me by dropping your comments below.


By - February 15, 2017
Labels:

1 comment:

Template Designed By 92TRICKS © Copy Rights All Right Receved
Scroll to Top