How To Create Table Of Content Using AJAX Feed

Follow below steps to create nice Table Of Content for your blog.

1.First sign up for your Google API Key.



2.Now copy your AJAX Feed API key to notepad.



3.Now Login to your blogger dashboard--> layout- ->Page Elements

4.Click on 'Add a Gadget'.

5.Select 'HTML/Javascript' and add the code given below.

<!-- ++Begin Dynamic Feed Wizard Generated Code++ --> <!-- // Created with a Google AJAX Search and Feed Wizard // http://code.google.com/apis/ajaxsearch/wizards.html --> <!-- // The Following div element will end up holding the actual feed control. // You can place this anywhere on your page. --> <div id="feed-control"> <span style="margin:10px;padding:4px;">Loading...</span> </div> <!-- Google Ajax Api --> <script src="http://www.google.com/jsapi?key=YOUR-AJAX-FEED-API-KEY>>" type="text/javascript"></script> <!-- Dynamic Feed Control and Stylesheet --> <script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js" type="text/javascript"></script> <style type="text/css"> @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"); </style> <script type="text/javascript"> function LoadDynamicFeedControl() { var feeds = [ {title: 'Table of Contents', url: 'http://YOURBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999' }]; var options = { stacked : true, horizontal : false, title : "YOUR-BLOG-TITLE" } new GFdynamicFeedControl(feeds, 'feed-control', options); } // Load the feeds API and set the onload callback. google.load('feeds', '1'); google.setOnLoadCallback(LoadDynamicFeedControl); </script> <!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

6.Now Replace,

YOUR-AJAX-FEED-API-KEY with your real key.

YOURBLOG with your real blog name.

YOUR-BLOG-TITLE with your real blog title.

7.Now click SAVE and you are done.Look at the picture below.