Arrange All Blog Posts under Labels in Blogger

Method to create a HTML sitemap page for blogger

On following the below methods you will be able to create a neat table of contents for your blog based on the given labels.

For demo click here

Step to create a HTML sitemap page for blogger

Step 1: Login to Your Blogger Account and Go to your blog's dashboard. Now create a new page on your blog.

Step2: Now navigate to the HTML section of the page. Clear all other codes and copy the below given codes and paste it there.

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <style type="text/css"> #toc{ width:99%; margin:5px auto; border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px 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:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #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: #ddd 1px dotted; margin-right:5px } </style> <br /> <div id="toc"> <script src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js" type="text/javascript"></script> <script src="http://www.technofizi.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> </div>

In the Above Code Find the line Look Like this:

<script src="http://www.technofizi.com/feeds/posts/default?max-results =9999 &amp; alt=json-in-script&amp;callback=loadtoc">

Replace the blue highlighted text with your websites URL.

Now click on the save button and see a preview. If you have knowledge About CSS Then you can change CSS according to user blog theme.

Now publish it and give the link on the required place.

Note:
1) The view will not appear if you haven’t given any labels for your posts
2) The same posts may appear under many labels as per your assignment of labels

If you are Facing a Problem then Comment Below And Please Share This Post if its Profitable For you.