Expandable/Dynamic width Search bar for Blogger

Expandable/Dynamic width Search bar for BloggerA stylish search bar can make your Blogger blog little bit smarter and professional. For changing the random taste of Blogger search bar I published Black stylish CSS3 search bar and 5 Simple search bar before so here I presenting to you another different style search bar, what's width is expandable/ dynamic width/ fluid layout. And comes up with orange default color. These search bar looks simple and elegant, stylish and lightweight constructed with CSS3, HTML. Let's see how it looks like and how to add it in your Blogger blog.

Expandable/Dynamic width search bar for Blogger


Preview-


Live Demo- (here you go)

Codes-

<style>/*crawlist.net CSS starts*/   
#ks-search{
border:1px solid #f63;
background:none repeat scroll 0 0 #f63;color:#FFF;transition:all ease 2s;
padding:5px;
color:#ffffff;
font:14px Verdana, Geneva, sans-serif;
cursor:pointer;
font-weight:bold;}
#ks-search:hover{
background: none repeat scroll 0 0#000;
border:1px solid #000;}
#ks-expandz{
border:1px solid #d5d5d5;
background:#ffffff;
padding:5px;
color:#888888;
width:40px;
font:14px "Segoe UI";
transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
-moz-transition: width 2s;}
#ks-expandz:hover{
border:1px solid #d5d5d5;
background:#ffffff;
padding:5px;
color:#888888;
width:160px;
font:14px "Segoe UI";
transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
-moz-transition: width 2s;}/*crawlist.net CSS ends*/
</style>
<!--crawlist.net search starts-->
         <form action="/search" method="get">
            <input name='q' id='ks-expandz' onblur='if (this.value == "") {this.value = "Got something to search?";}' onfocus='if (this.value == "Got something to search?") {this.value = ""}' type='text' value='Got something to search?'/>
            <input id='ks-search' type='submit' value='Search'/>
         </form>
<!--crawlist.net search ends-->


How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget'  
  • Select 'html/javascript' from pop up menu.
  • Copy search bar's codes and save template. 
And see and test search bar in live action.

How to change search bar Button color(if you don't like the default)
To change the color of Button you need to change the Button's HTML color code. Here (colorhexa) find the color you want and copy desired color code replace twice that code in (#f63) and save template.

Compatibility
  • This search bar is compatible with stranded structured template, unique designed template will not accept it. 
  • All modern web browser will support it but some browser (ex-IE, Chorme) will show hover effect statically
I hope you will like this widget and problem, recommendation don't forget to mention. Enjoy

Popular posts from this blog

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

Read Download ePub Harry Potter Books & Apk

7 best CMS/script for building Social networking website

Add Cool Social Media Sharing icons below posts in Blogger

12 best free Article Rewriter/Spinner you can use

Read Download Stephen King's Novels ePub & Apk

10 Best Free Flash Editor software to use

Top 6 Best Alternatives to ZBIGZ

Add Truck style Social Sharing button below posts in Blogger