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.
157 Responses to “Table of contents and Accordion for Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
[...] car for sale uk trader for cars van trader find a car car find used vans trader car car and trader used cars uk uk used cars [...]
I can get it working : http://www.movieloo.info/2010/06/table-of-contents.html
but all the contents are loading without any toggle like one in the demo.
M I missing anything?
Boz aq mau tanya… aq sdh nyoba langkah di atas tapi koq labelnya ga ada backgroundnya… kenapa ???
your script in not working for me its displays all the tabs opened.. no sliding effect
tq for this tutorial…i’m satisfied! huhu…
t
excellent widget
how to change styling of this widget
how to exclude certain labels
thank you
edit this file http://abu-farhan.com/script/acctoc/acc-toc.css and upload in your storage or put in style position in your template
kalau ganti gambar background biar tidak oranye gimana gan? Bisa gak?
Ganti bagian .headactive{
di file
http://abu-farhan.com/script/acctoc/acc-toc.css
Love it!!
subbekhanallah, daftar isinya bgus bgt mas….
mkasih,,,,
Good night,
Great job! I just insert into my blog.
And once again congratulations!
Kok gag bisa di aplikasikan ke blog saya yah Pak?
salahnya dimana nih?? jadi bingung….
طبخ
autotrade uk
Presently I must decide whether to keep reading of the site, or go to some other site.
dude how to change the colour for table of content please tell me
http://smahkin.blogspot.com/p/sitemap.html
hi abu, first thanks for the script
i have a little question
can we use this widget to diplay posts only from selected catagories(label)?
if yes, can you help me in doing this?
tenkz.,.
ur idea’s very helpful
=)
Hi abu.
Can I change the background color on links?
Is it inside “css”?
thank you
Hi abu
yes Can we use widget to display posts only from selected categories(label)?
Please help me related this, i ll be really thankful to you.
thank you
Esselamu alejkum
May Allah reward you for all this things.
Auto Sort the title by alphabetical order is not suitable for me, I want to sort by date of publish. How can I do?
Add New!! for 10 newest entry – I don’t want this option. How can I change this.
It is important to know that I am a beginner in blogging.
Thank you!
Superb TOC, Thanks a lot, i added a new color to my TOC page :)
kami da letak dah sitemap ni kat tempat kami…terima kasihh mantapppp!!!!
maksimum post yang tampil berapa?
soalnya aku pake toc yg lama
disetingannya aku tulis 1000
yg tampil cuma 500 post
useful info …. thank you so much … I’m really excited …successfully in my blog…you can see in http://id290.blogspot.com/…
Hi Abu, your ToC is superb! Thanks.
It would be even better with the following :
(1) All labels appear condensed; currently the first label appear expanded.
(2) It open on the same window/tab; currently it opens a new window/tab.
(3) When you expand a label, and click on an item, it open a new window/tap; currently it displays the contents of the selected post on the same window, so you loose the ToC and you have to start all over again.
Otherwise, it is brilliant …
Bagus ni….ini yg saya cari mulai kemarin-kemarin….thank’s gan. udah g’ tahan mau menuju ke TKP ah..
It doesnt show complete posts for labels. any solution?
makasih pak atas semuanya
SALAM YA ABU.
opss sory for the capital blocks. Do you have any screenshot of how this thing will look like?
Thanks to LOL1ds
now it works :D
You can see it on http://simbya.blogspot.com/p/contents.html
Now I’m so grateful to both of you… :D
I think it’s a great widget/script. but Couldnt use it on my blog, only appears in ‘Draft’…please help…
Is it because of my template??
Hi Abu, thanks for this great tutorial. I am just a newbie. I’m here just want to inform you that I have implemented this stuff on my blog. And it works fine (in Firefox and Opera). But in IE (I use IE 8) and Google Chrome (v.10.0.648.151), it doesn’t works properly. Do You have any suggestion/idea to fix this bug?.
Once again, thanks for all of your efforts you have provided to us.
Thank you abu-Farhan
But it does not work in my blog
If You Saw please my blog
S.O.S.
I want your opinion.
THANK YOU.
Oswald
hi abu-farhan,
thanks for the useful post. this is a great way to display the table of contents.
cory
Thank you abu-farhan
but it doesn’t work in my blog i have Problem with
jquery I can not deal with it.
Please see my blog i have a Problem with slidshoo doesn’nt work .
I want your opinion.
Salam
Bismillah..
Assalamu Alaikum…
Alhmadulilah…
Sudah berhasil mas di blog saya kang…
Semoga tetap istiqamah…
Amin…
Thanks for these useful tutorials in this site. I’ll try them all and use them. Thanks a lot! May Allah bless you and always guide you to most right way.
mas, sorry kalo ada ralat dikit pada type sedikit error, pesan : tag link tdk bisa di execut
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
apa tidak seperti ini,type :
<script src="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen"
rel="stylesheet" type="text/css"></script>
maaf jika saya juga salah. tapi saya coba seperti itu berhasil. trimkasih.
Thanks to LOL1ds
now it works :D
You can see it on http://simbya.blogspot.com/p/contents.html
it doesn’t work in my blog.
but i really want use this stuff.
please help me to make it work, email me .. thanks.
Hello abu-farhan, thanks before for all your tutorial..it really help me much..i have a question for you.. i used this table of content script since long time ago..and it working perfectly..but when i added a read more script to my template..it wouldn’t working anymore…this the script..
<script type=’text/javascript’>
summary_noimg = 260;
summary_img = 180;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src=’http://barep.net84.net/javaskrip/summarypost.js’ type=’text/javascript’/>
<b:if cond=’data:blog.pageType != "item"’>
<div expr:id=’"summary" + data:post.id’><data:post.body/>
</div>
<script type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class=’rmlink’ style=’float:right’><a expr:href=’data:post.url’>Selengkapnya..</a></span></b:if><b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
i really appreciate if you reply to muy email che6vara@gmail.com
Thanks Abu,
I’ve used this script in our blog, but when do you think the “new” label will be removed automatically ? how to reducing this ?
But thanks a lot anyway..It’s a great script bro !! You always found a new great one… :)
Hi! When using this I get this message “Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer might become unresponsive.” I’m running IE8. For now I’ve removed all the code.
Take Care,
Peter
Since the TOC is made up of java script, can google index these links??
Wow, very nice widget. It’s working perfectly on my blog. Thank you very very much abu.
Thank you very much! Excellent work
terimakasih scriptnya mas, very nice!
hehehehe :D
cobaaaa aaahhh :D
Salam, brother
i have a little question
can we use this widget to diplay posts only from selected catagories(label)?
if yes, can you help me in doing this?
salam abu
excellent widget
how to change styling of this widget
how to exclude certain labels
thank you
Thank you very much! Excellent work, I use it in my blog.
Kok gag bisa di aplikasikan ke blog saya yah Pak?
salahnya dimana nih?? jadi bingung….
blognya keren banget mas.. msh newbie nih, lom ngerti script