0
BROUGHT TO YOU BY WWW.MINDGAP.IN How To: Use Google Search API’s on your Blog
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 ...
Step 2 <ul><li>Login into your Google account </li></ul><ul><li>Go to your &quot;My Account&quot; page [try  here ]  </li>...
Step 3 <ul><li>Click to start creating your own Google Custom Search Engine </li></ul>www.mindgap.in
Step 4 <ul><li>Fill out the form with details about your blog. </li></ul><ul><li>Choose &quot;Only sites I select&quot; fo...
Step 5 <ul><li>This second step of the wizard gives you the opportunity of testing out your custom search engine. </li></u...
Step 6 <ul><li>Once you have successfully created your customer search engine, it shall feature on the &quot;My search eng...
Step 7 <ul><li>Click on the &quot;Code&quot; menu of the control panel. The page shall render configuration options of you...
Step 8 <ul><li>As you click on &quot;Generate Code&quot; the page shall give you your Customized Google search engine embe...
Customer Search Engine created <ul><li>This is a self-sufficient code, and shall provide you with all the necessary functi...
Step 9 <ul><li>To proceed, copy this code and paste it in Notepad. </li></ul><ul><li>Note in the above figure the API Keys...
Step 10 <ul><li>The text area below has the code and references to search-box class and js for a custom but professional l...
Step 10 (cont) <ul><li>Your Notepad should have something similar to this now: </li></ul>www.mindgap.in
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 e...
Step 11 (cont) <ul><li>Caution: This is critical, any error in this copy+paste operation will render your code useless bec...
Step 12 <ul><li>Go to your Blogger Layout settings, </li></ul><ul><li>Click on &quot;Add a widget“ </li></ul><ul><li>From ...
Step 13 <ul><li>Paste your Custom search engine code into the text area of the new widget window. </li></ul><ul><li>Choose...
Step 14 <ul><li>Refresh the browser window of your blog. </li></ul><ul><li>The your custom search engine should be availab...
Step 15 <ul><li>Congratulations! Your Custom Search engine is ready to roll. </li></ul><ul><li>Try out the search and see ...
www.mindgap.in <ul><li>With a little tweak, this method also works with  TypePad . Now, if you have means of posting CSS a...
PLEASE VISIT US AND DROP IN YOUR COMMENTS AT: WWW.MINDGAP.IN ©  2009 WWW.MINDGAP.IN Thank you
Upcoming SlideShare
Loading in...5
×

How To: Use Google Search Ap Is On Your Blog

1,205

Published on

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.

2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,205
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. BROUGHT TO YOU BY WWW.MINDGAP.IN How To: Use Google Search API’s on your Blog
  2. 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
  3. 3. Step 2 <ul><li>Login into your Google account </li></ul><ul><li>Go to your &quot;My Account&quot; page [try here ] </li></ul><ul><li>Click on &quot;Custom search&quot; to start building your search engine. </li></ul>www.mindgap.in
  4. 4. Step 3 <ul><li>Click to start creating your own Google Custom Search Engine </li></ul>www.mindgap.in
  5. 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. 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
  7. 7. Step 6 <ul><li>Once you have successfully created your customer search engine, it shall feature on the &quot;My search engines&quot; page [try here ]. </li></ul><ul><li>Go to the &quot;control panel&quot; of your search engine. </li></ul>www.mindgap.in
  8. 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
  9. 9. Step 8 <ul><li>As you click on &quot;Generate Code&quot; the page shall give you your Customized Google search engine embed code in a text window. </li></ul>www.mindgap.in
  10. 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
  11. 11. Step 9 <ul><li>To proceed, copy this code and paste it in Notepad. </li></ul><ul><li>Note in the above figure the API Keys of your Google Custom search engine are highlighted. </li></ul><ul><li>This is a unique API key that helps Google identify your search sites, preferences and parameters. </li></ul>www.mindgap.in
  12. 12. Step 10 <ul><li>The text area below has the code and references to search-box class and js for a custom but professional look for your custom search engine. </li></ul><ul><li>Copy the following code, and paste it *above* the code for your search engine that you copied in Step 9. </li></ul><ul><li>/*copy the following code to Notepad:*/ </li></ul><ul><li><style type=&quot;text/css&quot;> @import url(http://www.google.com/uds/css/gsearch.css); </style> <div id=&quot;searchcontrol&quot; style=&quot;width:180px;&quot;> <form id=&quot;searchbox_014037880324506594198:n7opl4yythc&quot; action=&quot;&quot; style=&quot;width:180px;&quot; class=&quot;gsc-search-box&quot; onsubmit=&quot;return false;&quot; accept-charset=&quot;utf-8&quot;> <center><table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; class=&quot;gsc-search-box&quot;> <tbody><tr> <td class=&quot;gsc-input&quot;><input value=&quot;014037880324506594198:n7opl4yythc&quot; name=&quot;cx&quot; type=&quot;hidden&quot;/><input value=&quot;UTF-8&quot; name=&quot;ie&quot; type=&quot;hidden&quot;/><input autocomplete=&quot;off&quot; class=&quot;gsc-input&quot; name=&quot;q&quot; size=&quot;10&quot; title=&quot;search&quot; type=&quot;text&quot;/></td> <td class=&quot;gsc-search-button&quot;><input value=&quot;Search&quot; class=&quot;gsc-search-button&quot; name=&quot;sa&quot; title=&quot;search&quot; type=&quot;submit&quot;/></td> <td class=&quot;gsc-clear-button&quot;><div class=&quot;gsc-clear-button&quot; title=&quot;clear results&quot;> </div></td> </tr></tbody></table> <table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; class=&quot;gsc-branding&quot;> <tbody><tr><td class=&quot;gsc-branding-user-defined&quot;/> <td class=&quot;gsc-branding-text&quot;><div class=&quot;gsc-branding-text&quot;>powered by</div></td> <td class=&quot;gsc-branding-img&quot;><img src=&quot;http://www.google.com/uds/css/small-logo.png&quot; class=&quot;gsc-branding-img&quot;/></td> </td></tr></tbody></table></center></form> </li></ul>www.mindgap.in
  13. 13. Step 10 (cont) <ul><li>Your Notepad should have something similar to this now: </li></ul>www.mindgap.in
  14. 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. 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
  16. 16. Step 12 <ul><li>Go to your Blogger Layout settings, </li></ul><ul><li>Click on &quot;Add a widget“ </li></ul><ul><li>From the list of Widget types, select &quot;HTML/JavaScript&quot; </li></ul>www.mindgap.in
  17. 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. 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. 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. 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
  21. 21. PLEASE VISIT US AND DROP IN YOUR COMMENTS AT: WWW.MINDGAP.IN © 2009 WWW.MINDGAP.IN Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×