How to add sitemap widget in blogger

Post a Comment


Hello! Welcome to Donod, 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.

Sitemap For Blogger

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.

    1. The first step is to open the Blogger Dashboard
    2. Please select the Page menu >> Create Page / click the (+) button
    3. Then you change the Writing View to HTML Display Mode instead of Composing Display
    4. 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.

  1. 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!

DonodNet
Donod.net is a new online platform, aim to provides people with the opportunity to build and grow their business & Recipes.

Related Posts

Post a Comment