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 :
- Accordion effect
- Show and hide effect
- CSS 3
- Automatic add jquery
- Different color for content
- Different style for open and close
- Auto Sort the title
- 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
Below images are how to create page in blogger.
42 Responses to “Table of contents and Accordion for Blogger”
Leave a Reply
Asalam Alikom,
Happy Eid for you all.
It is really a great post. I will try it once I go back to my house. I hope it will work with me. all the best for you.
regards,
H. Belal.
Hi abu,
i like the widget of yours but this will not lead you to success as many people will either change your javascript, or they will use alternatives as you have straight forward attached http://www.abu-farhan dot com
to it,
people don’t like things like this, if you want your link in it then make it hidden, in this way you will get back link and people will not find it teasing.
thank you
Please disregard my last comment. I found out what the issue was and it was an error on my part. Very nice! Thanks again.
This is a great effect but my only problem is that when I click on a tab it pops open but quickly closes. Is there anyway to fix this? I really would like to use this for my blog. I click the tab once and it opens for half a second then immediately closes. Please provide solution. Anyone.
Ass…
Bagus banget mas…izin coba.
Zianka – Batik Tasik | Bordir Tasikmalaya
Wass…
Table of content by one label http://blog.r1mson.ru/2010/08/label-tocjs.html
Hi. Great addition for my blog. Thanks.
But is it possible to have the same thing only categorized by date?
thank’s for information..
i like your website
Tipsnya bagus semua Mas,Cara buat background bagaimana? mohon pencerahan, Thank’s
Hi Abu,
I notice that this application don’t work in IE properly. In Chrome and Firefox, everthing is ok, but sometimes accordion effect doesn’t work and all labels are open in IE.
Could you advise to slove this problem, please?
Regards
http://gez-ye-ic.blogspot.com/p/bolgeler.html
how to exclude unwanted labels?
thanx
how to align index to right (arabic)
Hi Abu,
I like your script and use very well.
http://gez-ye-ic.blogspot.com/p/bolgeler.html
But, I want to exclude some labels. Because, I give two level labels to posts like wide area label and short area label. So there are dublications on display posts.
Is there any way to exclude some labels from feed link.
Thanks for your cooperation.
KEREN……..
tp mlshnya ada di READMORE jd wktu di klik gak ke baca, mohon bantuannya om abu.. THX.
sebaiknya di letakan pada gadget saja ..
keren..
tp mslhnya ada di readmore om abu.. jd g bs ke bc.. mohon bantuannya !! Thx.
is this possible on the same post aswell, as i am into job placement and i have to add openings on daily basis, so it becomes to long, it is very difficult to maange, is there solution for this aswell.
Example:- as i have to add jobs for frehers under post fresher’s and it goes longer and longer.
is there any solution to this ?
my page is not supporting the static page
wen i m creating a new page it get autosummerise
page it not open like normal post
pls help me ….
thaks
pls see here
this is my testing blog link
http://zinn-test.blogspot.com/
I have the same problem as you Esydownloads,
that issue caused by “read more” widget, which prevent the static pages to be displayed in full mode ,
I hope brother Abu-farhan has a solution for that.
Jazaka Allah khair for all your Help.
One significant thing I really enjoy about webpage content could be the truth that they spark an concept in my brain. After that happens, I feel as I have to comment while using the hope it is useful to some people.
Hi abu, It was not working in my website. The problem is, The list of all posts will be shown but the accordion style will not working. Please see the Image ( http://lh4.ggpht.com/_Kv5tIcZAMKY/TDmnItCcu6I/AAAAAAAABEo/ewu0_NSbVNU/s400/error.JPG ).
I’m using Modified Blogger Elegence Template.But when i test in another blog with new blogger elegence template it was working. How to solve the problem in my website. please help me
I found the problem, now i’m using jquery multi tab widget in my template, when i’m use this multi tab widget the accordian style will not works, but when i’m using with out jquery multi tab widget your script will be worked. please help me how to solve this problem
Makasih, mas.
Script ini benar-benar bagus.
I post a only page, contents the four blogs and there are very many posts.
Could you help me they all appear accordion and first line to be closed?
Thank you so much for everything we offer with generosity here!
Do you want to make new scipt for that?
yes, thank you!
hey abu, can we have the same thing in widget coz i think this might not work as widget replacing archives.
abu, I already use the code. the problem i get is there is an error on page. only my 1st label showed all the entry. others, when i click the label, no title showed. Please advice.
Don’t use two script in one page it make error
thanks mas bwt infonya……tapi saya gagal neh .. :(
ko ada note : “Your HTML cannot be accepted: Tag is not allowed: LINK”
solusinya bagaimana ya mas ??? mohon pencerahanya maklum masih newbie…. ;) Salam
Don’t put in xml file
Abu thanks for creating and sharing. I am blogging in Spanish and would like to change “new” for “nuevo”. I see 2 options:
1. Host your modified scripts on google host
2. Ask if you will be so kind and host as well as spanish version.
Thanks for creating and sharing. I would like to change word “new” to “nuevo” as I live and blog in Spain. And I see two viable solution. Host .js myself on google.code and modify just the word “new” or ask if you will be so kind and add them as a spanish version of TOC to your ttp://abu-farhan.com/script/acctoc. Thank you.
tks a lot abu it works great
grazie e ciao
Is there any way to cross the max result. or can we some how repeat the codes to show all posts in some old blogs where posts has crossed more than 1000?
thank you
Wahhh… kayaknya keren nich…
Coba dulu ahhh…
wow, feature static page ternyata…
makin mantap saja nih hack-hacknya…
wassalam…
Nice post. How can I change the color of “new”?
Thanks
for this script I’m not add css for New, maybe later I’ll add for new version
use this css:
em span {color:blue !important}great effect. its more simple for the finished, with accordion jquery.
but the problem is blogger haven’t own hosting, this effect need external host for the CSS and 2 scripts. can I write the CSS on default blogger skin?
in json scripts thats feeds use max-results=50 that mean only 50 article shown?
Use my link, everyone can use file from my domain.