6 Simple Search bar for Blogger

Search bar is an important part of every websites. Blogger websites/blogs also needs to use Search bar. Blogger's default search bar (Google custom search) bar is not look so good and don't work fine. That's why to change the taste of search bar in Blogger last week I published a pure CSS3 Black search bar. Also that search bar was gorgeous enough and may be don't fit will all blogger sites. So here I publishing  simple search bar comes up with 6 different color what really looks simple and easily manageable with your blog's background. Made up with HTML and CSS equipped with mouse hover effect. Let's see how they looks like and how to add it in your Blogger blog.

Add Orange search bar in Blogger

Preview-

Codes-

<style>   
#ks-searchbutton{
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-searchbutton:hover{
background: none repeat scroll 0 0#000;
border:1px solid #000;}
#ks-searchbar1{
border:1px solid #d5d5d5;
background:#ffffff;
padding:5px;
color:#888888;
width:160px;
font:14px "Segoe UI";}
</style>
<!--crawlist.net search starts-->
         <form action="/search" method="get">
            <input name='q' id='ks-searchbar1' onblur='if (this.value == "") {this.value = "What are you looking for?";}' onfocus='if (this.value == "What are you looking for?") {this.value = ""}' type='text' value='What are you looking for?'/>
            <input id='ks-searchbutton' type='submit' value='Search'/>
         </form>
<!--crawlist.net search ends-->

Add Blue search bar in Blogger

Preview-

Codes-

<style>   
#ks-searchbutton{
border:1px solid #09F;
background:none repeat scroll 0 0 #09f;color:#FFF;transition:all ease 2s;
padding:5px;
color:#ffffff;
font:14px Verdana, Geneva, sans-serif;
cursor:pointer;
font-weight:bold;}
#ks-searchbutton:hover{
background: none repeat scroll 0 0#000;
border:1px solid #000;}
#ks-searchbar1{
border:1px solid #d5d5d5;
background:#ffffff;
padding:5px;
color:#888888;
width:160px;
font:14px "Segoe UI";}
</style>
<!--crawlist.net search starts-->
         <form action="/search" method="get">
            <input name='q' id='ks-searchbar1' onblur='if (this.value == "") {this.value = "What are you looking for?";}' onfocus='if (this.value == "What are you looking for?") {this.value = ""}' type='text' value='What are you looking for?'/>
            <input id='ks-searchbutton' type='submit' value='Search'/>
         </form>
<!--crawlist.net search ends-->

Add Red search bar in Blogger

Preview-

Codes-

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

Add Pink search bar in Blogger

Preview- 

Codes-

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

Add Green search bar in blogger

Preview-

Codes-

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

Add Gray search bar in blogger

Preview-

Codes-

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

How to add 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 your desired search bar's codes and save template. 

• And see search bar in live action.

Compatibility

• This widget compatible with stranded structured template, unique designed template won't accept it. 

• All modern web browser will support it but some browser will show hover effect statically without transition.

So, what you think about this lightweight search bar don't forget to mention, stay subscribed so you will not miss any new widget updates. Goodluck...