Today in this blog site I'm going to teach you how to create a cool sitemap with a timeline style that will make your sitemap page look even more beautiful, but before then let's look at what is sitemap first.
What is a sitemap?
A sitemap is a simple code added to a blogger page to display all of your recently published posts in a way that you will not have to be searching for it, you will just need to go to the label of the post and find it there inside the sitemap page, simple and helpful right? now let's quickly go through to add the sitemap code into our blog pages.
How to add sitemap code in blogger page editor?
From your blogger dashboard navigate to pages from there click on the plus sign + to add a new page on the page title write Sitemap and inside the post make sure to change it to the HTML view because we are going to add a code to the page, failure to change this view the code won't work unless it change to HTML view, after successfully doing that here is the code
<b:if cond='data:blog.pageType == "static_page"'><style type='text/css'>*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .namina-sitemap{position:relative;margin:30px auto} .namina-toc-wrap{display:inline-block;width:100%} .namina-toc-wrap .namina-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize} .namina-toc::before{background:#333;bottom:0;content:"";left:20%;margin-left:-10px;position:absolute;top:0;width:4px} .namina-toc{margin:0;padding:30px 20px;position:relative} .namina-sitemap ul.namina-toc{margin:0;padding:30px 0;list-style-type:none} .namina-toc li{list-style:none;margin:0;padding:0;position:relative} .namina-toc > li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%} .namina-toc > li .namina-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:22%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px} .namina-toc > li .namina-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:"";height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0} .namina-toc > li .namina-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative} .namina-toc > li .namina-post a{color:#333;font-weight:700} .namina-toc > li:last-child .namina-post{margin:0 0 0 23%} .namina-toc > li .namina-post a:hover{color:#999} </style><script type='text/javascript'>/*<![CDATA[*/ $(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="namina-sitemap"></div>');$(".post-body .namina-sitemap").text(t);var r=$(".namina-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".namina-sitemap").html(i);$(".namina-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="namina-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+=' <li><div class="toc-date">'+h+'</div><div class="namina-icon"></div><span class="namina-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="namina-toc-wrap"><div class="namina-cat">'+t+'</div>'+i+"</div>")}})})}})}}); /*]]>*/ </script></b:if>{codeBox}
Just copy the above code and paste it in the post editor in HTML view please, if you didn't change the post view to HTML it will not work please take note, after doing that save the page and published it to get started with your sitemap.
Post a Comment