How to Make a Sitemap with the Timeline Style

How to Make a Sitemap with the Timeline Style

This time Kabul Tech will discuss and explain how the ways or steps you can follow and do in How to Make a Sitemap with the Timeline Style.

The creation of a sitemap aims to simplify visitor navigation in tracing posts in a blog.

 In addition, the sitemap also allows search engine crawler robots to explore blogs. 
Blogs will be judged to be more structured if they have a special sitemap page.

How to Make a Sitemap with the Timeline Style

Okay, just go ahead and follow the steps below 


Open your Blogger page, click the Theme menu, click the Edit HTML button and add this code before </head>

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

When finished, click the Save theme button.

Then select the Page menu then click the new Page button

After that, click the HTML button then add the caller code below in HTML

[sitemap]

Then click Publish and see the results