How To Add Stylish Custom Search Boxes To Blogger

Hello friends today in this post i wanna show you how to add a stylish custom search box in to your blogger website
When visitors come in to your blogger website and they are try to search according of her article they will easily found the post using by the custom search engine so if you have not insert this gadget please must be insert also in to your site.

1. First go in to the your blogger Dashboard and click on dropdown menu your desired blogger name

2. Now click in the "Add a Gadget" and in to the "HTML/Javascript"

3. When you click on HTML/Javascript after paste the below code inside of there empty box

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: brown;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search your article' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

4. And now finally click on "Save" button and visit in to your blogger site to see.
Note: you can change here placeholder desired your text
         you can change search options word
And also you can change style of the search box but you need to carefull otherwise code will be curropt.