Add a Google Search Box on Your Blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Do you want to add a new Google search on your blog? It's pretty simple. Just follow the steps defined here and you will be good.

1. Go to Google Adsense and then login.
2. Click on Adsense Setup.
3. Click on "Adsense for Search".
4. Click search type "The entire web".
5. And then just follow the default patterns or whichever colors you like.
6. At the end of it Google gives you some code. Copy both of them together.
7. And come back to your blogspot blog.
8. Now goto dashboard and then hit "Add a gadget".
9. Select HTML/Javascript in the gadget list.
10. Add a title "Search google" the title text.
11. Paste the code that you copied in step 6. It should look like this if you copied it correctly
    

    :<form id="cse-search-box" action="http://myblogname.blogspot.com">
    <div>
    <input value="partner-your-pub-id" name="cx" type="hidden"/>
    <input value="FORID:10" name="cof" type="hidden"/>
    <input value="ISO-8859-1" name="ie" type="hidden"/>
    <input name="q" size="71" type="text"/>
    <input value="Search" name="sa" type="submit"/>
    <a href="http://myblogname.blogspot.com/?q=&sa=Search#1099">Clear Search</a>
    </div>
    </form>
    <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
    <div id="cse-search-results"></div>
    <script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 800;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
    </script>
    <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script>
    

    
    
12. Hit save and come back to Layout tab.
13. Now move your gadget to the top area or whichever area you want to display.
14. Hit save and you are done.
    

If you want to have radio buttons to toggle between searching web or your blog, you can append this code just below the search button code.

<font size="-1">
<br/><input checked value="" name="sitesearch" type="radio"/> Entire Web
<input value="mycomponent.blogspot.com" name="sitesearch" type="radio"/> This Blog <br/>
</font>