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.
Table of Contents
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
<style>
#Search {
display: block;
clear: both;
margin: 10px 0;
}
#Search #input {
background color: transparent;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-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>
2. White Background Grey Button, Rounder Search Box
[/html][/themify_box]
3. Elegant Green-White Blogger Search Box
4. Red-Grey Blogger Search Box
<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>
5. Black-White Blogspot Search Box with Red Button
6. White-Orange Hover Effect Search Box
[/themify_box]
7. White-Blue Blogger Search Box with Grey Line
[/themify_box]
8. Light-Dark Grey Blogspot Search Box Widget
9. Grey Animated Blogger Search Box
[/themify_box]
10. Green Stylish Blogger Search Bar Widget
[/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!
