Blogger Ever

Search form that does not submit if search bar is empty for Blogger

This search form never submits the search query if the search bar is empty means the search query length in 0.

Last night I read an article on CSS-Tricks, I follow Chris Coyer's every tip about design and development. He shared a guest post that showed how different blogs' search form reacts on empty search query. Lastly is post he showed that CSS-Tricks changed its blog's search form that doesn't submits the query until the search form is empty.

Same when I experimented in Blogger, I found that empty search query returns all the recent posts of the blog. So I finally created a search form that works same as CSS-Tricks blog for Blogger. Have a look at demo.

Demo

See the Pen search form inspired by CSS-Tricks by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Instruction

If you do not have jQuery in your template then go to Template > Edit HTML and paste the following code just below <head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
Now go to Layout > Add Widget > HTML/Javascript and add the following code in it and save.
<div class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text' x-webkit-speech='true'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!
</div>
<style>
.search-form .searchbar{
  border:2px solid #000;
  padding:10px 5px;
  height:20px;
  background:#222;
  color:#fff;
}
.search-form .searchsubmit{
  background:#00cfff;
  border:2px solid #00bfff;
  color:#fff;
  height:43px;
  cursor:pointer;
}
.search-alert{
  color:#f7f7f7;
  padding:10px 10px 10px 30px;
  display:none;
  margin:5px;
  background:#222 url(https://lh3.googleusercontent.com/-uCQ8C_HxYfc/VDULKHiLW4I/AAAAAAAAFlE/cAIFLVqhEVQ/w20-h20-no/Indicate%2Bicon.jpg) no-repeat;
  background-position:5px;
}
</style>
<script>
$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});
</script>
 If you didn't get something our comments are open.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.