Add Search Bar With Clean Button in Blogger

Add Search Bar With Clean Button in Blogger

How to Add Search Bar With Clean Button in Blogger - One that makes our blog to be user friendly is the search box, search box is very important to allow visitors to explore your blog or find other articles on your blog. 

Function search box for myself is to facilitate the search for a post which I will add as internal links when it will publish a new post. at this time I will share a search box with additional features for cleaning key input text, the search box is simple there is little additional jQuery, 

Install Search Bar With Clean Button in Blogger

To install CLoud Labels in Blogger follow the steps below:
1. Sign in Dasboard Blogger 
2. Select Template 
3. Choose Edit HTML 
4. Copy the following CSS and put it above the code
 </ b: skin> or </ style> :

 #search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
 border:1px solid #282828;
 padding:0px;
 display:inline-block; 
 width:150px; 
}
.text-input-wrapper input {
 border:none;
 background:#fff;
 outline:none;
 padding:0;
 margin:0;
 font:inherit; 
 width:150px; 
}
.text-input-wrapper span {
 cursor:pointer;
 color:#369;
 font-weight:bold;
 visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

HTML From

<form id="search-form" action="/search" method="get">
 <span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
 <button class=search-btn type="submit" value="Submit">cari</button>
</form>

jQuery

<script type="text/javascript">
//<![CDATA[
undefinedfunctionundefined) {
 var searchForm = document.getElementByIdundefinedsearch-form),
 textInput = searchForm.q,
 clearBtn = textInput.nextSibling;
 textInput.onkeyup = functionundefined) {
 clearBtn.style.visibility = undefinedthis.value.length) ? "visible" : "hidden";
 };
 clearBtn.onclick = functionundefined) {
 this.style.visibility = "hidden";
 textInput.value = "";
 };
})undefined);
//]]></script>

Good Luck...

go to link download