Table of Contents
Hello Bloggers! welcome to our blog. in this post i will talk about that how can you create a stylish & responsive sitemap page into your blogger website in just few minutes. I have shared a script below that’s designed by using javascript and css. This script gives a professional look to your sitemap page. this sitemap page is light weight and user friendly so you can use this easily to your blogger website without hesitate.
If you don’t know how to make sitemap page in your blogger website using this script then I have explained full information about it with step by step so you can do it easily and create a stylish & responsive sitemap page into your blogger website. So let’s get started.
What Is Sitemap?
A sitemap is a file that contains information about your website’s pages, videos, and other files, as well as the relationships between them. This file is accessed by search engines like Google to help them crawl your site more efficiently.
Google also provide a Sitemap to all website but that’s look like ugly so anyone doesn’t use that in his website. All bloggers creating a new Sitemap page into their website that’s look good and make user friendly to their website. So i have decided to share a stylish Sitemap page script with all of you.
What Is The Profit & Loss Of Using Sitemap?
Profit – Sitemap helps to crawl your website in Google search engine. So Google recommend you to submit your sitemap.xml to Google search console & another search engines so that they can increase your site ranking.
Loss – there is no loss if you will use Sitemap page into your website. But if you will no use Sitemap page to your website then your website will rank on Google very slowly & your site will no index fastly.
How To Create Sitemap Page Into Blogger’s Website?
There is some easy steps to create Sitemap page into blogger’s website. But you have to do it carefully. I have provided all steps below which will help you to creating Sitemap page into your blogger website. Follow below give steps to create a stylish Sitemap page into your blogger website and share your opinion to us.
Follow Below Given Steps:
Step 1 – Go to Your Blogger.com Dashboard.
Step 2 – Click On Menu > Pages and Create a New Page.
Step 3 – Now Change Your Page From Compose View To HTML View.
Step 4 – Copy Below Given Script By Double Tap.
<!--[ Stylish Sitemap Designed By Nullify Blogger ]-->
<div class="postSection sitemaps" id="sitemaps">
<div class="loading">
<svg class="line" viewbox="0 0 24 24"><g transform="translate(3.500000, 2.500000)"><path d="M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z"></path><path d="M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z"></path></g></svg>Loading...
</div>
</div>
<!--[ Stylish Sitemap JavaScript By Nullify Blogger ]-->
<script>/*<![CDATA[*/
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="sitemapBox"><h4 class="sitemapTitle">'+n[g]+'</h4>',l+='<div class="sitemapContent"><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 }; var i=o.createElement("script");
i.src="https://example.com/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>
<!--[ Stylish Sitemap CSS By Nullify Blogger ]-->
<style>
.sitemaps .loading{display:flex;padding:60px 0;align-items:center;justify-content:center}
.sitemaps .loading svg{margin-right:3px;-webkit-animation:rotation 2s infinite linear}
@-webkit-keyframes rotation {from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}
.sitemaps .loading{font-size:13px}
.loading{padding:15px;border:1px solid #bababa;border-radius:12px}
.sitemaps{font-size:13px}
.sitemapBox{padding:15px;border:1px solid #bababa;border-radius:12px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:default}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:default;line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
.darkMode .loading{border-color:rgba(255,255,255,.1)}
</style>
Step 5 – Now Paste Copied Script Into Your New Page.
Step 6 – Change https://example.com/ with Your Blog Url.
Step 7 – Then Click On Save Button & Chek Your Sitemap Page.
You have successfully created a stylish Sitemap using our script. You can chek it now. Just open your sitemap page in new window and see look.
Conclusion:
In this post i have explained about sitemap page, That how can you create a stylish sitemap page into your bloggers website using a script in just a minute. I hope you will liked our post. So please share this post & support us. Thanks for visiting our website.
You must be logged in to post a comment.