Many of the Blogger templates do not include an search bar to the blog; these instructions will demonstrate how you can add one yourself.
Search Boxes are one of the most important features on a website. They make navigation through pages easier for users and are an essential part of a blog's usability.
.png "Custom Stylish Search Bar Blogger")
Different bloggers use different style custom Search Widget styles depending on what theme they've chosen for their blogs because these search boxes not only make it easier for people to find information about their problems, but can add an attractive appearance to any webpage or blog.
Whereas search engines like google can easily find your website and index every post and page, readers will only see links in front of them.
You may have hundred or more posts for people to read. It is possible you label or categorize things differently on each page, but it won't make finding what someone needs easy because there would be too many pages to look through.
To find something quickly and without a lot of hassle, people need a way to search through all the material on your website.
Search Bar allows visitors to find what they're looking for faster than if they were sifting through one post at a time or clicking endlessly trying to get something specific.
If it's easier for them, there's also a higher chance that these people will return since when they come back from an unrelated link, they can just jump around without feeling too discouraged about the amount of work ahead of them.
You'll see an increase in traffic and better statistics overall.
What is blogger search bar
Blogger provides an Officially Simple widget for it, but this does not provide the professional, stylish look desired.
You can use office blogger search bar as widget to add any blogger area though the layout section.
You can use CSS to Style blogspot's Official search box widget.
Why Add Custom Blogger Search Bar
If your old Search Box is not working properly or you want to replace it with something new, or searching for something and all you have found so far isn't what you're looking for, then don't fret- just find one of the following designs and follow our straightforward instructions below.
Benifits of blogger search bar
Search boxes do more than simply improve the design of your website. They make site navigation easy for both first-time visitors as well as loyal regulars.
For impatient people who don't want to explore links in a sidebar or footer—those looking for something specific right away—search boxes are essential.
With eCommerce sites, it's especially important to ensure that these features are included because there is often a whole lot of very specific stuff being sold (e.g., clothes).
And if someone were only shopping for shirts, say, then typing shirt into a search box would surface just those items and save them from having to click on every single link available on the page.
You might not sell anything yourself, but by adding this feature onto Blogger you'll see an uptick in traffic and rankings due to improved analytics and SEO efforts.)
- Add professional-looking features to your site.
- Provide basic customer benefits.
- This can save users' valuable time so they can quickly find what they want without getting bogged down in irrelevant details.
- These design features are compatible with headers, sidebars, and footers alike.
Stylish Custom Blogger Search Bars
Custom Beautiful Stylish Blue Grey Search box widget
[<style type="text/css">#hbz-searchbox {background-color: #F5F5F5;border: 1px solid #EDEDED;padding: 5px;border-radius: 10px;margin: 10px auto;min-width: 238px;max-width: 288px;}#hbz-input {background-color: #FEFEFE;border: medium none;font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;margin-right: 2%;padding: 4%;box-shadow: 2px 1px 4px #999999 inset;border-radius: 9px;width: 60.33%;}#hbz-input:focus {outline: medium none;box-shadow: 1px 1px 4px #0D76BE inset;}#hbz-submit {background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;border-radius: 9px;border: medium none;color: #FFF;cursor: pointer;font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;padding: 4%;width: 28%;}#hbz-submit:hover {background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;}</style><form id="hbz-searchbox" action="/search" method="get"><input type="text" id="hbz-input" name="q" placeholder="Type Here..." /><input type="hidden" name="max-results" value="8" /><input id="hbz-submit" type="submit" value="Search" /></form>]
Beautiful Stylish Red Grey Search box widget
<style type="text/css">
#hbz-searchbox {
min-width: 250px;
margin: 10px auto;
border-radius: 3px;
overflow: hidden;
max-width: 300px;
}
#hbz-input {
width: 59.2%;
padding: 10.5px 4%;
font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
border: none;
background-color: #EEE;
}
#hbz-input:focus {
outline: none;
background-color: #FFF;
box-shadow: 0 0 2px #333333 inset;
}
#hbz-submit {
overflow: visible;
position: relative;
float: right;
border: none;
padding: 0;
cursor: pointer;
height: 40px;
width: 32.8%;
font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
color: #FFF;
text-transform: uppercase;
background-color: #D83C3C;
}
#hbz-submit::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #D83C3C;
top: 12px;
left: -6px;
}
#hbz-submit:focus,
#hbz-submit:active {
background-color: #C42F2F;
outline: none;
}
#hbz-submit:focus::before,
#hbz-submit:active::before {
border-color: transparent #C42F2F;
}
#hbz-submit:hover {
background-color: #E54040;
}
#hbz-submit:hover::before {
border-color: transparent #E54040;
}
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button id="hbz-submit" type="submit">Search</button>
</form>
Animated Green color Stylish Search box widget
<style type="text/css">
#hbz-searchbox {
background: transparent linear-gradient(#2C2C2C, #111);
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 4px;
padding: 10px;
z-index: 1;
display: block;
margin: 10px auto;
min-width: 228px;
max-width: 278px;
}
#hbz-input,
.hbz-submit {
box-shadow: 0 2px #000;
font-family: 'Cabin', helvetica, arial, sans-serif !important;
margin: 0px;
padding: 0px;
}
#hbz-input {
background: linear-gradient(#333, #222);
border: 1px solid #444;
color: #888;
display: block;
float: left;
font-size: 13px;
height: 30px;
padding-left: 4%;
padding-right: 4%;
width: 60.2%;
border-radius: 3px 0px 0px 3px;
}
#hbz-input:focus {
animation: glow 800ms ease-out infinite alternate;
border-color: #393;
color: #efe;
outline: none;
}
.hbz-submit {
background: linear-gradient(#333, #222);
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
color: #fff;
display: block;
font-size: 12px;
height: 30px;
line-height: 30px;
position: relative;
width: 30%;
cursor: pointer;
border-radius: 0px 3px 3px 0px;
}
.hbz-submit:hover,
.hbz-submit:focus {
background: linear-gradient(#393939, #292929);
}
.hbz-submit:hover,
.hbz-submit:focus {
color: #5f5;
outline: none;
}
.hbz-submit:active {
top: 1px;
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
}
100% {
border-color: #6f6;
box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button class="hbz-submit" type="submit">Search</button>
</form>
Custom Stylish Search box widget with hover effect
<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>
beautiful Smooth Stylish Search box widget
<style type="text/css">
#hbz-searchbox {
height: 35px;
margin: 10px auto;
position: relative;
min-width: 250px;
max-width: 300px;
}
.hbz-buttonwrap {
border: none;
width: 14%;
height: 35px;
display: block;
position: absolute;
top: 0;
right: 0;
background: #444;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.hbz-buttonwrap:hover {
background: #1a1a1a;
}
.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: 35px;
width: 82%;
padding: 0px;
padding-left: 4%;
border: none;
outline: none;
position: absolute;
right: 14%;
box-shadow: inset 0 2px 2px #080808;
background-color: #444444;
color: #fff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transition: all 0.5s;
}
#hbz-input:hover,
#hbz-input:focus {
box-shadow: inset 1px 1px 10px #000;
}
</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="Search..." />
<input type="hidden" name="max-results" value="8" />
</form>
Custom search box for blogger
<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>
Stylish Search Box
<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(http://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,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition: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(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left:-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>
Elegant Customer Box For Search Blogger
<style type="text/css">
#searchbox{background:url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
Dark Search Box for Blogger
<style type="text/css">
#searchbox{background:url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
Hand written Search Box HTML CSS
<style type="text/css">
#searchbox{background:url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>
Shadow HTML CSS Search Box Blogger
<style type="text/css">
#searchbox{width:280px;background:url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png)}
</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>
How To Add A Stylish Search Box Widget To Blogger (step by step)
- Login to your blogger account and choose the blog.
- Then go to layout section and click on the "Add A Widget" Link.
- Choose HTML/JavaScript
- Now, just paste the any of selected search bar codes
- hit save button.
So above are some best Custom Search Boxes For Blogger Blog.
You can easily customize them as per your needs, and if any issues arise, feel free to leave a comment below.
I've not designed any of these search boxes - they're all borrowed from other blogs.
How to create Simple Style Official Search Box Widget for Blogger
- First go to sneeit website.
- Customize as you want.
- Click to add widget.
- In next windows, select your blog , give any title and click to add widget button.
Your Simple Style Official Search Box Widget is ready to use.
Also share this article with your social friends; it will come in handy when they need some clever ideas for blog widgets or SEO tips. Thanks!
.png)
.png)
COMMENTS