How to add sitemap widget in blogger
Hello! Welcome to Blogism, in this tutorial we will create a sitemap page for our blog. Unfortunately Blogger doesn't have a sitemap widget compared to WordPress which has a plugin called "Yoast SEO" which automatically creates and updates a website sitemap.
In this tutorial, we are going to create blogger HTML sitemap page. Ordered by post label, in alphabetical order and attribute "New" for newly published posts, as another great style, we will Create a Clean and Elegant Look Sitemap Page for Bloggers.I'm going to show you how to create a Sitemap page on Blogger, with these simple steps.Here I will show you step by step how to create a sitemap page for your blog. First of all we have to understand how important a sitemap page is for a blog. A sitemap is the structure of our pages and blog posts. The sitemap page will also improve the user experience. When we add a sitemap page to our blogger / blog, it makes it easy for our users to find the posts they want to find. And most importantly, when crawling of Webmaster tools (Google Yahoo) comes to our website, browsing is easy.How to Make a Sitemap on BloggerWe will know step by step how we can create a sitemap page for our blog. So follow all the things mentioned below carefully.
- The first step is to open the Blogger Dashboard
- Please select the Page menu >> Create Page / click the (+) button
- Then you change the Writing View to HTML Display Mode instead of Composing Display
- Please copy and paste the code below
<div id='sitemaps' class='sitemaps'>
<div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA[*/
/* 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");i.src="https://www.tomytech.eu.org/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+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>
<style>
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:18px 20px 25px;border-radius:4px;background-color:#fff;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035);}
.dark-mode .Blog .sitemaps .sitemap-box{;background-color:#242526}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:16px;color:#313135}
.Blog .sitemaps .judul:before{content:'Label: ';margin-right:5px}
.Blog .sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:PT Sans, sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.Blog .sitemaps li a{color:#333333;font-weight:700;font-family:PT Sans, sans-serif}
.Blog .sitemaps li a:after{content:'Read more';display:block;margin-top:2px;color:#313135;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
.page .Blog article.post{border:0}
.page .Blog .breadcrumbs > *:first-child{display:block}
</style>Please change the URL that I color or marking
IMPORTANT: If you already have a CSS sitemap, please delete it, just add the HTML / JAVASCRIPT code above.
- Please Publish See the results.
If you follow the tutorial carefully, I don't think you will have any problems, however, if you do, Leave a comment below and I'll help you! Happy blogging! And don't forget to share, thank you!