Expanding Blogger Search Box

Hi there! How was your holiday? I hope you enjoyed every single moment with your loved ones! Let's start 2015 with this blogger widget, an expanding blogger search box!

Introduction

As we all know, search box allows our readers to have an access to all of our posts around our website. A search box should be installed on the navigation menu or the sidebar which it can be easily seen by our visitors. There are a lot of search box out there, but only a few of them is expandable - one of them is an Expanding Search Box created by Codrops, for me it's perfect but I myself can't install it to my blogs, so I tried and tried to create my own expanding search box and that's what I am going to share today!

External Scripts

FontAwesome (?)
Jquery Library v1.7.0 or higher (?)

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Add the following code inside either of your sidebar or navigation menu.

<div id='search_box'><form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>

CSS

Add the following code before ]]></b:skin> inside your template.

#search_box{width:340px;position:relative;height:40px}#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}#search_box #search #search_text{color:#888;width:290px;padding:10px;font-size:16px;font-family:'Maven Pro',sans-serif;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}#search_box #search #search_text:focus{background:#efefef}#search_box .search_button{float:right;border:1px solid #d9e0e2;color:#888;height:40px;width:50px;text-align:center;line-height:40px;display:inline-block;cursor:pointer}#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}

JScript

Add the following code before </body> inside your template.

<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
    </script>

Then save it.

Final Words

This widget is basically divided into two - the search box and its button. Normally the function of the button is to submit the user's query, but in this widget its function is just to toggle the hidden search box with the use of the jQuery above, the jQuery also toggles an active class every time a user clicks on it.

Voila! You can now enjoy an expanding blogger search box in your own blog. Is this widget helpful? Share your thoughts and ideas by leaving a comment below! Thanks.