Create a customized google news AJAX API for your Blogger Blog on Blogspot – Customize color, style and more

Google AJAX APIs are quiet good and useful if you can use them correctly and using that only I have made the above shown news feed for our greenTechspot. So thought of sharing them with you! Here is how I did this — Its not that complicated if you follow the steps correctly
Goto Google AJAX Search API. Step by step instruction is given there. But I will give you a summarized instruction.

BASIC INSTALLATION:

• Goto Blogger Dashboard ►Layout ►Page Element and add a new HTML/Javascript element.
• On that element copy-paste exactly the following code
  

  <script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY”
  type=”text/javascript”></script>
  <link href=”http://www.google.com/uds/css/gsearch.css”
  rel=”stylesheet” type=”text/css”/>
  <script src=”http://www.google.com/uds/solutions/blogbar/gsblogbar.js”
  type=”text/javascript”></script>
  <link href=”http://www.google.com/uds/solutions/blogbar/gsblogbar.css”
  rel=”stylesheet” type=”text/css”/>
  <div id=”blogBar” class=”blogBar”>Loading…</div>
  <script type=”text/javascript”>
  /**
  * LoadBlogBar: Called when page loads
  *
  * Create a manually switched Blog Bar
  * and place it in “blogBarTop”
  */
  function LoadBlogBar() {
  var root = document.getElementById(“blogBar“);
  var options = {
  largeResultSet : false,
  resultStyle : GSblogBar.RESULT_STYLE_EXPANDED,
  title : “Nintendo in the blogsphere“,
  autoExecuteList : {
  executeList : [ “Nintendo“, “Nintendo DS“, “Nintendo Wii” ]
  }
  };
  var blogBar = new GSblogBar(root, options);
  }

  /**
  * Arrange for LoadBlogBar to run once the page loads.
  */
  GSearch.setOnLoadCallback(LoadBlogBar);
  </script>

  Let us now analyze the properties of the coloured portion which you need to modify

  1. YOUR-KEY=> It is the API key which you need to generate! Its unique for every blog. Goto Google AJAX API Signup page and submit your Blog URL and they will give you the API key! Replace YOUR-KEY with the generated key.
  2. blogBar => It is the Id of the element where the News are going to get embedded. Make sure that neither of the highlighted portion gets altered.
  3. Nintendo in the blogsphere: It is the title of the News API. Change it to anything you want.
  4. Nintendo=> All the green coloured values are the keywords used to make the search. Make sure you change it to relevant values. You can add as many comma seperated values you want like key1, key2, key3, key4 and so.
• Done are customizations. Save your HTML/Javascript element and position the Widget where you want. Then check your blog! You should see the Google Search AJAX API coming into action

ADVANCED STYLE CUSTOMIZATION:

Now comes the style and customization part. If you have some basic knowledge on Web development and CSS then you can do it by yourself! All what you need is FireFox with Firebug addon. Also see this Video Tutorial on Google Ajax search blog to learn how to find the Id and Class of the relevant elements.
For users who are quite new to this and can not modify at their own, I am sharing a part of the CSS code I have used here. Here is what you need to do:

• Goto Blogger Dashboard ►Layout ►Edit HTML
• Now find ]]></b:skin> and BEFORE it paste the following piece of code
  

  .blogBar {
  width : 90%;
  margin-top: 2%;
  margin-right: 2%;
  margin-left: 2%;
  margin-bottom : 2%;
  }
  /* Title of the News*/
  a.gs-title {
  color : HEX CODE;
  }
  /* Result URL*/
  .gs-result .gs-visibleUrl {
  color: HEX CODE;
  }
  /*Publish date*/
  .gs-publishedDate {
  color: HEX CODE;
  }
  /*Main news body*/
  .gs-snippet {
  text-align: justify;
  }

• You obviously need to replace the coloured HEX CODE with Hex color code which you can generate from here.
• Remember you can add as many CSS code you want there! Also if you can identify what CSS class is being used by using Firebug then also you can specify CSS definition for them
• Save your template and see the result! Quiet impressive isnt it.

ADVANCED JS FUNCTIONABILITY MODIFICATION:

Want to customize more by tweaking the function? Well you can do this for sure if you have some knowledge on JS. Head on to this documentation of AJAX Code to learn how. Well I do have modified loads of things by reading their documentation! Its quiet easy if you have patience to read them all

WIZARD BASED INSTALLATION: Easy but less customizable:

If you dont want to go throught all the above steps then there is an easy way of doing this also.

• Goto the Google AJAX search API Wizards page, choose the search you like and simply follow the steps there. Its quiet easy but very less customizable.
• At the end of the process copy the generated HTML/JS code and paste it in a HTML/JAVASCRIPT Widget on your blog!

As simple as it can be

Thats it for now! We shall give you some more tips and tricks on modifying your blog with AJAX and API tools! Theres much to explore for us!
Please do leave a comment on how you like this tutorial and if you have any doubt feel free to ask me…..