Howdy Readers,
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 that is extremely easy to set up and can be added to your blog in minutes. The recent addition of static pages to blogger provides a great way to display the table containing your complete archive.
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. Here's the three steps required to create a table of contents and add it to your blog.
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. Here's the three steps required to create a table of contents and add it to your blog.
<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Georgia,'Times New Roman',serif; font-size: 14px; line-height: 21px;"><b><link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" /> <<span class="IL_AD" id="IL_AD3" style="background-attachment: scroll ! important; background-color: transparent ! important; background-image: none ! important; background-position: 0% 50%; border-bottom: 1px solid rgb(0, 153, 0) ! important; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: rgb(0, 153, 0); cursor: pointer ! important; display: inline ! important; float: none ! important; font-family: Georgia,'Times New Roman',serif; font-size: 14px ! important; font-style: normal ! important; font-weight: bold ! important; margin: 0px; outline-width: 0px; padding: 0px 0px 1px ! important; position: static; text-decoration: underline ! important; vertical-align: baseline;">script</span><span class="Apple-converted-space"> </span>style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script> <script<span class="Apple-converted-space"> </span>src="http://<span style="color: rgb(204, 0, 0);">earn-faster.blogspot.com</span>/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script></b></span></span>
- Create a static page (under Posting)
- Copy the above code into the text box of your static page and give it a title (such asTable of Contents)
- Replace this blog-unity.blogspot.com with your own blog url
- Save.
With this code, you will have a clickable button on your page tab and when it is clicked, your viewers will see something like the following TOC:
The other reason you should Add this to your blog is that it helps increase you traffic to your blog as google can crawl through your blog easily
