Yet Another Table of Contents YATOC. ~ The Blog Doctor.

Yet Another Table of Contents YATOC.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :

You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................


To install this gadget follow these steps :

1. Login at

2. Click Layouts link under blog title on Dashboard.

3. Click 'Add Gadget' link on Layout---->Page Elements subtab.

4. In popup window scroll down and click Html/Javascript gadget.

5. Copy all the code below :

Copyright (c) 2008 Google Inc.

You are free to copy and use this sample.
License can be found here:
<script src="" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "1.x", { packages : ["blogger"] });
<script type="text/javascript">
function _run() {
var content = document.getElementById('content');
var bloggerService =
new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var feedUri = '';
var handleBlogPostFeed = function(postsFeedRoot) {
var posts = postsFeedRoot.feed.getEntries();
var html = '';
html += '<dl>'
+ '<dt><strong>Blog:</strong> '
+ '<a href="'
+ postsFeedRoot.feed.getLink('alternate').getHref()
+ '">'
+ postsFeedRoot.feed.getTitle().getText()
+ '</a></dt>';
html += '<dd><ul>';
for (var i = 0, post; post = posts[i]; i++) {
var postTitle = post.getTitle().getText();
var postURL = post.getHtmlLink().getHref();
html += '<li><a href="' + postURL + '" target="_blank">'
+ postTitle
+ '</a></li>';
html += '</ul></dd>';
content.innerHTML = html;
var handleError = function(error) {
content.innerHTML = '<pre>' + error + '</pre>';

bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="">Yet Another Table of Contents-YATOC.</a>

6. Paste in contents window on HTML gadget popup window.

7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.

8. Save Gadget.

9. View Blog. Wait for page to load completely for gadget to load.

10. Enjoy your sitemap!


Anonymous said...

Thank you.

Unknown said...

I have read all your comments on 3 column layouts but can't seem to make one fit my template e.g. I can't find 'b-skin -[DATA] or whatever it is. I'd really like to have three columns
thank you in advance for your help

Vin said...


Go to Layout---->Edit Html and from bowser menu do Edit---->Find for


Dr. Hu said...

Cool, thanks for sharing!

Brandy said...

Hi, I see that you post a bit in the Blogger Help forums.

I do NOT have , OR WANT, a Blogger Blog. However, I DO read and comment on many of them. Under the comment box, it states that the comments box will take 'some' html. I am finding that to be rather untrue, as every time I try to bold, italicize, or strikethrough ANYTHING on ANY Blogger blogs, I get an error message.

I have searched for 2 HOURS tonight trying to find ANY HTML codes (besides the measly 3 listed) for use in the comments box.

ARE there any? Are you allowed to share them?

(Sheesh, even LJ is easier to use than Blogger... rumors of Blogger's demise make me happy today...)

Vin said...


What is the exact error message? You can only use BOLD , Italic etc.. those tags in comments and no other tags.

Unknown said...

I really like this gadget :-)

Was wondering if there's a way to fix the margin/post titles so they'll start at the left margin. I'm a novice, so I may not be describing my question correctly. Here a pic:

Also, I thought the scrolling TOC would be better for my main blog (Truckalogue) spacewise, but I couldn't get it to work. Any ideas?

And I wish it didn't take forever for your pages to load :-) :-) :-)

Vin said...


That can be done. Contact me by email. For a scrolling posts gadget see No 29. on My Gadget Showcase Blog.

Pollyanna said...

What would need to change in this code to make the posts show up in alphabetical order instead of date posted order?

Thanks so much!

Vin said...

The Laughing Idiot,

First use Yahoo Pipes to sort posts alphabetically.

Then get the link of the RSS feed of that pipe and add it in above code in place of :


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.