Table of Contents with Preview for Blogger. ~ The Blog Doctor.
Loading...

Table of Contents with Preview for Blogger.

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

A Table of Contents is essential for each blog so that readers can look at the post titles and decide which post to visit. The Blog Archives widget can be configured to show all post titles but it has the dates also cluttering up the view. Then there are the arrows collapsing past months so that all post titles are not seen at once.


Classic templates have a Previous Posts section which shows only the previous ten posts. Here also all the blog posts cannot be seen.


One method to display post titles without dates is by using blog feeds. However this shows all posts from one blog only! What if you have multiple blogs and wish to show posts from all of them in one place? See picture below :



This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.........


TOC for ONE BLOG


First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.


Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :

<!-- ++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=<<INSERT 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://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "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>
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->


Change the code in green CAPS ('MYBLOG' and 'BLOG_TITLE') to your blog name and the title of your blog.


Also sign up for your Google API Key and put it instead of "<<INSERT KEY>>" in the above code.

Then save the page element. View Blog and wait for the page element to load. See Picture below :



You can see a live demo at top of the posts column on Widgetry blog.


55 comments:

tropicalmalibu said...

Thanks alot for all of your helps, i have solved many different problems thanks to your site and the replys you send in the help group. I cannot do without looking at your site atleast once a day. I have learnt many different things.

Thanks Alot.
Tropicalmalibu
http://tropical-malibu.blogspot.com

APF said...

Problem is, on one blog, try as I might, I can't get it to generate a feed. I have IDENTICAL widgets in two blogs (I even copied and pasted the code!!!). One generates feeds, the other does not. I sat on one browser one one, and on one browser with the other, and ensured all settings were IDENTICAL! Yet still, no feeds. So I suppose it is no fault of your code... Thanks, anyway

Vin said...

APF,

What are the links of the two blogs?

APF said...

The two blogs are at (1) The one that DOES generate a feed: http://pithagora.blogspot.com and (2) The one that does NOT http://sfmga.blogspot.com

The latter has posts dating back to 2001. I can, in "archives", view all titles, in both. I was able, in the the first, to use the (somewhat famous) generated by idte.vcss.php ... am I spelling that correctly? to view ALL titles. In the latter, I could view only the titles for only the CURRENT year.

When I "View Source" for the first, (last time I looked) I can clearly see generated feeds. For the latter, I cannot. Strange at best.

I have posted in Google Groups with, as you might imagine, no response.

Vin said...

Apf,

The feed url for the second blog is :

http://sfmga.blogspot.com/atom.xml

APF said...

Well, duh and thanks. I can't recall what I did wrong the first try with your code, but it came up blank! Now it works like a champ (as you may see, if it lasts, paranoid that I am). Thanks again, from a dolt.

SilentAssasin said...

