Table of Contents with Preview for Blogger.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.
Like this article? Subscribe to the RSS feed!
A better Blogger experience on the web
-
Since 1999, millions of people have expressed themselves on Blogger. From
detailed posts about almost every apple variety you could ever imagine to a
blog...
55 comments:
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
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
APF,
What are the links of the two blogs?
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.
Apf,
The feed url for the second blog is :
http://sfmga.blogspot.com/atom.xml
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.
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
SilentAssasin,
Have a look at
How to Increase Traffic with External Content?
How to attract traffic with Attractive Content?
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
Brace,
Presently private blogs in Blogger do not send out feeds, which is what this gadget is based on.
For some reason, after I put the widget up, nothing ever shows. It just says "Loading..." and never changes. Help!
klawedkillerkitten,
What is the address of the blog you put it in and what are the links you aded in the widget?
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.
Lorenhops,
In Settings---->Site Feeds options for slimodsoc blog choose the short option for posts feeds and save.
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?
Jim,
Good Luck with modifying the Javascript :
http://simblogg.googlepages.com/gfdynamicfeedcontrol.js
:-)
thanks so much, everything (almost) i find here , thanks again
theworldwithoutlimit.blogspot.com
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
Kathleen,
What is the blog address where you have put this?
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
hallo Vin
"feed could not be loaded"....could it be the reason that I use the feedburner?
Thanks
Angie,
What is the address of the blog whose feed you are attempting to load?
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*
The Mistress Didi*,
Is it a private blog?
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.
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?
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.
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
Beetles In The Bush,
It is working in my test blog here on top of posts column.
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
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.
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
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.
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.
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.
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
Lille Skvat,
Try this smaller Google Gadget which shows ALL blog posts.
Thank you, Vin :-)
hi ,
this feed is not working in my site
http://lyricsmoto.blogspot.com/
please comment on this thanks
Jessie,
What is the blog address?
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?
Kathleen,
What is your blog address?
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/
Radvan L,
http://radvanfoto.blogspot.com/atom.xml
Your above feed is working properly. Try changing it to Full in Settings---->Site Feed.
I've tried that, but it still says "Feed could not be loaded". What to try next? Thanks again.
Radvan L,
I do not see this widget in your blog. Where is it in : radvanfoto.blogspot.com
It is up, on the right side (above photo search engine).
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.
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
Radvan L,
Choose a gadget from My Gadget Showcase blog and I will send you the code by email.
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
Radvan L,
Send me email so I can send you the code.
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.
Albo P. Fossa,
Try the Table of Contents Google Gadget (between gadget 10 and 11) which shows all posts.
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.
Who is talking about the above post?