Create HTML Sitemap for Blogger | Stylish Sitemap For Blogger

Create HTML Sitemap for Blogger | Stylish Sitemap For Blogger

Hello friends Welcome to AS Themes World. Here we will show you how to create a sitemap page for your blogger step by step.

What is Sitemap

Site map is a navigation assistant of your blog, if any stranger try to explore your website and he is lost he can easily navigate in your website with the help of Sitemap.

Sitemap works as a location chart from where anybody can go to any specific page in your website.

People generally add their sitemap page in the footer so that the user or robot can crawl the website with ease and this would avoid any navigation barrier.

Sitemap is essential don’t forget to add it in your website.

Why Sitemap is Important

First of all, we have to understand why we want a sitemap page for blogger. Sitemap is the structure of our blog pages and posts. The sitemap page will also improve the user experience. When we add a sitemap page to our blogger then the users can easily find the post they want to find. And most importantly, when the (Google,Yahoo) Webmaster Tools tools crawler come to our website then the crawl is easily done.

Steps to Create Sitemap Page 

Step 1. First, login to your blogger and click on the "Pages" section now click on "Create New Page".

Step 2. Second, give the "Sitemap" title to the page and then click to "HTML" button and delete whatever inside in HTML.

Step 3. Copy the code that is given below and paste it in HTML section of your sitemap page.

<div class="sitemaps" id="sitemaps">
  <div class="loading">Loading....</div>
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', 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:'sitemaps',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=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',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></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");

Step 4. Now add your blog address in place of and then click on 'Publish.'

At this point, your sitemap page has been completely created, if you follow all the steps correctly we can guarantee that the sitemap page is working properly.

Thanks for visiting our website. If you have any questions please put in comment box, I will reply as soon as possible.