Add A Good Looking Search Box To Blogger!

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.

Steps To Add The Search Box

  1. Go to your Blogger Dashboard.
  2. Navigate to Layout and add a HTML/Javascript widget.
  3. 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 == &apos;&apos;) {this.value = &apos;Search This Site&apos;;}' onfocus='if (this.value == &apos;Search This Site&apos;) {this.value = &apos;&apos;;}' 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

  1. Go to  Blogger Dashboard > Template > Customise > Advanced > Add CSS.
  2. 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.


SHARE

About Jolly David

    Blogger Comment
    Facebook Comment