Search box Gadget is much needed for Bloggers as Readers can directly search there queries. Although Blogger provides Search box widget by default. But majority of Bloggers don’t add that widget since it is not an attractive widget. We need a list of stylish and colorful widget so that it can suit in our Blogger template.
M providing some good looking search box widget in almost every color. you just need to choose any one gadget from your choice.
Also read : How to add Blogger official Contact Form
Also read : How to add Blogger official Contact Form
Benefits to add a Search box in Blogger Blog:
Although it is useful for readers . they can search a particular post from hunderds of your posts in quick time. n also it is useful for Bloggers since they can quickly search there posts and can use it when they need.
How to add these Beautiful search box :
How to add these Beautiful search box :
- Go to Blogger and select your Blog
- Click on layout
- select add a gadget
- Click on add a html/javascript
- Selct any Blogger search box code from the list and paste on it
- After pasting any of the below code, Click on save.
<style type="text/css">
#w2b-searchbox{background:url(https://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.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="https://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div><style type="text/css">
#w2b-searchbox{background:url(https://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="https://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div><style type="text/css">
#w2b-searchbox{background:url(https://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="https://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> |
<style type="text/css">
#w2b-searchbox{background:url(https://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="https://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div><style type="text/css">
#w2b-searchbox{background:url(https://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="https://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div> Also know how to install it in WordPress These all gadets are cute and very simple. I recommend you to install a Blogger search box widgetWhich suits in your template. If you are facing any issue, Plz let me know in the comment section.Have a nyc day..!!!!!God bless....
Even though I no longer use Blogger this post will help a lot in establishing a search box for Webmasters. Although, it’s very simple to render a Search box in WordPress.
Nice post for the bloggers Sanjay.
Search boxes are nice and thanks for providing the code.
Will try to add it, keep sharing the codes.
Thank you Nirmala for ur support…!!!! Nyc to see ur comments…Keep in touch..tc.
Thanks Giriraj for your valuable comment….u can add it in WordPress blogs too..
Nice post and search box widgets….I am using WordPress but surely share this with my blogger friends….:)
Thank you vivek for liking my work..Be in touch for more valuable posts..you can have a look on wordpress tips too. tc