Advanced CSS Search Box with Select Option for Blogger

Search box is a must have widget for a blog or website. I have already shared many search boxes like stylish CSS3 search box and professional style CSS3 search box. 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.

You may see the demo search box which I added right below. Please note If you’re eager to see this search box in action, slightly click on the image or go to LS Demo Blog and comprehend what we’re gonna make here at this time (never used even a single image to create this search box).

Advanced CSS Search Box with Select Option - Demo Screenshot

 How to Add this Search Box to Blog/Website

For adding this search box, you’ve to go for only two steps i.e adding CSS section and HTML section. So let’s begin with CSS section. Follow the steps specified below to make this search box added in your blog/website.

Step #1: Navigate to Blogger Dashboard → Template → Edit HTML → Proceed → Tick Expand Widget Templates → Press Ctrl+F and search for ]]></b:skin>

Step #2: Copy the entire code below and paste it just above your blogger template’s 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;}

Step #3: 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. 

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

Step#4: Conclusively, publish your blog page and you’re done! Remember you’ve added this search box in a page, therefore the dimensions of this widget is no need to change I think.

Also read: Advanced Facebook Like Box for Blogger

My sincere thanks to Karthikeyan (itzurkarthi) for this widget.