I have already written a post on how to add a google custom search on blogger.But many people doesn't like google custom search due to its appearance and slow indexing.In this post I will teach you how to add a search box to blogger.
Check out our site for the search box demo.
Check out our site for the search box demo.
Steps To Add The Search Box
- Go to your Blogger Dashboard.
- Navigate to Layout and add a HTML/Javascript widget.
- Copy and paste the below code.
<div
class='widget-contentss'>
<form _lpchecked='1'
action='/search' class='search-form' id='search_mini_form' method='get'>
<div id='search'>
<div
class='search-input form-search'>
<input id='s'
name='q' 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='buttonsinput' style='vertical-align: top;' type='submit'
value='Search!'/>
</div></div>
</form>
</div>
|
4. Save it.
Customization
Change the default text in the search box by replacing Search This Site with your own text.Replace the same text as many times it is displayed on the above code.
Adding Style
- Go to Blogger Dashboard > Template > Customise > Advanced > Add CSS.
- Copy and paste the below code in the CSS box.
/* Search
Box--Start------------------------- */
#buttonsinput { background-color:
#EA141F; border: 3px solid #005c91; cursor: pointer; color: white; width:
48px; height: 38px; margin: 0px; font-size: 14px; font-family: 'Monda',
sans-serif; 700; margin: 0px; float: right; transition: all 0.3s ease-out; }
#search input { border: 1px solid #d2d2d2; padding: 5px 30px 5px 10px; width:
400px; color: #838383; height: 28px; font-family: 'Monda',
sans-serif;outline: none; width: 170px; margin: 0 5px 0 0; float: left; }
#buttonsinput { width: 70px!important; height: 40px!important; float: right;
padding: 0px!important; margin: 0px!important; } element.style {
vertical-align: top; } #search input { border: 1px solid #d2d2d2; padding:
5px 30px 5px 10px; width: 400px; color: #838383; height: 28px;
font-family: 'Monda', sans-serif; outline: none; width: 170px; margin: 0 5px
0 0; float: left; } #buttonsinput { text-transform:capatalize; color:
#fff!important; font-family: 'Monda', sans-serif!important; font-style:
normal!important; } #buttonsinput:hover { background-color:
#364956!important; } .search-input.form-search { float: left; padding-bottom:
20px; border-bottom: 0px!important; } .comment-form a:hover { color: #2f6986;
text-decoration: underline; } .comment-form a { color: #2f6986;
text-decoration: none; } .comment_body img { max-width: 540px; }
/* Search
Box--End ---------------------------- */
|
3. Save and enjoy!!
Customization
- To change the button color replace #EA141F with your HTML color code.{Find color codes here.}
- To change the width of the search input text box replace 170px with your desired size in px.
Blogger Comment
Facebook Comment