Get All of Your Blog Posts In a Single Page.

W e can get all of your blog posts in a single page. Isn't It great for us. No need to see long List of  archive. Not only Reader Admin himself find little bit difficult to notice his older posts. Its a really time consuming. But Now we can create Table of Contents of of blog posts. This is really awesome widget. When you make new post It will automatically added in the Table of contents below its own label.

We have collected some sitemap Widget which looks attractive and is eye catching too. A live working Demo Can be seen by Clicking the Live Demo Button. 

1. Cool Responsive Sitemap Widget by Blogtipsntricks

See Live DEMO

How To Add This widget on Blog

• Step 1. Go to Blogger Dashboard >>Page>> Create a Blank Page. See Below Screenshot.

• Step 2 Switch To HTLM Copy and Paste Below Code. 

Code

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'>
<script src="YOUR_DOMAIN_URL/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

• Step 3 Replace YOUR_DOMAIN_URL with Your Domain URL.
• Step 4. Enter post title and Publish It That's All. 

Some Customization

To change the hover color search for the following CSS code in the widget and change the background color with the color you want. :)
.ct-columns-3 p a:hover { background: #555; color: #fff; } 

2. Sitemap With  Rounded Thumbnails 

+Ankit Kumar Singla  of  BloggerTipsTricks made a new table of contents. He added Rounded Thumbnails. A Delhi Based IT Student Ankit Made really Nice Sitemap Widget. A live Working demo of the Anikit's Sitemap can be seen from the Live Demo Button below. 

Live Demo

If you like Sitemap with Thumbnails Then just copy the code below. Follow Step 1 to 4 as mentioned above.

<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'>
</script>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="YOUR_DOMAIN_URL/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<style type="text/css">
.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}
</style>

3. Simple Table of Contents (TOC) by Abu farhan

Abu Farhan Blogger from Indonesia made a simple Table of Contents (TOC) or Sitemap of Google Blog. Although this is the simple no any customization but really looks nice. See the live working Demo .

Live Demo

Code

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="YOUR_BLOG_URL/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Recommend For you

Css3 Bubble Buttons for Blogger with Easy Installation Tips

Above mentioned Code works for total Table of contents of your blog. You may want to show Table of Contents for a particular Label. If you are thinking to make a TOC for a particular label. Then It can be created. Check Live working Demo.

Live Demo

Code

<script type="text/javascript">
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }}
    posttitle = posttitle.link(posturl);
    if (standardstyling) document.write('<li>');
    document.write(posttitle);}
    if (standardstyling) document.write('</li>');
}
</script>
<ul>
<script src="YOUR_DOMAIN_URL/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>

If your Label Contains Single Word then Replace Label%20Name With your Label name. It It contains Two Words Then Keep First Name in Label and Second Name in Name Separate Each other with %20. That's All

TOC can be Create in Post
 If you don't want to Create a Table of Contents by Creating Static Page, Then Simply create a new Post. Switch to HTML Section. Paste Any of the above codes as per your requirement. That's All. Hope You have Enjoyed The post. If You Find it Worthy, Don't Compromise to spend 10 second to this this post with Your friends.