A table of content is a list displaying all the posts on your blog in a clean easy to navigate format for readers.In this post i will show you a table of content which is originally by “Abu-Farhan” that is extremely easy to set up and can be added to your blog in minutes.This will provides a great way to display the table containing your complete archive.
I’m currently using this on WWW.EXEIDEAS.COM.
The code that creates the table is actually very simple but you will first need to create a post or static page for your blog.
Features:
1.) Accordion Effect.
2.) Show And Hide Effect.
3.) CSS 3.
6.) Different Style For Open And Close.
7.) Auto Sort The Title.
8.) “Add New!!” Text In Front Of For 10 Newest Post.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Add New Post/Page.
4.) Click “Edit” It.
5.) Now Copy The Below Code And Paste It To There.
6.) Click Save, Now You Are Done.
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link><script src="https://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script><script src="https://www.exeideas.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><script type="text/javascript"> var accToc=true; </script><script src="https://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
Customization:
1.) Replace www.exeideas.com With Your Blog URL.
Thank, this really worked ! but it show black/white/black/white each line on my blog. how do i fix this ?
i really like the post list like yours blog =D
Thanks For Liking And Using Our Tutorial. Leave Your URL To Check This Changes…
here the link = http://freegamez2you.blogspot.com/p/test_20.html
Add The Below Code In Your CSS…
.list-ganjil {background-color: #000;}
Thank you very much ! it worked. Now the number list doesn’t display o.O
Numbering Are Closed. Do You Want To Enable It?
yeah
Find This Code In Your Blog Template And Remove It:
ol, ul {
list-style: none;
}
it show a weird 3 dots on the top after remove that code.
There is some bug on the ‘contact us’ tab, we are unable to type in the boxes. anyways here the screenshot http://i.imgur.com/tNab3m3.png
Please Send Us The ScreenShoot Error At Our E-Mail…
Add The Below Code In Your CSS:
#header-wrapper ul li {list-style: none;}
Thank you very much, every goes nicely now =)
More question will come in future ^^
You Are Welcome Here…
This Is your Current Don’t Forget To Read This Also Script
Please Explain What You Want To Say…???