A Beautiful Blogger Table of Contents

Based on reader feedback, this blog's table of contents is a thing of beauty. So, what's stopping you from getting your own version. One reader said:
" I would love to have a TOC like yours, but I am not a technical person. If there is a step-by-step instruction on how to to it, it would be a great gift for bloggers like me! I read Han's instruction, but I got lost. "

Most of us would be in the same boat after reading Han's post --- a "simpler" version of his first post on installing a TOC widget --- bless him, he's too smart for us! Nonetheless, I accepted the challenge to give you a tutorial, then thought, can I pull it off? Sure those guys are brainy, but we can also get this feature with limited technical backgrounds. So here we go.

Overview of what's available

There have several articles around Hans' table of contents hack first released in April, 2007. Later updates addressed performance issues. My technique is yet another variation for placing the table --- it works quite well. Other blogs have published how-to's for creating your TOC. I found the clearest procedure for a TOC at ThirdWorldChaos, which I customized after some light reading at Hans' site where I found his buddy genius Ramani --- they ended up collaborating on subsequent features.

Making common sense of it all

My pet peeve about some tutorials or template downloads is the lack of support. I've left comments about errors, typos, etc. and weeks later no one responds or makes corrections. This can be discouraging. So if you have a problem with this procedure please make a comment or contact me at one of the social media spots listed at the bottom of the sidebar. Just one note, I'm away on 10/9 - 10/11/2008 so if you're nervous just try on a test blog first!

Pitfalls: two errors found in other procedures-

• "I tried this today on my test blog and could not get the TOC to display. Then I look at BeautifulBeta and learned they have changed servers, so the java will not work. You must change the server id from "http://home.planet.nl/~hansoosting/......." to "http://home.kpn.nl/oosti468/......" . Remember this when using most widgets!
  


• "Your page has an extraneous --> at the top. I noticed the same thing when I put the style code before the ]]></b:skin> ... Placing it after that line gets rid of the arrow and still works. " Beware of errors, it's not always your fault!

Getting it done

My procedure places the TOC in a separate post which you can link to in your menu bar or from the sidebar. That way visitors click to see it on a separate page, rather than have it open at the top of every page. This avoids the performance problems. I also take advantage of using a post by listing all titles and giving instructions on how readers can manipulate the list by date, etc. This avoids the reader having to toggle the list on. I also avoided the complications or extra steps shown in other bloggers' procedures.

Go to your Blogger dashboard, choose Layout and Edit HTML tab. Press 'Download full template' to save your current version. Search for anchor lines of code in these steps by using the Ctrl + F keys or your edit, find menu:

1. Find this near the end of the "head" section of your template
   ]]></b:skin>
   Just trust me and copy everything within the following scroll box, then paste it after the line you just found. This code contains styles for the TOC which you can change, but why bother --- use mine. I've changed the background, width and hover styles.
   
   
   
   

   
   <!-- 8/2008 add for TOC, omit background color, change width and hover -->
   <style type='text/css'>
   #toc {
   border: 0px solid #000000;
   padding: 0px;
   width:100%;
   margin-top:10px;
   }
   .toc-header-col1, .toc-header-col2, .toc-header-col3 {
   background: #ffffff;
   color: #000000;
   font-weight: bold;
   padding-left: 5px;
   width:60%;
   }
   .toc-header-col2 {
   width:20%;
   }.toc-header-col3 {
   width:20%;
   }
   .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
   font-size:90%;
   text-decoration:none;
   }
   .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
   font-size:80%;
   color:#000000;
   text-decoration:underline;
   }
   .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
   padding-left: 5px;
   font-size:80%;
   }
   </style> 
   

   
   
   
   Preview the template to make sure there are no errors, then save your work. If there is a problem you can try to backtrack or press 'clear any unsaved changes' and start over!
   
   
2. Then create a new post to hold the TOC. You may use the same wording in my TOC instructions free of charge. Again, I ask you to trust and just copy everything in the scroll box, go to the 'edit html' tab on the new post and paste everything! Then use 'compose' mode to edit any wording. Be very careful not to delete any lines between the set of asterisks since you can't really see them in compose mode! What I did was to put the Hans code in the post instead of in a separate java page element.
   
   
   
   <p>This page contains our table of contents, showing post permalinks, the date and labels (category names.) There is a short preview of each post when you hover the cursor over the title. Titles are in alphabetical order, but you can click on the date column header to sort in ascending or descending order. Click on a specific label (not the column header) to display only the posts tagged with that label. To go back to the full list, just click Post Title. When this post migrates off the home page visitors can use the menu or sidebar link to see the contents.
   ************ <div id="toc"></div><!-- make it show only in this post, sidebar or menu points here --><div id="toclink"><a href="javascript:showToc();">Hide TOC</a></div><span style="font-size:80;"></span><script src="http://home.kpn.nl/oosti468/downloads/blogtoc.js"></script>
   <script src="http://bpwebnews.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
   <!-- show contents automatically, no click needed --><script type="text/javascript">showToc();</script>
   ************
   
   
   But after you paste the code, you must change my blog address to your own --- talk about nice referral links if you don't! Find this text and replace with your url src="http://bpwebnews.blogspot.com

Read only if you want the TOC on every page [otherwise you're done here!]

If you do, be careful of performance problems. Perform Step 1 above and while you have the template open find the line "id=main" where the blog posts are defined. Replace that line with this one <b:section class='main' id='main' maxwidgets='2' showaddelement='yes'> This adds a new element at the top of each post page to display the TOC. Be sure to add a comment to yourself that you changed this line. I used this one <!-- 8/2008 chg maxwidget and showaddelement --> As an aside, I made the count 9, so I could add more boxes later to hold news or any info I want on every page. Also your template may already have a count, so just add one to make it 3, etc.

Then instead of Step 2, go to Layout, Page Elements, and add two HTML/java script page elements. The first one should contain only one line, the placeholder line <div id="toc"></div> . Do this by adding a gadget above the blog post element. Then add a java element in the sidebar to hold all of the code in the step 2 scroll box except the placeholder line. You can edit out the text about how to use it, or put that text in the placeholder element.

Summary

Some things like this TOC are just worth a bit of a struggle. This blog aims to keep it simple and help you over the technical hurdles (just close your eyes and jump). I filed this under 'life hacks'. So go for it! I'm anxious to see your beautiful TOC! By the way, don't forget to subscribe, if you want more tweaks.

Some new visitors are coming from the sites mentioned above --- leave a comment to let me know if this worked for you --- the spider no longer reads minds! You may also be interested in other posts related to blog design.
Choose Your Template Wisely
Color in Blog Design

Print this post