Bismillah, Alhamdulillah

Skip to Content

Table of contents and Accordion for Blogger

May 15th, 2010

Bismillah
Allahmdulillah, Alhamdulillah, Alhamdulillah
Usually we have so many posts in our blog and if we used TOC it will be very long. If we have very long TOC, it make visitors difficult to read our posts. To make it easy to read I made modification from previous script Table of Contents for Blogger new style and I used Accordion.
Feature of this script :

  1. Accordion effect
  2. Show and hide effect
  3. CSS 3
  4. Automatic add jquery
  5. Different color for content
  6. Different style for open and close
  7. Auto Sort the title
  8. Add New!! for 10 newest entry

How to use is very easy. Create Static Page .
Put the script in Html mode


<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Replace www.oblo.web.id with your blog name
Demo

Demo

Below images are how to create page in blogger.



Categories: Blogger Tricks, Table of contents

Tags: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

184 Responses to “Table of contents and Accordion for Blogger”

  1. […] lets you create Table of contents using JavaScript. Abu-Farhan modified this script to create the Accordion TOC. Later I came across this cool sitemap by CSSGlobe powered with Toggle option. So i thought of […]

  2. Habibi Daeng says:

    I confuse, it doesn’t work at all in my page :(

  3. Roshan says:

    Thank i have used it on my website “magicbox4us.blogspot.com”

  4. James says:

    How do you make the tabs condensed by default?

  5. [...] at Abu Farhan’s blog, I found the following post: Table of Contents and Accordion for Blogger.  Abu provides a quick and easy way to create a table to contents page by topic, simply by putting [...]

  6. simple and beautiful. . .
    keep posting bro. . .

  7. RP Sharma says:

    Super and easy to use. Thank you very much

  8. royan says:

    eazy and fun. Great guys..

  9. lijo kv says:

    Dear friend ,This is nice and informative post thanks.I like your writing style

  10. Haz says:

    thank you :)
    Easy yet great..

  11. Ckay says:

    Many thanks, it looks wonderful.

Leave a Reply


five + = fourteen

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen