How to add Blogger Custom Search Bar with HTML

Search box is one of important thing for website. But Blogger only support ajax Google search box that’s slow in indexing posts and also slow in showing results. This search box widget will help you add an official search box to your Blogger / Blogspot website without slow ajax code, all codes are original similar with search box on navbar of Blogger.

Responsive & stylish widget for blogger · Go to your blogger

dashboard >> Layout · Select Add a gadget option. · Select HTML/ JavaScript then past this code and save.

<div id="_bcd_141013" style="display:none"></div>
<style type="text/css">
form#_bcd_141013_search_form {
position: relative;
display: block;
clear: both;
float: none;

border: /*border-width-s*/1px solid;/*border-width-e*/
border-color: /*border-color-s*/#dddddd;/*border-color-e*/
padding: /*padding-s*/5px;/*padding-e*/
font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#ffffff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
width: auto;
border: none;
margin: 0;
padding: 0;
line-height: 2em;
height: 2em;
outline: none;
background: transparent;

color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
opacity: 0.8;
}
button#_bcd_141013_search_submit {
width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
margin: 0;
position: absolute;
right: /*padding-s*/5px;/*padding-e*/
top: /*padding-s*/5px;/*padding-e*/
line-height: 2em;
height: 2em;
text-align: center;
cursor: pointer;
border: none;
min-width: 2em;

color: /*submit-text-color-s*/#000000;/*submit-text-color-e*/
background: /*submit-bg-color-s*/#f0f0f0;/*submit-bg-color-e*/
}
html[dir="rtl"] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action='/search' id='_bcd_141013_search_form' method='get'>
<input id='_bcd_141013_search_text' name='q' placeholder="Search..." data-placeholder-end="" type='text'/>
<button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button>
</form>

<script type="text/javascript">
/*
Name: HaxBit
Author: Sohel Mahmud
Site: http://www.haxbit.blogspot.com/
Version: 1.0
License GNU
*/
var ss = document.getElementsByTagName('link');
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute('href');
if (href && href != null && href.indexOf("font-awesome/") != -1) {
break;
}
}
if (i >= ss.length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
}
document.getElementsByTagName("head")[0].appendChild(link);

</script>

Ads Area

How to add Blogger Custom Search Bar with HTML