How to create a dropdown search bar in your navigation on Blogger

Today’s tutorial is showing you how to add a search icon to your navigation menu that when clicked will display a search box. The search bar will slide down allowing your visitors to search for blog posts (there’s a similar example on this site).

How to create a drop down search box in your navigation on blogger

Please note that this tutorial needs updating, due to the restrictions on Blogger the pagination.js file in step 2 below now needs to be hosted directly within your theme and not in an external file.

How to create a dropdown search bar in your navigation on Blogger

1. Since we’ll be using a Font Awesome icon in this tutorial, we need to first install Font Awesome using this tutorial.

2. Next, we’ll add the search icon to your navigation menu. Find the custom menu you’ve created, for this tutorial I’ll be using the menu we created in this post with the navigationbar ID (as we’ve added id='navigationbar' to the parent div). If you’re using a different menu, you’ll need to find this parent ID for step 4.

Add the following before the closing </ul> tag in your navigation menu.

<li class="searchicon" id="searchicon"><i class="fa fa-search"></i></li>

create a drop down search box on blogger

3. Within the navigation div but underneath the menu list you’ve created, you’re going to paste the following

<div class='clear' id='searchbar'>
<form expr:action='data:blog.searchUrl' id='searchform' method='get'>
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/> <input id='searchButton' type='submit' value='Go'/>
</form>
</div>

4. Now let’s add the CSS to style the menu, this is some basic styling but you can customise it to suit your blog. This CSS will go above the closing style tag, which is </b:skin> on Blogger.

/* Start dropdown navigation - XOmisse */
#searchbar {
  display: none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  height: 50px;
  background: #fff;
  position: absolute;
  overflow: hidden;
  z-index: 9999;
}

#searchicon {
  height: 30px;
  line-height: 30px;
  width: 30px;
  color: #333;
  text-align: center;
  float: right;
  cursor: pointer;
}

#searchicon:hover {
  color: #999999;
}

#searchBox {
-webkit-appearance: none;
border: 0px;
background: #FFF;
padding: 10px;
text-transform: uppercase;
width: 80%;
}

#searchButton {
  width: 10%;
  padding: 10px 20px;
  background: #333333;
  color: #ffffff;
  border: 0;
  outline: none;
  cursor: pointer;
}
/* End dropdown navigation - XOmisse */

create a drop down search box on blogger

5. Right above the closing body tag </body>, paste the following and save your theme.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  var $searchicon = $('#searchicon i');
  var $searchbar  = $('#searchbar');
  
  $('#navigationbar ul li').on('click', function(e){ 
    if($(this).attr('id') == 'searchicon') {
      if(!$searchbar.is(":visible")) { 
        // if invisible we switch the icon to appear collapsable
        $searchicon.removeClass('fa-search').addClass('fa-search-minus');
      } 
        else {
        // if visible we switch the icon to appear as a toggle
        $searchicon.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $searchbar.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });
  
  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });
});
</script>

Now, when you click the search icon the box should slide down. If it’s not working, double check that there are no errors in your template and no jquery conflicts.

7 Comments

This is great! Thank you for sharing! Just one question, if I wanted to have two searchbars on my blog, what do I do then? Thanks!

Hi,

I really appreciate the hard work that you have put on writing this post and also to create the scripts. Thanks for sharing such cool tips and tutorials.

B/Rgds

Krish