Pages

Wednesday, November 9, 2011

Custom Search Box in Header Section

In the previous post splitting of  Header section is described. Now in this post I shall describe how to add custom search box in the header section. Before adding the custom search box my blog looked like:




And after adding the custom search box it looked like:


After searching in the box, the result will be displayed in the main section of the blog.
There are two ways to get this kind of search engine. One is directly by adding search box from the widgets as below:


And another is to add customized search box having adsense account in google as follows:

Step 1: From Google Adsense Click My Ads -> Search -> Custom Search Engines -> New Custom Search Engine as follows:


Step 2: Fill the form with the details and click 'Save and Get Code' as follows:


Step 3: If if you have opted to get search result in a different iframe, then you will get two codes as follows:

<form action="http://blogsobar.blogspot.com.com/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-9114389529633959:p6na0ofi6si" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="//www.google.co.in/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 796;
var googleSearchDomain = "www.google.co.in";
var googleSearchPath = "/cse";
</script> <script type="text/javascript" src="//www.google.com/afsonline/show_afs_search.js"></script>
Step 4: Now go to Design view, add a HTML/Javascript widget at the right side of the header section and add the first piece of code into it. This code will create a search box in the header section. For proper placement of the search box you can add the following line at the top of the code.
<div class='cse' style='color:#000000;float:right;margin:10px -30px 0 0 ;'>
Step 5: Similarly, add another HTML/Javascript widget below the header section and paste the second piece of code into it. Save Template. You are done.