5 Exclusive Blogger Search Box Widgets: Stylish Search Boxes

Blogger search box widget is a major considerable part of your free blogger blog. Obviously, here are the best 5 Exclusive Blogger Search Box Widgets: Stylish Search Boxes you have to think about. In this case, there is no option to avoid the search box widget for blogger like popular post widget, recent post widget, email subscription widget etc. In fact, a beautiful and stylish blogger search form will let your readers navigate the blog more efficiently.

The importance of Blogger Search Box Widgets

Actually creating a blog on blogger is a matter of few clicks but becoming a successful blogger is pretty tough. Basically, we have to focus on some vital points after creating a blog. Among those, Content, SEO and widgets are highly mention-able. Although blogger is one of the most popular free blogging platforms but the default blogger templates have not enough widgets to have all latest features and functionality.

For this reason, we have to use many third party widgets and blogger templates. Sometimes, after using some default blogger templates do not satisfy us because of the normal styles and outlook of those widgets. That’s why we search for some custom widgets style provided by many web designer and developer.

In this case, we can give the example of the default blogger contact form. If you add the widget, you will see a very simple form. In the same way, you will find the default blogger search box. Therefore, I am going to customize this search box to make it more attractive and user-friendly. You can increase the website usability dramatically by using these free blogger search box widgets.

List of Blogger Search Box Widgets:

You may have seen many attractive blogger search box widgets in different websites and thinking to improvise your own search box style. Also, if you are trying to make your default blogger search boxes more professional looking, you are going to love this list. I am going to provide the complete code for some professional looking search boxes. Simply copy and paste your desired one from below.

blogger search box style-1

<style>
#search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;}
#bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;}
.bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;}
.bo-sb-buttonwrap:hover {background-color: #c9302c;}
.bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;}
.bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;}
#bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;}
#bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-danger">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

Blogger Search Box Widget Style 2:

blogger search box style-2

<style>
#search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;}
#bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;}
.bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;}
.bo-sb-buttonwrap:hover {background-color: #31b0d5;}
.bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;}
.bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;}
#bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;}
</style>
<div id="search-box-info">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

Blogger Search Box Widget Style 3:

blogger search box style-3

<style>
#search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;}
#bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;} 
.bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;}
.bo-sb-buttonwrap:hover {background-color: #286090;}
.bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;} 
.bo-sb-submit:after {width: 8px;left: 10px;content: '';top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;}
.bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: '';left: 21px;}
#bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;}
</style>
<div id="search-box-primary">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

Blogger Search Box Widget Style 4:

blogger search box style-4

<style>
#search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;}
#bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;}
.bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;}
.bo-sb-buttonwrap:hover {background-color: #449d44;}
.bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;}
.bo-sb-submit:after {top: 9px;border-radius: 50%;content: '';height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: '';transform: rotate(-35deg);}
#bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;}
#bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-success">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

Blogger Search Box Widget Style 5:

blogger search box style-5

<style>
#search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;}
#bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;}
.bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;}
.bo-sb-buttonwrap:hover {background-color: #e6e6e6;}
.bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;}
.bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;} 
.bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;}
#bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-default">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

How to Add Blogger Search Box Widget?

Adding a custom blogger search box widget is very easy. In fact, it is a matter of few clicks. Simply follow my instruction to add any of the above blogger search box styles to your own blog.

1. Login to your blogger account and go to the dashboard. From the left menu, Click on the “Layout” section.

2. Usually, we use this blogger search box at the top of our sidebar. So find the sidebar section and click on the “Add a Gadget” link.

3. A popup will come up with many widgets. Find the “HTML/JavaScript” gadget from the list and click on the blue plus button to add this in your blog.

 

Leave a Reply

Your email address will not be published. Required fields are marked *