Hi readers :) Today i will tell how to add An Advanced Search box to your blogger blog. I have already shared many search boxes like stylish CSS3 search box and Others. So in this post, let me share the same search box but a little bit difference.

As this post title mentions, this search box includes a selection box along with search box. That means, it makes your search more easy with advanced select option. Anyway the following instructions may lead you to install this widget in better detail.

to Add this Search Box to Blog/Website Follow these easy steps :

Step 1 : Blogger Dashboard → Template → Edit HTML → Proceed → Tick Expand Widget Templates → and search for ]]></b:skin>

Step 2 : paste The Below Code just above ]]></b:skin>.

#search-form { margin:70px 0 100px 170px; width:690px; overflow:hidden; }
#search-page-border { border:1px solid #dbdbdb; border-radius:4px; padding:7px; float:left; }
.search-terms { font-size:26px; border:none; }
#search-which { margin:0 10px; padding-left:8px; border-left:1px solid #dbdbdb; }
#search-which, select option { font-size:26px; }
#search-submit { padding:12px 30px; margin-left:20px; font-size:20px; float:left; color:#333333; background:#cccccc; border:none; border-radius: 3px; }
.accessibly-hidden {left: -999em;position: absolute;}

Now Save your Template and I suggest this search box to add in your blog’s static page. I think it’ll be much better rather than adding this widget in Add a Gadget. Now here’s the HTML code snippet that makes your search box in whole sense. And Don’t forget to change your post page from Compose to HTML while adding this seach box.

<form action="#" method="post" id="search-form">
<span id="search-page-border">
<label class="accessibly-hidden">Search for:</label>  <input type="text" class="search-terms" name="search-terms" onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search...'; }" value="Search..." />
<label for="search-which" class="accessibly-hidden">Search these:</label><select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option><option value="posts">Posts</option></select> </span>
<input type="submit" name="search-submit" id="search-submit" value="Search" />
</form>

publish your blog page and you’re done!