Use Your Own Search Box with Google Custom Search | Blogger

The accuracy of Google search and the ability to monetize your blog with it's flagship Adsense program are the two primary reasons one would replace blogger's default search with Google custom search. Other than that, adding a simple search box to blogger can do job for you. And its easier than 123. You can either add it from the 'Add a gadget' menu or grab the simple search form HTML code given after Step 7 below.

And as for the "Using your own search box with Google custom search" part, here are 7 easy steps you need to take.

Method:

Step 1. Visit google.com/cse and create a new search engine (If you don't already have it set).

Step 2. Navigate to 'Look and feel' on the left pane.

Step 3. Choose Results only layout and customize the style according to your liking.

Step 4. Now, Save and Get Code.

Step 5. Two code are displayed. Place the JavaScript code before the closing tag in your template. (Highlighted in red in Image below).

Step 6. Create a new page and name it "Search" (Without Quotes). Now paste the second code in HTML mode there and publish your page.

Step 7. Finally, add a new HTML/JavaScript gadget where you want to display your search box and paste the code below.

<form action="/p/search.html" class="clearfix">
<div>
<input class="search-input" name="q" placeholder="Search..." size="35" style="float: left;" type="search" /></div>
<div>
<input class="search-button" type="submit" value="Search" /></div>
</form>

Note: If you're using your own search box, just add the action="p/search.html" parameter.

There you go. Now you have your own search box integrated with Google CSE.