Hover effect and Expandable Search box for Blogger

Search box is now a compulsory gadget in every blog for ease of access to the contents on any blog or website. I had already posted a tutorial on creating a classic but good looking search bar for blogger.
This tutorial is also about creating a search box but with an advanced design and concept.You can see a similar design on apple.com, i saw it long ago, when i don't had any idea on how to make it. But today writing the tutorial for people seeking help to make a search box like that or we can say expandable search box.

See the demo to make sure this what you want.

Demo

The HTML

The HTML is same as in previous tutorial but the main thing we focused in this search bar is it's design and the effect of expanding when it's on focus state. This HTML can be applied on any website if you have access to edit it's HTML. But special guidance for Blogger users :
  1. Go to Blogger Dashboard
  2. Select hte Layout tab
  3. Now click on 'Add a Gadget' 
  4. Select HTML/JavaScript gadget from the list. 
  5. Now Add this HTML into it's content area but remember to make required changes.
<div class='srch-cnt'>
<form action="http://www.stramaxon.blogspot.com/search" class="formupsearch" method="get">
<input class="searchinputarea" placeholder='Search for..' maxlength="255" name="q" size="25" type="text" value="" x-webkit-speech="true" />
<input class="boxsearch123" type="submit" value="search" />
<input class="checkbutton23" name="sitesearch" type="radio" value="" />
<input checked="checked" class="checkbutton23" name="sitesearch" type="radio" value="stramaxon.blogspot.com" />
</form>
<a class='attrbl' target=blank' href='http://stramaxon.com/2012/07/hover-effect-and-expandable-search-box.html' title='Get this Gadget'>Get this!</a>       
</div>

The changes you have to make into this HTML code block :
  • Line 2 : Change the URL is action attribute with your's url with /search at end. e.g
    action='http://www.mysite.blogspot.com/search' 
  • Line 3 : This is optional change, just change the placeholder value. It is the group of words that appears when you haven't enter anything into the search box. 
  • Line 6 : This is the last edit, just replace the URL in 'value' attribute with your blog's or website URL without. 
So, once these changes are made on your HTML you can save the gadget. Now place the gadget block at upper side so your visitors can easily find the search box.

The CSS styling

The overall role in this search box is of CSS which gives it a look. Search box are classic by default but applying CSS on it to make them look good is a trend.

Applying CSS is very easy, check this guide on how to add CSS to Blogger blog.
This is the CSS code we will use to style the search box and it will do it's job like a charm.
.checkbutton23
{display:none;}

.srch-cnt
{text-align:right;}

.searchinputarea
{
    width:150px;
    border:1px solid lightgrey;
    height:26px;
    padding-left:6px;
    padding-top:2px;
    background-image:-webkit-linear-gradient(top,#F8F8F8,rgba(228, 228, 228, 0.93)) !important;
    font-weight:normal;
    font-size:14px;
    font-family:'verdana';
    box-shadow:inset 0px 0px 0px gainsboro;
    color:#505050;
    background-color:gainsboro;
    font-style:italic;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
    
}
.searchinputarea:hover
{box-shadow:inset 0px 0px 7px lightgrey;}
.searchinputarea:focus
{
    box-shadow:inset 0px 0px 8px gainsboro;
    background:white !important;
    font-style:normal;
    color:black;
    outline:1px solid lightgrey;
    border:1px solid transparent;
    width:200px; /* Width it should be when in focus */    
}
.boxsearch123
{
    text-indent:-9999px;
    vertical-align:top;
    height:31px;
    width:40px;
    border:1px solid grey;
    background-image:url("http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png");
    background-size: 30px 30px;
    background-position: 6px -0px !important;
    background-color:#EBEBEB;
    cursor:pointer;
    box-shadow:inset 0px 0px 0px #D8D8D8;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.boxsearch123:hover
{box-shadow:inset 0px 0px 10px #D8D8D8;}
.boxsearch123:active
{box-shadow:inset 0px 0px 10px #B4B4B4;}
.srch-cnt .attrbl
{
    color:grey !important;
    border-bottom:1px dotted black;
    font-size:10px;
    visibility:visible !important;
    display:inline-block !important;
}
.srch-cnt .attrbl:hover
{
    text-decoration:none;
    color:grey !important;
    border-bottom:1px dotted black;
}

Just apply this CSS into your blog.


Note : Edit the width property in .searchinputarea:focus selector to change the size of it's width when focused. It is the width it should expand to.


Note : There's an image (search icon) which is hosted on another server, if you don't want sudden deletion of images from their server than download the image which is here  http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png Upload it to your own server or a photo hosting service such as Picasa and find the URL in the CSS code and replace it your's hosted image link.

Now when you are done doing this then check your blog for the amazing looking search bar. I have put the attribution in the search bar so that your readers can also enjoy this search bar on their blog with a click.

Hope you loved this tutorial and i am sure you will subscribe to email newsletter for more Blogger gadgets and tips. Do come back and leave your comments on this post to let us know how you were helped with this search widget for Blogger.