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=''/>
Now go to Blogger > Layout > add widget > HTML/Javascript and paste the following code in it.
<div class='be-search'>
  <div class="searchbutton">
  <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">
.be-search {
.searchbutton {
    background: rgba(0, 0, 0, 0.5) url( no-repeat;
    border-radius: 5px;
    background-position: 5px;
    display: block;
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 0 !important;
    margin-right: 20px;
} {
    background-color:rgba(0, 0, 0, 1);
.search-form {
    position: absolute;
    left: 0;
    background: #00bfff;
    padding: 20px 0;
    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;
.searchsubmit {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    outline: none;
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    font: 400 15px'pt sans', sans-serif;
Save it have a look. If you are good in CSS then you can change it according to your design. 

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.