How To Add Search Boxes Widget to a Blogger Blog

Posted by Sujitha Reddy

    Search Boxes Widget For a Blog or Website

Beautiful and colourful search boxes can be added to your blog so that when you type a word or a phrase it shows the related posts there. For the users who have been interested on your site will be required for some particular data in that situation if you keep a search box it will be easy to the users. So for the new bloggers we are here to give the HTML search box widget in a blog. These search boxes are of different colors and the search box widget has a particular code for search box.

This is used as blog widgets, the html code for search box is given below and this search box acts as custom search engine.

How to Add Search Boxes Widget

----->First step is to login into blogger account and visit blogger dashboard.
----->Go to Layout, select Add a Gadget, where you want to place the widget.
----->Select Html/Java script from the list.
----->Now place any one the below codes and click on save arrangement.

Code I:

<style type="text/css">#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style>   <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
Must See: Install Flying Letters below Mouse Widget
Code II:
<style type="text/css">#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style>   <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
Code III:

<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Code IV:
<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
 Code V:
<style type="text/css">#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 12px;margin:0;}form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style>   <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
Hope that you have got how to add beautiful Search boxes widgets. By using the search box we can quickly get the required data. If you have any queries regarding this post feel free to comment!!!!!.....

0 comments:

Post a Comment