GeeksFlame

A Flame Spreading Knowledge

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.

custom blogger search boxes widget

List of Different Blogger Search Boxes

1. White Backgroud White Button – Square Search Box

blogger search boxes

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

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

[/themify_box]

2. White Background Grey Button, Rounder Search Box

custom blogger search boxes

[themify_box icon=”info” color=”blue”][html]<style type=”text/css”>
#searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie8 */
}
#searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
#searchform #searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 130px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}#searchform #searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie8 */
}
</style>
<form id=”searchform” method=”get” action=”/search”>
<input id=”searchfield” name=”q” type=”text” placeholder=”Type here…” onfocus=”if (this.value == ‘Search…’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search…’;}”/>
<input id=”searchbutton” type=”submit” value=”Search” /></form>

[/html][/themify_box]

3. Elegant Green-White Blogger Search Box

Green search box

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

<style>
#nbc-searchgreen1
{
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:290px;
}
#nbc-searchgreenbox1
{
padding:10px;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchgreeninput1
{
-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> <div id=’nbc-searchgreen1′> <form action=’/search/max-results=8′ method=’get’ id=”nbc-searchgreenbox1″> <input name=’q’ id=’nbc-searchgreeninput1′ 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=’nbc-searchgreensubmit1′ type=’submit’ value=’Search’/> </form> </div>

[/themify_box]

4. Red-Grey Blogger Search Box

blogger search boxes

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

<code> &lt;style type=”text/css”&gt;<br /> #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;}<br /> form#nbc-searchform{display: block;padding: 12px;margin:0;}<br /> form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}<br /> form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}<br /> &lt;/style&gt;<br /> &lt;div id=”nbc-searchbox”&gt;<br /> &lt;form id=”nbc-searchform” action=”/search/max-results=8″ method=”get”&gt;<br /> &#160;&#160;&#160;&#160;&lt;input type=”text” id=”s” name=”q” value=””/&gt;<br /> &lt;/form&gt;<br /> &lt;/div&gt; </code>

[/themify_box]

5. Black-White Blogspot Search Box with Red Button

black white logger search box

[themify_box icon=”note” color=”blue”]<style>
#nbc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#nbc-searchblackbox1
{
padding:10px;
}
#nbc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblackinput1
{
-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>
<div id=’nbc-searchblack1′>
<form action=’/search/max-results=8′ method=’get’ id=”nbc-searchblackbox1″>
<input name=’q’ id=’nbc-searchblackinput1′ 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=’nbc-searchblacksubmit1′ type=’submit’ value=’Search’/>
</form>
</div>[/themify_box]

6. White-Orange Hover Effect Search Box

custom hover blogger search box

[themify_box icon=”note” color=”blue”]<style>
.form-container {
height: 49px;
padding: 0;
overflow: hidden;
text-align: left;
background: #f8f8f8;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
}
.search-field {
float: left;
width: 190px;
height: 34px;
margin: 6px 0 0 8px;
padding: 0 8px;
font-family: ‘Open Sans’, Arial, sans-serif;
font-size: 16px;
color: #888;
font-style: italic;
font-weight: 400;
background: #fff;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ffffff));
background-image: -webkit-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -moz-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -ms-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -o-linear-gradient(top, #f5f5f5, #ffffff);
background-image: linear-gradient(top, #f5f5f5, #ffffff);
-moz-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
}
.search-field:focus {
outline: 0;
color: #666;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #dadada inset;
-webkit-box-shadow: 0 1px 1px #dadada inset;
box-shadow: 0 1px 1px #dadada inset;
}
.submit-container {
float: left;
width: 50px;
height: 32px;
margin: 7px 0 0 7px;
padding: 0;
cursor: pointer;
background: #e63c0d;
border: 1px solid #d62700;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f55f15), to(#e63c0d));
background-image: -webkit-linear-gradient(top, #f55f15, #e63c0d);
background-image: -moz-linear-gradient(top, #f55f15, #e63c0d);
background-image: -ms-linear-gradient(top, #f55f15, #e63c0d);
background-image: -o-linear-gradient(top, #f55f15, #e63c0d);
background-image: linear-gradient(top, #f55f15, #e63c0d);
-moz-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
}
.submit-container:hover, .submit-container:focus {
background-image: -webkit-gradient(linear, left top, left bottom, from(#e63c0d), to(#f55f15));
background-image: -webkit-linear-gradient(top, #e63c0d, #f55f15);
background-image: -moz-linear-gradient(top, #e63c0d, #f55f15);
background-image: -ms-linear-gradient(top, #e63c0d, #f55f15);
background-image: -o-linear-gradient(top, #e63c0d, #f55f15);
background-image: linear-gradient(top, #e63c0d, #f55f15);
-moz-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
}
.submit-container:active {outline: 0;-moz-box-shadow: 0 1px 6px #e4340b inset;-webkit-box-shadow: 0 1px 6px #e4340b inset;box-shadow: 0 1px 6px #e4340b inset;}.submit {float: left;width: 60px;height: 32px;margin: 0;padding: 0;cursor: pointer;border: 0px solid #000;background: url(https://3.bp.blogspot.com/-zLPNKOT3mPw/WH2_U29KH5I/AAAAAAAAAGo/DKYLnpAKtV8NdtjUaFnill_ytfCVzEgNACLcB/s1600/magnifier.png) 20px 6px no-repeat;-moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px;}</style>
<div id=”search-form”><form class=”form-container” method=”get” action=”/search”>
<input type=”text” name=”q” class=”search-field” placeholder=”Type search text here…” />
<div class=”submit-container”><input type=”submit” value=”” class=”submit” />
</div></form></div>[/themify_box]

7. White-Blue Blogger Search Box with Grey Line

blogger search bar style widget

[themify_box icon=”note” color=”blue”]<style type=”text/css”>
#hbz-searchbox {
height: 40px;
position: relative;
min-width: 250px;
max-width: 300px;
margin: 10px auto;
}
.hbz-buttonwrap {
border: none; width: 14%; height: 35px; display: block;
position: absolute;
top: 0;
right: 0;
background: #009bff;
cursor: pointer;
border-bottom: 5px solid #0276c1;
}
.hbz-buttonwrap:hover { border-bottom: 5px solid #bc490a; background: #d75813;
}
.hbz-submit { width: 35px; height: 35px; background: transparent; cursor: pointer;
position: absolute; right: 50%; top: 50%; margin-top: -17.5px;
margin-right: -17.5px; border: none;
}
.hbz-submit:after { content: ”; position: absolute; width: 8px; height: 8px;
border: 2px solid white; border-radius: 50%; left: 10px; top: 9px;
box-sizing: content-box;
}
.hbz-submit:before { content: ”;
position: absolute; height: 8px; width: 2px;
background: white; transform: rotate(-35deg);
top: 19px; left: 21px;
}
#hbz-input { height: 32px;
width: 82%; position: absolute; padding-left: 4%;
border: none; outline: none;
right: 14%;
border-bottom: 5px solid #bbb;
border-left: 1px solid #eaeaea;
background-color: #fbfbfb;
border-top: 1px solid #eaeaea;
box-shadow: 1px 1px 2px #e9e4e4 inset;
}
#hbz-input:focus, #hbz-input:active { background-color: #fff; }
</style>
<form action=”/search” id=”hbz-searchbox” method=”get”>
<span class=”hbz-buttonwrap”><button class=”hbz-submit” value=””
type=”submit”></button></span>
<input type=”text” name=”q” id=”hbz-input” placeholder=”Type here …” />
<input type=”hidden” name=”max-results” value=”8″ />
</form> [/themify_box]

8. Light-Dark Grey Blogspot Search Box Widget

blogger search widget

[themify_box icon=”note” color=”blue”]<style type=”text/css”>
#nbc-searchbox{background:url(https://1.bp.blogspot.com/-NN0X9atWQVA/Ue7BSA-RMFI/AAAAAAAAAh0/hlsMUg1hQko/s1600/noxdo_blogspot_com_Search-icon5.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]

9. Grey Animated Blogger Search Box

animaed blogger search box

[themify_box icon=”note” color=”blue”]<style type=”text/css”>
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-inputplaceholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-mozplaceholder{color:transparent}#searchbox
input[type=”text”]
{background:url(https://2.bp.blogspot.com/-
xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px
#f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sansserif;color:#6A6F75;width:160px;padding:14px
17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-mozborder-radius:5px
0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkittransition:all
0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s
ease 0s;}#searchbox input[type=”text”]:focus{background:#f7f7f7;border:2px
solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://4.bp.blogspot.com/-
slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;marginleft:-40px;border-width:0;width:43px;height:45px}
</style>
<form id=”searchbox” method=”get” action=”/search” autocomplete=”off”><input name=”q”
type=”text” size=”15″ placeholder=”Enter keywords here…” />
<input id=”button-submit” type=”submit” value=” “/></form> [/themify_box]

10. Green Stylish Blogger Search Bar Widget

green unique blogger search box

[themify_box icon=”note” color=”blue”]<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates);
.field {
display:flex;
position:realtive;
margin:5em auto;
flex-direction:row;
box-shadow:
1px 1px 0 rgb(22, 160, 133),
2px 2px 0 rgb(22, 160, 133),
3px 3px 0 rgb(22, 160, 133),
4px 4px 0 rgb(22, 160, 133),
5px 5px 0 rgb(22, 160, 133),
6px 6px 0 rgb(22, 160, 133),
7px 7px 0 rgb(22, 160, 133)
;
}
.field>input[type=text],
.field>button {
display:block;
font:1.2em ‘Montserrat Alternates’;
}
.field>input[type=text] {
flex:1;
padding:0.6em;
border:0.2em solid rgb(26, 188, 156);
}
.field>button {
padding:0.6em 0.8em;
background-color:rgb(26, 188, 156);
color:white;
border:none;
}
</style>
<form method=”get” action=”/search”>
<div class=”field”>
<input type=”text” name=”q” id=”searchterm” placeholder=”what are you searching for?” />
<button type=”button” id=”search”>Find!</button>
</div>
</form>
<script class=”cssdeck” src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>[/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!


2 thoughts on “10 Unique & Elegant Blogger Search Box in HTML Widget (With Demo)

Leave a Reply

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