Create A Custom Search Box For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Every blog needs a search for but some blogger template doesn't provide search boxes or any search bar. If you're sacrificing search box because of a template like that then it's your time to create your own first custom search box with little help of this article.

In this article i'll teach you creating custom search box and it's not that tough , just a little attention and it's done.

First :

It's to simple to create a search box like this below is the code :

<form id="search" action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" type="text"/>
<input id="submut" value="Search" type="submit"/>
</form>

There are two input field in above box one is a text and second is a submit button , that's all about above search bar...to easy?

Second :

After adding a little CSS this search box will look like this :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form> 

Just try to edit CSS and see what you can do.....

Third :

This time we'll use CSS3 not so tricky just try to edit this one

<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="25" type="text" style=" border: 2px solid black;border-radius: 60px;outline: 0px;">
<input id="searchbtn" value="Search" type="submit" style="background: whitesmoke; border: 2px outset black;  font-weight: bold;border-radius: 20px;position: relative;right: 30px;">
</form>

 This one looks amazing without any doubt now let's move on to next level

Forth :

Now we'll take this to a new level with some more advance CSS3 but it's not that hard :

<form id="search" action="/search" style="display:inline;" method="get">
<input name="q" type="text" value="Search"/>
</form>
<style>
#search {
}
#search input[type="text"] {
    background: #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: white;
    outline:0px;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>

I know this hard a nightmare but CSS is not that scary.....it was hard but you can get an idea from this for some future design.....i hope this helped you.....got any question then leave a comment

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.