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!

 

  • 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.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.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


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


64 Comments

  1. (I deleted my previous comment by mistake. I retyped it down here.)

    SBA,

    Wow! This is an excellent article, pinpoints the pitfalls, error of the code, and server change. No wonder, before, I kept trying and it never worked, and there were no available support.

    I am so excited that your clear and easy to follow instruction works in my test blog:
    http://scratchtestblog.blogspot.com/

    Thank you so much SBA!

    Now, I am just trying to figure out why my second line in the Lablel Column, “Nh?ng Bóng Ma”, it skips so many spaces between words? I need some help.

  2. I found out why. Because the Labels column does not have enough space to contain all three words “Nh?ng Bóng Ma”. That’s why it pushes the last word to the next line and leaving a gap between the first and second. I have to explore how to manipulate the column space.

    Have a good time, and see you back after 10/11.

  3. It is fixed. I went back to step 1 and change the column widths in the code section to 40%; 20%; 40%.

    Success!

    Thanks a million, SBA!

  4. @Mai – I’m more than relieved that you got what you wanted! Even happier you could customize the columns without me (laugh).I often use test blogs. Once you start experimenting you learn without the mental block and feel a sense of accomplishment.

    @Fransiska – Saw your nice compliment at BlogCatalog and thanks for the link. Happy to hear you’re using it. I see you have over 200 posts and they loaded quickly. You can also put the list in a scroll box that’s long enough to hold a printable page at a time.

  5. I wish i was better at understanding html. unless you can think of a way for me to simply cpy and paste something, i will just have to live without it

  6. It sounds like a sweet idea to showcase all the content of my blog in one place. It’s kinda a shame that most of the content beyond the first page gets hidden away and rarely looked at.

    Too bad that I can’t do this with the WordPress.com online software. I can’t really achieve this until I get hooked up with the .org version with my own software.

    Probably as I get more established 🙂

  7. @Iandotcom – I did see a WordPress TOC but the blog must have been hosted with the offline version. I found a couple of good articles from the list that I may have missed otherwise.
    Well, what are you waiting for, get established!LOL

  8. This is an excellent tutorial! blogged about this in my blog ^_^

    great job! will certainly try this.

    thanks for visiting and following mine ^_^

  9. @techniqueal – I’m sure you’ll like it. Thanks for the compliment from someone who’s not too shabby at writing tutorials.

  10. Thanks for this great post :).

    I have very limited understanding about html codes, but to my relief your tutorial was quite easy to follow.

  11. @Rosidah – I’m happy to see you implemented your own version of the TOC in your blog’s sidebar. It’s a bit of a tight squeeze but your post titles are short! lol I added my name as a follower to keep up with your creative ideas. Thanks for stopping by.

  12. Thanks for your kind words :).

    I’m also following your blog to see more great blogging tips in the future. I had seen the Beautiful Beta widget for a while and thanks to your post could finally add it to my blog :).

    Yes, it’s a tight squeeze LOL… I was not sure if the TOC would always appear on every blog page when I add it into a post. Could you enlighten me on this?

    Keep up your wonderful work, I like this blog very much. Best Wishes!

  13. @Rosidah – If you add the TC in a post, just publish the post, find the url, then put the link in your side bar (or in the menu like I did — see TOC button at top of the screen). So it would NOT appear on every blog page , but visitors can easily access it from the side bar. Like now, just press TOC from this post!

  14. I just followed your instructions and put your site as reference at the end of post. Thanks for your help. Best Wishes :)!

  15. Great, I like to hear when people implement this on their blogs! Don’t forget the post will migrate off your home page, so be sure to add a link in the sidebar! See notes above — I wrote to Rosidah.

  16. i've added the TOC, thanks to you. but is there a way to not show the lebels? please let me know.

  17. Hi, Sorry, labels are part of the java script, so you can not delete that column.  By the way I did not see  any link to your new TOC in the sidebar or on the menu — I had to do a search. Now I see why you don't want the labels to show…. they are long and numerous per post title. BUT that is not the problem! Your tweet and digg icons are interfering with the spacing, forcing the toc to take up only about 60% not 100% of the post column width in total!  You need to place those icons in a separate div tag on top of the post text — floating right takes up too much space.

  18. I took a look and the text font is too small and too light (gray?)— visitors can not read it. Also your post colunm is so very narrow. I suggest changing the blog's text to bold black. Please consider making your 2 side bars narrower and widening the post/main column!

  19. Hello Tardy, Nice job with your install and thanks so much for the recognition — I left a comment on your post where you were so generous with crediting this tutuorial. Your blog design is unique, very warming… Enjoy.

  20. Thank you for sharing a great TOC design. It is by far the best I have come across. Can I please ask what should I do, if I want the font-size in the TOC (not the intro) to be bigger, and with a different color?
    Best wishes
    Rudi

  21. Rudi, I need your blog address or some way to contacting you to verify what you need. My styling controls the size of the font by specifying a percentage — see "font-size:90%" or "80%". You can change this to 100 or 110 etc. to see the difference. As for the color, it picks up your template colors but you can override by adding the color value. e.g.#7dbaf3 for blue shade.

    The elements have names like
    <pre>.toc-header-col1 for the header row and .toc-entry-col1 for the other entry rows.</pre>

    e.g. to change just the entry rows add color here:

    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding-left: 5px;
    font-size:80%; color:#7DBAF3;

    Hope this helps

  22. hi, thanks for the reply
    was able to change the font size, but not the color, somehow the overriding was not successful, as these are all links embedded text. my blog address is http://hongkongsfirst.blogspot.com, i hope you will enjoy visiting the site whilst trying to idenify what i missed. many thanks
    best wishes
    rudi

  23. Rudi, you need to set the color for other elements like 'linked', 'visited' and 'hover' — otherwise it takes the template default. So add these lines and you can change the color as needed. e.g. you may want visited to be a different color to alert the reader…

    .toc-entry-col1 a:visited, .toc-entry-col2 a:visited, .toc-entry-col3 a:visited {color:#aca394;}
    .toc-entry-col1 a:link, .toc-entry-col2 a:link, .toc-entry-col3 a:link {color:#aca394;}
    .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover (color:#aca394;}

    I do like your template! Makes me want to try something different…

    Recent blog:=- Why CommentLuv may not be working for you

  24. Thanks so much, you are so very kind!
    Will give it some thoughts over the font color scheme for the whole thing …
    Best wishes,
    Rudi

  25. Thanks SBA for the great TOC.
    Wonder is this possible. Lets say if a blog post have 5 labels. Is it possible to create a TOC for each label and therefore have 5 TOC (for each label) and in separate pages in blogspot?

    • Jose,
      I’m glad you found this post — I do miss my TOC since I moved from
      Blogger. Amazed you could build it without seeing the one I had working. I
      hope to set up a demo blog to show an example. Yours looks great. Thanks for
      visiting and leaving a comment.

    • Hi Eric,
      I’d like to help but I need to see what’s ‘not working’ — can you put the TOC on a new page and send me the link to see exactly what went wrong…

    • I see from your code that the quotation marks are all messed (some are double and some duplicated) so look at the code between the
      ************ and make all single quotes instead of
      id=””toc””
      or src=””http:

      Check all of them…

      • Eric
        I realize now that WP ruined the tutorial code by messing up the quotes (turns them into ‘curly’ quotes which are never copied correctly for pasting as html!!!) I just installed the No Curly Quotes plugin and re-published the post. So it should now work if you copy the code and write over what you have there now — just remember to replace my blog url with yours! Sorry, but thanks for leaving the comment which uncovered the mess…
        Let me know if it works. Now I need to re-publish other blogger hacks…

  26. THANKS a lot!!! It works !! It’s wonderfull, you actually helped me, and your website is realy useful.
    yours sincerely

    • Great to hear it! I just HATE tutorials that don’t work. I know how hard people search and how excited they get when it looks like ‘this is perfect’. So I feel a responsibility to make sure you can ‘trust me.’ I avoid tutorials where the author does not respond to calls for help in the comments!!!

  27. Excellent article! Thanks a lot! It is very useful to the bloggers like me who really doesn’t know even A-B-C-D of technical skills/hacks/codes/scripts etc. I’ve tried it for a chance and got it really worked.
    I’m impressed and by subscribing your blog via email, really hopeful for making some changes to my three-years old blog, and certainly for doing something other on my blog than writing only literary and poetic posts.
    Thanks again.

    • Welcome Himanshu! I’m so happy to see a real live comment… tired of spam… LOL. Thanks so much for your feedback. I visited your site but wasn’t able to read one word — have you considered adding a translate button? although it might mangle your poetic posts. I was anxious to see the table of contents so I found it by clicking your top menu — http://ramyantar.blogspot.in/2009/09/my-posts-table-of-contents.html
      Very nice.

      You can add translation here (press addtoBlogger button): http://translate.google.com/translate_tools

      • you’re so generous to say ‘nice’…because of pasting some codes (that’s of your own) in my template!
        I’ve added translation widget on my blog as you’ve suggested me.
        Now going for a journey of your site to find more useful techniques to make my blog useful and well accessible.
        Thanks.

        • Well, you’d be surprised how many folks have problems pasting code — just the thought of html and templates cause a mental block.. lol

          Funny I suggested you add a translate and I don’t have one on my blog! so I’ll add one soon. However, at first I could not find yours — your page loads very slowly so it appeared last. I’ll take a look later and see if I have any suggestions…

          Obviously some things are lost in translation but it’s a useful tool.

          • Exactly my page loads slowly….I don’t know, Why? It’ll be my pleasure to hear the reasons and suggestions from you…
            I’ve recently changed my template a week before…and surely not able to manage everything in it. I’ve noticed Image thumbnail problem. Page loading is already a bigger than every other issue.

            Thanks to cover me in your notice….

          • Hi again..
            You might want to checkout this javascript which is not loading (or too slow..):
            http://this.prachaar.com/prch_this.js
            I saw it flagged in this and another site speed checker:
            http://www.webtoolhub.com/tn561353-website-speed-test.aspx

            Look at your site in http://webwait.com/ and you’ll see 22 seconds to fully load (the image on right shows exactly what I see when your backgr. color shows but the white behind posts takes so long, and the gtranslate loads near the end.) there’s also a gray line half-way down the color of background which makes it seem to be repeating — so does your template use an image or a color element???

            As for the new template, maybe set the backgr to white and the post bkgr to transparent to see if it reduces loading.. You can also make sure your images are on a library that loads fast and they are resized from the original.

            By the way any idea why commentluv doesn’t show your last blog post when you make a comment?

  28. Hi…
    It demands more thanks to you..
    I’ve deleted the script(http://this.prachaar.com/prch_this.js)which was actually useless for my blog and was creating problems. Now my blog is loading fast(now it takes 6 seconds to load) and I’m feeling cool.

    For white behind posts, I’m unable to find the reason..though template uses color elements (I think so..because of its support to Blogger Template Designer, as one can easily change the post-container color through BTD. The question of grey-line is also remained unsolved…and it needs your attention (Please….)

    For images, I don’t know how to set my images on a library that loads fast and they are resized from the original.

    A request to you….Please don’t feel panic for my immature queries (as these emerge from my innocent curiosity and from my wish to make myself better).

    • Glad to hear I could help! Don’t worry about the images since the javascript was the problem. As for the background it is loading without the multiple painting of the screen. So last thing remaining is the gray line. I found the code line in the html that you can adjust — however it may be in the css style sheet on the template owner’s site which may be called dynamically. If you see in your template you can make the 8px into 0px to remove the line. Otherwise report this to the template owner..

      html { box-shadow: 0 0 8px #C1BFBF inset;
      }

      • I’ve done as per your instruction…find the code and alter it….and all is done! The last remaining grey-line is invisible now. 🙂
        I must thank you! Thanks!!
        ..
        Now going to read your new Password-post.

  29. Great! Maybe you can help me understand why your last post is not showing in CommentLuv — do you see the box checked when you reply or add a comment?

  30. I may help you!!–feeling of this makes me happy. Certainly I see the box checked and also get my last ten posts to select one of them. Surely I select one of them everytime I comment, but strangely commentluv rejects my posts to show.

    How can I find the error and can help you….searching and searching.
    Please finger the way, I will be farward.

  31. Great! I found it.:)
    It’s clear that CommentLuv is rejecting Hindi(Language widely used in India) titles or feeds. My English Blog’s post-title is shown here by CommentLuv. Why? How can I be able to know?

    Great satisfaction to me after finding the reason.

    • Well you found the problem — CommentLuv was unable to store Hindi characters as part of the ‘recently posted’ data. After a lengthy dialog with the support person, it turns out my commentmeta data was set for Latin1_Swedish! Don’t ask me how, I remember the site was moved from BlueHost so it may have happened then. Bottom line, I need to change the table settings using the web host control panel. Changing WP database/tables can have unexpected results — especially when you have just one typo. I’m not too comfortable doing this so I’ll just ask you to key your ‘recently posted’ url at the end of your comments.

1 Trackback / Pingback

  1. Gadgets for Creating Blogger Table of Contents « BPWebNews

Comments are closed.