6 Simple Search bar for Blogger ~ Crawlist

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu