Advanced CSS Search Box with Select Option for Blogger

css search box 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 youre eager to see this search box in action, slightly click on the image or go to LS Demo Blog and comprehend what were 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

advanced css search box

 How to Add this Search Box to Blog/Website
For adding this search box, youve to go for only two steps i.e adding CSS section and HTML section. So lets 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 templates 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 blogs static page. I think itll be much better rather than adding this widget in Add a Gadget. Now heres the HTML code snippet that makes your search box in whole sense. 

    NB: Dont 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 youre done! Remember youve 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.