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.
164 Responses to “Table of contents and Accordion for Blogger”
Leave a Reply
working good
tampilannya OK sekali, telah saya aplikasikan di blog sederhana saya. Tq!
first of all i want to say you thanks for this accordion. but i have a problem – my blog has black background with golden link color. in your accordion the white background strip is causing problem. because of white background strip the golden link is almost invisible. plz help me to remove white strip.
you can visit my blog to clearly understand my problem.
http://thecompletezone.blogspot.com/p/complete-zone-index.html
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
Terima kasih, karena sekarang sudah saya pakai di web saya, sekali lagi terima kasih
ini http://www.toko-jilbab.com/p/sitemap.html
Hmm, nice info…
Assalamu ‘alaikum akhi,
Perkenalkan saya Q-Roen, saya ingin bertanya mengapa di website saya yang berbasis blogspot kode ini tidak bekerja? Saya sudah menempatkannya di Page atau Posting, tetap saja tidak berhasil. Berikut website saya :
http://www.16dunia.web.id/2011/12/daftar-isi.html
Mohon pencerahannya. ^_^
Terima kasih atas ilmunya yang luar biasa dahsyat. Semooga Allah memberkahi segala langkah Akhi.
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?
It’s look profesional. Than you Farhan. Keep it up.
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
can you configure it to show only selected labels instead of all of them….
plz make it for 10000 posts thanks
its work on my blog, but not accordin, why??
I want to decrease the width of first one to 700px..how to do it..
abu itu bisa gk memilih label sendiri ,jdi jgn semua nya di gituiin ,
soal nya saya ingin bikin itu 2
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
Hi Im Blogger from Indonesian too . . .
Thanks Mr Abu-Farhan for this Posting ^_^
Dear Sir,
I have been trying to get this right.
I was able to do the first part… Posting it in my Template Edit HTML.
My Problem is this: When I use it as a Page, and Type Table of Content: It does Appear along with the Codes as a Post, although I am Posting a New Page and then Clicking on Edit HTML… I have tried this about 30 times now and I can not get it to not do that.
Also, once I get this fixed, Will I tag my Future Posts with Labels in the little Label Section?
How do I use the Table Of Content once it is finished?
Please excuse my complete illiteracy. I have more than one blog I want to do this with but thought I would start with the webpage I am showing you… Thanks so much for your great help.
Dena Jensen
اريد جعلها تعرض الارشيف حسب التصنيف عمودي وليس افقيا
اي كل تصنيف في عمود
thanks for this, I’ve been using this accordion for quite some time. :)
it jammed if we have more jQuery in our blog…
and the fisrt label won’t appear…
How can we solve this?
No it doesn’t work if you have more than 500 posts
any other ideas please
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
alhamdulillah,, alhamdulillah, alhamdulillah,, working. chek it
http://satria-pc.blogspot.com/2011/07/cara-buat-daftar-isi-sitemaps-blog-by.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. :)
adidas stella mccartneyParfum pas cher longer.
So I took a few months “off” to actually focus on some side projects, and, lo and behold, things got done. Excellent. One of those si
[...] 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