Blogger Ever

How to create a hide-able search bar for Blogger using jQuery?

This is a demanded tutorial that will describe to create a search bar for Blogger that hides and appears on a click of a button.
How to create a hide-able search bar for Blogger using jQuery?

A few days before I received an E-mail, requesting to create a search bar like our blog. Might be some people see this blog in future not find this type of search bar (due to changed design). So I'm going to share a tutorial on how can you create a search bar like that, which shows and hides by clicking a search button. Have a look:
Check out the demo:
See the Pen Hide-able search bar by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.


First make sure that you have jQuery in your Blogger template, if you don't have yet then:

  • Go to Blogger > Template > Edit HTML
  • copy the following line and paste after <head>

<script src='http://code.jquery.com/jquery-2.1.0.min.js'/>
Now go to Blogger > Layout > add widget > HTML/Javascript and paste the following code in it.
<div class='be-search'>
  <div class="searchbutton">
</div>
  <div class="search-form">
<form action="/search" class="searchform" 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>
</div>
</div>
<style>
.be-search {
    position:relative;
    padding:10px;
    height:50px;
}
.searchbutton {
    background: rgba(0, 0, 0, 0.5) url(https://lh6.googleusercontent.com/-0wMp6Usk3X0/U1JPE2CJLvI/AAAAAAAAEwU/PUzS3TEhSOc/s40-no/Search+Icon.png) no-repeat;
    border-radius: 5px;
    background-position: 5px;
    display: block;
    height: 50px;
    position:relative;
    width: 50px;
    cursor: pointer;
    z-index:5;
    font-size: 0 !important;
    margin-right: 20px;
}
.searchbutton.active {
    background-color:rgba(0, 0, 0, 1);
}
.search-form {
    display:none;
    position: absolute;
    top:100%;
    left: 0;
    background: #00bfff;
    padding: 20px 0;
    width:100%;
    z-index: 4;
}
.searchbar {
    background: transparent;
    border-bottom: 1px solid #fff;
    border-width: 0 0 2px 0;
    width: 500px;
    padding: 10px;
    font: 400 20px'pt sans', sans-serif;
    color: #fff;
    margin-left:10px;
}
.searchsubmit {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    outline: none;
    cursor:pointer;
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    font: 400 15px'pt sans', sans-serif;
}
</style>
<script>
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle();
});
});
</script>
Save it have a look. If you are good in CSS then you can change it according to your design. 
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.