Simple Style Official Search Box Widget for Blogger

Search box is one of important thing for website. But Blogger only support ajax Google search box that’s slow in indexing posts and

Details Comments (13)

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.

Features

Unlimited text color, background color, border color, border width, font-size.
Support changing any texts or icons in search box. FontAwesome ready.
Automatically support RTL language format (when you configure in blog settings)
Responsive.

Notes for customization

See below image to know what you want to change in widget form.

Simple Style Official Search Box Widget for Blogger Guides

<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*/black;/*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*/black;/*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>

</script>

Load Comments (13)

Blogger Widgets