Create Blog Table of Contents

Do you like to read books? The answer will certainly vary, there are going to answer like and some that will say no like it. But I'm sure you have ever read a book. In a book there is a section called the table of contents, with a list of the contents of the book it will make the reader of the book to find the parts of the book you want to read. The question that may arise is what to do between books with blogs? not just a book that can contain a list of contents for ease of his readers, even within a blog we can do it. In addition to tempt visitors to linger more on our blog, it would be very easier for readers to find articles in the sense of interesting to read. make a link to the article.

Well ... I want to explain right now is how do I create a List of blog content automatically. Yupppsss .. with only once we make a list of the contents should not be made again and again but continue to work automatically, this technique introduced by the hans through the beautiful beta blog. Interested to make it? please follow the following steps:

The first step:

• Sign in Blogger
• Click the Layout menu
• Click the Edit HTML
• Click the link Download full template, please save it for backup data
• Copy and paste the following CSS code in the above code ]]></ b:skin>

#toc {  border: 0px solid #000000;  background: #ffffff;  padding:2px; width:495px;  margin-top:10px;}
.toc-header-col1, .toc-header-col2,
.toc-header-col3 {  background: #B5CBFA;  color: #000000;  padding-left: 5px;  width:250px;}
.toc-header-col2 {  width:75px;}
.toc-header-col3 {  width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited,
.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,
.toc-header-col3 a:visited {  font-size:100%;  text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {  font-size:100%;  text-decoration:underline; color:#3D3F44;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {  padding-left: 5px;  font-size:100%; background:#f0f0f0;}

• Click Save Template button

Step two:

• Click the Page Element
• Click on Add a Page Element
• Click HTML/JavaScript
• Copy and paste the following code into the elements that appear

<div id="toc"></div>

• Click the Save button
• Move the new element is made just above the Post element
• Click the Save button located on the top
• Click on Add a Page Element back
• Click HTML/JavaScript
• Give the title to this element. Example: TABLE OF CONTENTS, then copy and paste the following code into the box element

<div id="toclink"><a href="javascript:showToc();">Table Of Contents</a><br/><br/></div>
<script style="text/javascript"
src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script

src="http://tophtml.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

• Replace the url with the name of your blog
• Click the Save button
• Move the new element was made where you want (preferably on the top)
• Click the Save button located on the top
• Completed

Do not forget to replace the url of your own blog with the name of your blog.

Good luck!