How Add Blog Search Box Code To Blogger

How to add a search box to your blogger,as default template doesn't provide any search codes or search box in your template so as readers can search of in your blog or web from your blog.There are many methods of adding search box to your blog at different places you want and different types of codes for search which you want to be done in our blog.Now i will explain where to add these codes and what codes to add to make a seach box in your blog.

Lets first of all start with the search codes which you need to add in your blog. The codes are below:-

First

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Change the text in red to any text like search or hit you want to display in button to hit the search.

Your search box will appear like this below.

Second

If you want to add some styling like this new sample below:-

Use these codes

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/><input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/></form>

Edit the colors or styling in red in above codes to change the styling of search box to adjust in your template.

Third

Now if you want to add image in place of search button like below:-

Use these codes:-

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Change the image url in red above with the url of the image you want to use.and hope you would have no problem in using any of the codes.

Now How To place search Box at different places in blogger blog:-

To Place it in sidebar:-

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear.
Select HTML/JavaScript and add the above codes.

If you want to place search box in header read this tuorial Embed search Box In Blogger Header.

I hope you will love this tutorial.