How to Add Search Box Widget | Blogger Tips

Search Box WidgetSearch Box offers readers to find out more topics inside a blog , site or whole web . Every Blogger should keep at least one search box in his blog. It also increases page impressions of a blog. I have explaind here two ways to add search box widget in Blogger template.


New Search Box Gadget for Blogger


To search over your blog, your blogroll, and everything you've linked to Blogger.com has recently addded a search box gadget option for user. It is powered by Google Custom Search . It is very easy to set up.

1. Login into Blogger.com . From Dashboard -> Layout-> Page Elements -> Add a Gadget ( See how to add a gadget)

2. Choose "Search Box" gadget. Now you will get something like below image:


3. At Title field enter "Search This Blog" or "Search Archievs" or keep it empty. Now you can select from check box "This Blog ( it will search your blog first)", "Linked From Here (Those sites which you link in your posts)" , "The Web ( All over the web pages)" . You can also choose "Blogroll", "Meta" ,"Popular Blogs" but you have to add this widgets first.

4. Now save this gadget. Visit your Blog search for something. Search results will show up just after your header or before all posts.




Customize Search Box Code



Under Dashboard -> Layout-> Page Elements tab, click "Add a Gadget" or“Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes , I have explained one of theme here. You can customize it as your own.
<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q"size="20" type="text"/>
<input id="b-searchbtn" value="Search"type="submit"/>
</form></p>
change YOUR BLOG URL with your real Blog URL and NAME OF YOUR BLOG with Title of Search Box such as "Search This Blog" or "Search Here". You can also change Search with "Go" or "Hit" etc. To enlarge or shorten box size change size="20". Now save the gadget.

No Comment Yet Post a Comment

Leave a Comment