How to Make a Table of Contents Blog (sitemap) Based Label / Category

Make a list of the contents of the blog (sitemap, sitemap, table of content) based on the label or category of the post is very good for search engine friendly too.

The menu lists the contents of the blog will allow readers to access parts or blog content quickly and seek writing, articles, or posts that they need.

The menu navigation is also recommended contents list Google in order to allow a user to explore our blog. Google is "always favor" to the user. What is the preferred user, favored also by Google.
Function Table of Contents Blog
According to the Social Media Tutorials, table of contents is also good for search engine optimization (Good for SEO) for presenting the correct keywords that have been used (provided correct keywords have been used).

How to Make a Table of Contents Blog
1. Click the Page menu in the Dashboard Blog
2. Click the New Page> click the menu button HTML
3. Copy and Paste one of the HTML code in the table of contents below. Do not forget to replace the first mannersecret with the name of your blog.
4. Click Publish!

There are at least two kinds of blog content, namely Based Label / Category and by Date Publication. HTML code in the table of contents below in-Copas of googlecode.com. There are still a lot of code in the table of contents there are shared by the "author" a kind and not arrogant :)

1. HTML code to the Table of Contents by Categories / Labels


<script src = "http://me-sitemap.googlecode.com/files/mysitemap.js" type = "text / javascript">
</ script>
<scriptsrc="http://mannersecret.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</ script>

Alternative: to view the table of contents "prettier" can use the code below:

<style type = "text / css">
#toc {
width: 99%;
margin: 5px auto;
border: 1px solid # 2D96DF;
-webkit-box-shadow: 2px 4px 4px 8px RGBA (0,0,0, 0.2);
-moz-box-shadow: 2px 4px 4px 8px RGBA (0,0,0, 0.2);
box-shadow: 2px 4px 4px 8px RGBA (0,0,0, 0.2);
}
.labl {
color: # FF5F00;
font-weight: bold;
margin: 0 -5px;
padding: 1px 0 2px 11px;
background: -moz-linear-gradient (right, # C2EAFE 0%, # 055A85 40%);
background: -webkit-gradient (linear, left 10, right 80, color-stop (0.20, # 055A85), color-stop (1, # C2EAFE));
border: 1px solid # 2D96DF;
border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; box-shadow: 1px 3px 3px #bbb;
-moz-box-shadow: 1px 3px 3px #bbb; -webkit-box-shadow: 1px 3px 3px #bbb; display: block;
}
.labl a {
color: # fff;
}
.labl: first-letter {t
ext-transform: uppercase;
}
.new {
color: # FF5F00;
font-weight: bold;
font-style: italic;
}
.postname {
font-weight: normal;
background: -moz-linear-gradient (right, # C2EAFE 0%, # fff 40%);
background: -webkit-gradient (linear, left 80, right 10, color-stop (0.60, # fff), color-stop (1, # C2EAFE));
}
.postname li {
border-bottom: 1px dotted #ddd;
margin-right: 5px
}

</ style>

<div id = "toc">
<script src = "https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type = "text / javascript"> </ script>
<scriptsrc="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</ script> </ div>


2. HTML code for Contents Based Publication Date


<script src = "http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js"> </ script>
<scriptsrc="http://mannersecret.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


3. HTML code for Contents Based Publication Date Plus Box


<div style = "background-color: none; border: 1px solid # 000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src = "http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js"> </ script>
<scriptsrc="http://mannersecret.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>