How to make Sitemap Page in Blogger

Sitemap page in blogger blogs is important to make it easier for readers/visitors to explore all the content of your blog in finding the articles they need, it will also increase the number of pageviews that will make search engine optimization. Generally this sitemap page is a kind of automatic table of content. So, learn how to make sitemap page in blogger. Also check out how to make safelink on main blog tutorial for blogger.

How to make sitemap page in blogger by Webmasters blogging pedia

What is a Sitemap?

Sitemap is a set of xml files containing a list of URLs for a specific website. A sitemap allows webmasters to notify search engines about the URL is available on the site and ready for crawling and it act like a protocol. Sitemap includes posts, pages, labels and archives on a blog. But I’m going to focus on how to create a sitemap with labels on a blogger blog.

Difference Between XML and HTML Sitemaps

XML sitemaps are written or created in the XML markup language preferred by search engines. You can submit an XML sitemap of your site to webmaster tools to improve and control the rate at which search engines crawl your site.

HTML sitemaps on the other hand are supposed to be directed towards actual website visitors. It is written or generated in plain HTML, and usually lists all the pages / posts available on your website.

Now that you know the differences, let’s add an HTML sitemap page to the blog.

Creating a table of contents on a blog based on labels is very easy and very short. You just need to add CSS to your Blogger static page, but what you need to pay attention to is to choose the type of display that doesn’t overwhelm your template.

Step by Step Tutorila : Add Sitemap Page In Blogger

You have to do 2 steps to make a sitemap page in blogger. At first add a css in style. Then add a HTML code in sitemap page.

Step 1 : Add CSS in Style

Go to theme section in blogger and click on Edit HTML. Now find add below code just above </style> tag.

/* Blogger Sitemap Dropdown */
#sitemap1 {background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc;}
#sitemap1 .loading {padding:10px 15px; color:#666;}
#sitemap1 .judul {background-color:#008c5f; color:#fff; font-size:125%; font-weight:600; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease;}
#sitemap1 .judul:last-child {border-bottom:0px;}
#sitemap1 .judul:hover {background-color:#1d2129;}
#sitemap1 .judul:after {content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease}
#sitemap1 .judul.aktif {background-color:#1d2129;}
#sitemap1 .judul.aktif:after {border-color:#fff transparent transparent; top:5px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg)}
#sitemap1 .konten ol, #sitemap1 .konten ol li {list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:400;}
#sitemap1 .konten ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap1 .konten ol li:nth-of-type(odd) {background-color:#fff}
#sitemap1 .konten ol li a {text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease;}
#sitemap1 .konten ol li a:hover {color:#000;}

Now create a new page and name it Sitemap. Copy the below HTML code and paste the code in Sitemap page. Don’t forget to turn on Edit HTML Mode in the sitemap page.

You will find my website link in this html code like, change it with your website link. It will work now!

<div id="sitemap1"><div class="loading">Loading....</div></div>
<script> //<![CDATA[
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class="judul">'+n[g]+'</div>',l+='<div class="konten"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'" title="'+o.replace(/ %new%$/,"")+'">'+o.replace(/ %new%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=""+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
//]]> </script>

Note: Remove my website link “” from above HTML code and Replece it with your website link

Now, you have successfully created a table of contents based on labels on your blog.

Sitemap will look different on defferent templates. But structure will be same. Check out awesome templates Fletro pro v5.5, Median UI v1.4, Igniplex v2.6 and many more.


I hope this article has helped you understand Step by Step adding a table of contents to your blog. Don’t forget to stay tuned to this blog for more tips!

5 thoughts on “How to make Sitemap Page in Blogger”

Leave a Comment

Your email address will not be published. Required fields are marked *