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
Demo
Below images are how to create page in blogger.
178 Responses to “Table of contents and Accordion for Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
nice & it works well.. thanks..
assalamu alaykum
dear brother
you are great
and great thank you
MASHAALLAH your website
i lots of pray for you
inmy blog i will put your this website link
thannk you
Salam aleikum.
If there is jQuery in your blog, then it won’t work right. Try jQuery to not work in your “table of contents” page only.
Mas Abu,.kenapa efek buka tutupnya tidak bisa berjalan di blog saya?
mohon penjelasannya.
ditunggu New Script berkelas lainnya
Nice TOC,
i’ll try it on my blog & i’ll wait for the new TOC from this website, :)
Nice TOC,
i’ll try it on my blog & i’ll wait for the new TOC from this site, :)
It doesn’t showing any accordion effect in my blogger blog. Please see this page- http://www.freeandroidappshop.com/p/table-of-contents_18.html . Please help me..
[...] Every once in a while we choose blogs that we read….
What if you click my link…
bang ane modif sedikit boleh kan???
Sir i wanna know ho to limit the Tags in the index so i may update all the index again.i am facing issues regarding TOC.it is created but no list is displayed due to many tags.please create new TOC with changing and have setting to limit the tag.please also reply me on my e-mail.
waiting for your feedback..
Thanks in advance
Abu, this is amazing, thank you very much, it’s exactly what I was looking for… please respond to my comment on the Awesome Automatic Slider part 1… thanks again…
I added this code to my static page. But it doesn’t show any accordion effect. Pls see this page – http://androidmarketguru.blogspot.in/p/table-of-contents_19.html
How to increase the no. of posts in table..it only shows 1000 posts…how to show posts more than 1000+
plz help me…
Mas, saya suka nih dengan yang satu ini dan saya udah pake dari dulu di blog saya yang lama dan dipake lagi di blog saya yang baru. Tapi saya ada pertanyaan mas, kenapa ya terkadang effect accordionnya tuh work kadang-kadang engga, apa punya solusinya mas?
Terima kasih sebelumnya!
Contact scanners are those that has to be placed near the object to have a successful scanning….
Contact scanners are those that has to be placed near the object to have a successful scanning. Those that can scan as far as 3 feet or more are laser scanners.Most scanners also come with a software that would allow you to see a graphical user interfa…
Hello. Is there a way to make it work so that posts are organized by date? Also, the Accordion effect isn’t working for me. :(
assalamu alikum brother!
thanks for this widget, i used it and found great… actually i am using it for Urdu material, that is the language spoken in Indo-Pak. i want to add some font which help the visiters read the blog easily, how to do it?
its here..
http://muftaworld.blogspot.com/p/var-acctoctrue.html
hi i always go here to your site and checking if there is a new way make a blogger blog to make easy .. found this one and using it to my site.. http://techseen.blogspot.com. make it beautiful. and make look professional now.. thank you.. reciprocate comment ehre …
Asslm.Wr.Wb. Sitemap yang bagus Akhi, Ana mau nanya kira-kira gimana ya caranya supaya judul postingan yang panjang ga keluar dari tabel sitemapnya? Syukran Akhi. Salam Kenal.
Loved it. Thanks. I have placed it in my sidebar. But all items are getting displayed rather than being hidden inside those labels.
Have a look at my site to check:
wwww.genderbender.in
How Create separate lable Table of contents
Great help abu, I already used it in my always10 – top 10 list blog and it works. check it out.
http://www.always10list.com
I’m just wondering if it affects on my site loading speed. does it?
It does not work on my wordpress, blog you have any tips for the Serto it.
thanks for code :D
Terimakasih banyak.. kereeen neh.
Harus lewat Page ya tidak bisa lewat post biasa ??
Trimakasih… sudah ane pasang diblog ane.. semoga blog ini lebih maju… ijin sebagai referensi artikel di blog ane..
tampilannya OK sekali, telah saya aplikasikan di blog sederhana saya. Tq!
Warna putih pada baris isi label bisa di hilangkan tidak sob?? karena tulisan pada template saya berwarna putih jadi tidak kelihatan…mohon balasannya sob, saya ingin menggunakan script ini di blog saya sob
Salam.
I just wondering if you could make table of content by labels.
I mean, make it just for one or more label on each post. Cause i have too much post per label, so its take a time to load all content.
Your help i really appreciate.
Is it possible to open each link in the TOC in a new windows or tab?
Also, is it possible to modify the colors?
Thanks Abufarhan. It’s works great. :)
as-salamu’alaikum warahmatullahi wabarakatuh
abu bagaimana cara nya agar label tidak tercantum di table of counten nya .
jadi saya ingin membuat 2 table of counten nya .
gimana tuh cara nya
tolong di bles yh
Walikum Assalam
its not working please update this
Thanks
Assalam O Alaikum
Dear Brother,
I have used your widget on my blog to show all posts on a page, nice but there is a problem it is showing only posts till ” T ” ,, it is not displaying catagories of ” U , V , W , X , Y and Z ” ,,
why its not showing all labels
please help me to solve this problem
Allah Hafiz
hi
brother very nice plugin ..
i have problem ..
see this page :
http://www.lootfile.com/p/movies-index.html
i have many type of levels ..
is there any way to arrange levels with own choice .. place ..
If i want to remove some categories .. ..
how to remove .. plz help ..ok
اريد جعلها تعرض الارشيف حسب التصنيف عمودي وليس افقيا
اي كل تصنيف في عمود
I’m Planning to create a TOC some sort of list for the most numbered contributors for my Always10 blog. I check and apply it to my blog and it did work but does it takes too long to load? I mean, does these can affect site load much? what are your recommendation? should I apply it or not?
this code is limited only for 1000 posts…….how to increase it??plz reply
Thankx for sitemap especially with this nyc effect.. it work nyc on my blog
[...] Table of Contents using Accordion script [...]
HI farhan, why its not work on my site.
Please check it.
http://www.azqia-info.com/p/sitemap.html
I cab see sitemap at your page
I can see sitemap at your page
I think it work only blogspot.com domain
Bismillah, Syukran wa jazaakumullaaoh, for your tutorial akhi, very helpful . how to alter / use table of contents on the post as a template Accordion?
You already used at http://www.alghuraoba.co.cc/p/accordion-toc-1.html
working on my website
http://www.techwales.com/p/sitemap.html
How to make your “Enjoyed this post” widget above that has a background that was aligned on the whole width of the main blog post. ? Because when i add background on my blog, it is aligning on the margin of the text.
HI,
I like your TOC and it works great in my site but I have one thing that I would like to change if only possible and I hope you can help me. My site background is in dark color (black) and the colors of the links are in orange… in the TOC you made the background of every link appears to be alternate black and white. I would to turn the white color into black if possible. Would you help me? Here is my site link for you to look at http://www.vhivelivetv.info/2011/08/var-acctoctrue.html. As you can see the orange colored links are not visible to white background that is why I would like to change it to black. Thanks and hope to hear from you soon.
i Like your comment box. Can you teach me how to use this ? And i love your template, its like psd tuts plus
Hi Farhan,is there anyway to change New! to latest instead?And how to hide widget links?Appreciate if you could reply.Thank you
I always find my promo codes from kingofcodes.weebly. It’s the only site where I can get legitamite codes from.
Thanks I like it. hehe
terimakasih. :)
[...] classic cars auto used used auto we buy any car cheap cars [...]
before, i have try a trick “table contents of blogger new style” but this one more look very nice..i will change my sitemap with this
thanks . .
it works..nice