Add Search Box In Your Blog Website

Hello Friend In This Section We find that how we can add Search Box in your blog 
SEARCH Box is very use full to your user or visitor to search their query in your blog they can search any content in your blog from search button this is fast and easy to search any content 

Follow this step
1.Login to your blogger
2.Go to LAYOUT tab
3.Then EDIT HTML tab
4.Click On EXPAND WIDGETS to expand html
5. Search the below code in red

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>




Now Add the seach code after these lines


You can also add your google search button or you can add this search button 
This will show in header of your blog 


First Search Box Code

<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.
RESULT OF ABOVE CODE

Second Search Box Code

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

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

RESULT OF ABOVE CODE

SEARCH BUTTON WILL APPEAR HERE 

here search button is not showing but in your blog it will show beautifully

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

Third Search Box Code

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.