hii,vin
im a gamer mad about gaming
and my blog is of gaming
but i dont get much traffic on my site bcuz its not my upload
i coud`nt upload bcuz i dont have a
fast net connection
they i have add credits to the upload i wanna ask u could i do something to optimize my blog traffic
www.psp-r.blogspot.com

Vin said...

SilentAssasin,

Have a look at

How to Increase Traffic with External Content?

How to attract traffic with Attractive Content?

BRace said...

I tried to set it up for one blog and it says "feed could not be loaded". The blog is private until I have worked out the formatting and some content issues. Is that the problem?

Thanks

Vin said...

Brace,

Presently private blogs in Blogger do not send out feeds, which is what this gadget is based on.

klawedkillerkitten said...

For some reason, after I put the widget up, nothing ever shows. It just says "Loading..." and never changes. Help!

Vin said...

klawedkillerkitten,

What is the address of the blog you put it in and what are the links you aded in the widget?

lorenhops said...

Hi Vin
Thanks for the awesome site. I'm having the same problem as killerkitten. The blog URL and title I entered into the code were:

http://slimodsoc.blogspot.com/

Slightly Moderated Stream of Consciousness

Trying to stick feed it into one of my other blogs: Loren's Rich Internet Life. Any help, would be greatly appreciated.

Vin said...

Lorenhops,

In Settings---->Site Feeds options for slimodsoc blog choose the short option for posts feeds and save.

Jim said...

Thanks very much, Vin. The Table of Contents gadget works great. One question -- is it possible to eliminate the green arrow and the movement from one entry to the next?
If so, how?

Vin said...

Jim,

Good Luck with modifying the Javascript :

http://simblogg.googlepages.com/gfdynamicfeedcontrol.js

:-)

TheShaDowX said...

thanks so much, everything (almost) i find here , thanks again



theworldwithoutlimit.blogspot.com

Kathleen said...

I am trying to get a "title widget" on my blog. I was able to follow your instructions and open up an HTML box, but it is blank.......so, now how do I get a title list of my blogs to post into it automatically?

KathleenR

Vin said...

Kathleen,

What is the blog address where you have put this?

finola said...

I just used your contents widget and it is FANTASTIC! Thank you - it works fine and does exactly what I wanted and more (the changing preview)

http://artsandcraftsvillage.blogspot.com
http://sunrainor.blogspot.com
http://explorearts.blogspot.com

Angie said...

hallo Vin

"feed could not be loaded"....could it be the reason that I use the feedburner?
Thanks

Vin said...

Angie,

What is the address of the blog whose feed you are attempting to load?

The Mistress Didi* said...

Hi Vin,

Thanx so much for this wonderful resource site! You're a doll!

I have a little problem: I am unable to change the site feed to SHORT - I think because I have them set up to feedburner.

Any suggestions?

Again, thanx for everything!

Mss. D*D*

Vin said...

The Mistress Didi*,

Is it a private blog?

searchingwithin said...

I have been looking for something like this, however, it is too large. It sure would be nice if you could do it with a drop down list, or a scrolling list, so it won't take up so much space.

Thank you for all the help your site has provided.

Ted C. MacRae said...

Hi Vin,

I pasted the code into an HTML widget in my sidebar and changed the site feed setting to "short" - all that appears is "Loading...
Widget by Betabloggerfordummies."

I replaced "MYBLOG" with "beetlesinthebush" and "BLOG_TITLE." with "Beetles In The Bush" - any ideas?

Vin said...

Ted C. MacRae,

Try copying the code and making the modifications again. Do not modify the last part of the code :

.....
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

My Table of Contents at Widgetry is still working so there is no error in the code.

Beetles In The Bush said...

Hi Vin,

I pasted the code and made the modifications again - making sure nothing else was modified. I get the same message. Is there some other blog setting I might be missing?

Thanks--Ted

Vin said...

Beetles In The Bush,

It is working in my test blog here on top of posts column.

Estela de Cometa said...

Hello, first of all thanks for all the help. I have a question, is it possible to change the order of the feed to show first the oldest post (ascending view)?

Many thanks

David

Vin said...

Estela de Cometa,

To sort the posts :

Take the blog feed.
Sort it using Yahoo Pipes.
Save the Yahoo Pipe.
Get the RSS feed URL of the pipe.
Paste it in the code shown in above post instead of the blog feed url.

indianspirituality said...

Dear Vin,

Thanks a lot for TOC. Is it possible to modify this wdget so that it can run when the feed setup is selected "full" instead of short. I wish to have my email subscribers to receive full posts in the email. my blog url is
http://www.indiaspirituality.blogspot.com/

Thanks

Vin said...

indianspirituality,

Try this :

Burn another blog feed at Feedburner.com

Customize this feed to show as short using Customize tab.

Then use this feedburner url in the above gadget.

indianspirituality said...

Dear Vin,

Thanks for the reply. I have a Feedburner account. and the feed url is: http://feeds.feedburner.com/Indiaspirituality. The widget is working, but the problem is that it shows only 25 feeds (but this time it works when site feed is seleted 'full'). I checked at Feedburner ->Optimize -> Your Feed. It also shows only 25 feeds.
I unsucessfully tried the option max-results=999.
I started blogging since last Feb and added feedburner on 29th May 2008. I have 168 posts till date.
(http://indiaspirituality.blogspot.com/)

I also tried your other option to create Java Script, but same only limilted posts are shown in the preview. Also the link you mentioned for Jscript says that " this service may go off soon ... better option is avaialbe to google..."

The widget is very good ad works great.

I really appreciate your efforts for helping bloggers. Your blog is really great.

indianspirituality said...

Dear Vin,

I had just submitted a comment before 10 mins. I just spotted "Yet Another Table of Contents-YATOC." This was the one i was looking for. Since i have 168 posts, i just added a scroll bar (height:500 px and over flow:auto). It looks good. I will also try to create sitemap as per your insturctions when i get free time. I have subscribed to your blog.

Thank you so much for creating a resource rich blog.

Lille Skvat said...

Hello! Thank you for your post. It helps a lot!

I have a couple of problems with this widget. I only get the last posts and not every post on my blog (there are more than 500). And the frame get cut on the right side. Do you know how I can make it work for every post? And maybe adapt its layout for my blog?

You can see the result at http://lilleskvat.blogspot.com/2008/12/tabla-de-contenidos-de-mi-blog.html

Thank you very much in advance.

Best regards,

Lille Skvat

Vin said...

Lille Skvat,

Try this smaller Google Gadget which shows ALL blog posts.

Lille Skvat said...

Thank you, Vin :-)

Jessie said...

hi ,

this feed is not working in my site
http://lyricsmoto.blogspot.com/
please comment on this thanks

Vin said...

Jessie,

What is the blog address?

Kathleen said...

I cannot tell you how many times i have tried your Table of Contents html and followed it exactly.....it still will not work......any other suggestions?

Vin said...

Kathleen,

What is your blog address?

Radvan L said...

Hi Vin,
great idea for a widget but mine it says "Feed could not be loaded". I've looked on all your previous answers above and I did what you said but ... nothing. What to do? Thanks again. My blog is
http://radvanfoto.blogspot.com/

Vin said...

Radvan L,

http://radvanfoto.blogspot.com/atom.xml

Your above feed is working properly. Try changing it to Full in Settings---->Site Feed.

Radvan L said...

I've tried that, but it still says "Feed could not be loaded". What to try next? Thanks again.

Vin said...

Radvan L,

I do not see this widget in your blog. Where is it in : radvanfoto.blogspot.com

Radvan L said...

It is up, on the right side (above photo search engine).

Vin said...

Radvan L,

This line in the code is not to be changed :

google.load('feeds', '1');

Do it again and change only as per the instructions.

Radvan L said...

done, nothing so far. I am doing something wrong but I don't know what. The Google AJAX Feed API is the small one (where it says "Your key is") or the large one below? Or, do I have to write the name of my title blog with a line (blog_title) or without this line? thanks

Vin said...

Radvan L,

Choose a gadget from My Gadget Showcase blog and I will send you the code by email.

Radvan L said...

Hi Vin, I am interested in the one with Table of Contents Autoscroll, but can you do a code for another blog of mine, http://radvanatitudini.blogspot.com/
where I have a lot of (too many) posts. For radvanfoto.blogspot.com I managed to recover the old way of showing posts (also thanks to a way recommended by you). Thanks in advance, RL

Vin said...

Radvan L,

Send me email so I can send you the code.

Albo P. Fossa said...

Curious problem. (I've posted before, above, as "APF".) In the cited blog, with a humongous title list, the gadget has quit posting titles. The gadget lists 2008. Several entries have been posted in 2009.

I'll have to admit, it's a REALLY long list of titles, and it's asking a lot of the gadget and on, and on. But curious, nonetheless, as to why it stopped at the top rather than the bottom.

FWIW, it should be noted that I *entirely* rewrote and restyled the GoOgle template from scratch; but I should think, that has nothing to do with the gadget's ability to fetch titles.

Vin said...

Albo P. Fossa,

Try the Table of Contents Google Gadget (between gadget 10 and 11) which shows all posts.

Prathima Naveen said...

Hi Vin,

First of all thenq very much for this post.

I have tried to get it done in my blogs, but I have not succeeded. Please have look at my blogs and let me know your response

http://prathisnewtrails.blogspot.com/
http://moreinfowithprathi.blogspot.com/

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

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,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.