Adding a Sitemap Widget to Blogger

How to add a sitemap page to blogger

Whatever you call it, sitemap or table of content, it's always a good idea to gives a clear navigation to your readers to find a desired page.

In this helpful blogger tip tutorial I'll show you how to add a simple sitemap (table of content) to your blog.


To add a sitemap to your blog just follow the simple instructions below.

Add new page by going to Page > New Page

Adding new page in Blogger

Name your page and click on the HTML tab at the top left.

Blogger HTML tab

Copy the HTML code below and paste to your page.

Make sure you add your blog url highlighted in blue

<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="http://www.helpfulbloggertips.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<p style="display:none;"><a href="http://www.helpfulbloggertips.com/">Helpful Blogger Tips</a></p>
<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>

That's it, you now have a sitemap page.

Also make sure your sitemap page is ticked to show on your header bar.

Blogger page