10 Unique & Elegant Blogger Search Box in HTML Widget (With Demo)

Ever wonder why blogger search box are important? Well, search boxes plays vital role in having additional page-views. Visitors who are coming to your blogspot blog either directly or through search engines, want to search about any post by typing keyword in search box. If your site’s search box is stylish, it will definitely attract visitors..

Similar to blog templates, design of blogger search boxes is also important to make your site more catchy. Beautiful looking sites surely get huge number of subscribers. So, in this post i am going to share best styles for blogspot search boxes. You can choose any of the below for your blog according to its theme.

How to Add custom Blogger Search Box

1. Login to your blogspot blog.

2. Go to Layout Option.

3. Click on Add a Gadget wherever you want to add search box.

4. Click on HTML/JavaScript and paste the custom code from below list, you like the most.

5. Click save.

List of Different Blogger Search Boxes

1. White Backgroud White Button – Square Search Box

[themify_box icon=”note” color=”blue”]

<style>
#Search {
display: block;
clear: both;
margin: 10px 0;
}
#Search #input {
background color: transparent;
padding: 7px 15px 7px 35px ;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 ;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#Search #submit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), colorstop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FBFBFB’, endColorstr=’#F4F4F4′,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id=”Search”>
    <form action=”/search/max-results=8″>
        <input name=”q” id=”input” type=”text” />
        <input value=”Search” id=”submit” type=”submit” />
    </form>
</div>

[/themify_box]

2. White Background Grey Button, Rounder Search Box

[themify_box icon=”info” color=”blue”][html]
[/html][/themify_box]

3. Elegant Green-White Blogger Search Box

[themify_box icon=”info” color=”blue”]

[/themify_box]

4. Red-Grey Blogger Search Box

[themify_box icon=”highlight” color=”blue”]

<style type=”text/css”>
#nbc-searchbox{background:url(https://3.bp.blogspot.com/- A_B_jk1yrIY/Ue7A4JLAVlI/AAAAAAAAAhs/JPrpQvYA-7w/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=”nbc-searchbox”>
<form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”>
    <input type=”text” id=”s” name=”q” value=””/>
</form>
</div>

[/themify_box]

5. Black-White Blogspot Search Box with Red Button

[themify_box icon=”note” color=”blue”]
[/themify_box]

6. White-Orange Hover Effect Search Box

[themify_box icon=”note” color=”blue”]
[/themify_box]

7. White-Blue Blogger Search Box with Grey Line

[themify_box icon=”note” color=”blue”]
[/themify_box]

8. Light-Dark Grey Blogspot Search Box Widget

[themify_box icon=”note” color=”blue”]
[/themify_box]

9. Grey Animated Blogger Search Box

[themify_box icon=”note” color=”blue”]
[/themify_box]

10. Green Stylish Blogger Search Bar Widget

[themify_box icon=”note” color=”blue”]

[/themify_box]

Final Words

I hope you like this list of  beautiful custom Blogger Search Box. Find the best suited search box widget for your blog and let know your views in comments!