How to Add Custom Search Box to Blogger?

This post is about adding a Blogger blog search box to your blog. Although Google Blogger have a Nav Bar at the top of blogs. But if you want to add another search Box (blogger search box) to the area of your then let me show you.

Go to your Blogger account->Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

         How to add custom Search Box to blogger?

1. 
   <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>

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-

Search Here

Whereas a width size="30" and value="Go" will give you this:-

search here

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

         Customization:

If you want readers to click an image instead of a button, you will first need to do up a small picture.

The HTML code to insert is this:-

1. 
   
   <p align="left"><form id="searchthis" action="YOUR BLOG URL/search" 
   style="display:inline;" method="get"><strong>NAME OF YOUR BLOG<br/>
   
   ="text"/>
   <input id="b-searchbtn" type="image" src="
   </strong><input id="b-query" maxlength="255" name="q" size="20" typ
   
   eIMAGE URL" align="top"> </form></p>
   
   
   

Insert your image url inside the code above in place of IMAGE URL.
You are Done! 
Peace and Happy Blogging!