A 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.
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
