sample post
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!
Features
Lightweight CSS
Minified Script
Improved HTML
SEO friendly
Fully Customizable
Simple Design
Responsive
Requirements
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 == '') {this.value = 'Press Enter to Submit';}' onfocus='if (this.value == 'Search...') {this.value = '';}' 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}
Script
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.
