How To: Use Google Search Ap Is On Your Blog

How can you make Google serve you better? Customizing Google search to suit one's needs in a more controlled manner has been a fairly less exploited area - at least by the end-users. Perhaps because there are enough 3rd party widgets available to assist a normal tusker with her Blog to do this work.
This slideshow is about getting a little hands-on with Google Search API to put a professional looking search-box on your blog - all the while utilizing existing components available on (what's called) the Google OS.

Transcript of "How To: Use Google Search Ap Is On Your Blog"

1.
BROUGHT TO YOU BY WWW.MINDGAP.IN How To: Use Google Search API’s on your Blog

2.
Step 1 <ul><li>The first step is to have a functional Google account. </li></ul><ul><li>HOW CAN YOU MAKE GOOGLE SERVE YOU BETTER? Customizing Google search to suit one's needs in a more controlled manner has been a fairly less exploited area - at least by the end-users. Perhaps because there are enough 3rd party widgets available to assist a normal tusker with her Blog to do this work. </li></ul><ul><li>This slideshow is about getting a little hands-on with Google Search API to put a professional looking search-box on your blog - all the while utilizing existing components available on (what's called) the Google OS. </li></ul>www.mindgap.in

5.
Step 4 <ul><li>Fill out the form with details about your blog. </li></ul><ul><li>Choose &quot;Only sites I select&quot; for How do you want to search. </li></ul><ul><li>In the &quot;Sites to search:&quot; box, provide the URL of your blog (e.g. myblogsite.blogspot.com). </li></ul><ul><li>Click “next” to test your engine </li></ul>www.mindgap.in

6.
Step 5 <ul><li>This second step of the wizard gives you the opportunity of testing out your custom search engine. </li></ul><ul><li>You may try searching certain terms from your blog posts and see how it looks. </li></ul><ul><li>In this example, &quot;financial crisis&quot; is being searched from my blog which gave the results as shown. </li></ul><ul><li>Click “Finish” after reviewing the results. </li></ul>www.mindgap.in

8.
Step 7 <ul><li>Click on the &quot;Code&quot; menu of the control panel. The page shall render configuration options of your search engine. </li></ul><ul><li>This page is dynamic, and shall change its appearance and options as you make these selections. </li></ul><ul><li>Make the following changes: </li></ul><ul><li>Choose &quot;Host results on your website“ </li></ul><ul><li>Then, choose &quot;Overlay&quot; </li></ul><ul><li>Provide the name of your blog url for the &quot;Site URL:&quot; (e.g. http://myblogsite.blogspot.com/search/) </li></ul>www.mindgap.in

10.
Customer Search Engine created <ul><li>This is a self-sufficient code, and shall provide you with all the necessary functionality to provide search features on your blog site in the result overlay manner. </li></ul><ul><li>You may skip to Step 12 below or continue with the next section that deals with controlling the look-and-feel of your custom search engine. This heck utilizes CSS and JavaScript components that Google uses for the search box on its official websites. </li></ul>www.mindgap.in

13.
Step 10 (cont) <ul><li>Your Notepad should have something similar to this now: </li></ul>www.mindgap.in

14.
Step 11 <ul><li>Now, you will identify the API Key of your search engine, and use it to replace the API key given in the example textarea above. </li></ul><ul><li>There are two places where the replacement would be done. </li></ul><ul><li>In the first place, highlighted in blue, the API Key would have a prefix of &quot;Searchbox_&quot;. </li></ul><ul><li>In the second instance, highlighted in yellow, you will have to replace only the API Key </li></ul>www.mindgap.in

15.
Step 11 (cont) <ul><li>Caution: This is critical, any error in this copy+paste operation will render your code useless because Google API servers will not be able to identify your custom search engine without the exact API key. </li></ul><ul><li>After the replacements, delete the original Forms block as highlighted below. </li></ul><ul><li>The code of your Notepad is now ready to go onto your blog. </li></ul>www.mindgap.in

17.
Step 13 <ul><li>Paste your Custom search engine code into the text area of the new widget window. </li></ul><ul><li>Choose a widget title of your choice. </li></ul><ul><li>Click Save when ready. </li></ul>www.mindgap.in

18.
Step 14 <ul><li>Refresh the browser window of your blog. </li></ul><ul><li>The your custom search engine should be available on your blog main page as shown. </li></ul>www.mindgap.in

19.
Step 15 <ul><li>Congratulations! Your Custom Search engine is ready to roll. </li></ul><ul><li>Try out the search and see the results as an overlay on your blog page. </li></ul>www.mindgap.in

20.
www.mindgap.in <ul><li>With a little tweak, this method also works with TypePad . Now, if you have means of posting CSS and JavaScript on your WordPress hosted blog, you can use Step-1 through Step-11 to create your customized Google Search Engine and plug it into your personal blog. </li></ul>www.mindgap.in