This is a Sitemap with Timeline Style which is useful to facilitate navigation for users in tracing the post in your blogger. This Sitemap also makes it easier for search engine crawler robots to explore your blog. The sitemap page needs to be more structured for search engines to crawl.
How to Make a Sitemap with Timeline Style
Follow the steps below
1. Open your Blogger page, Click the Themes menu, Click the Edit HTML button and add below code before </head>
Copy the below 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>
2. When Completed Adding above Code, Click Save theme Button.
3. Then Go to Pages, Click the New Page button.
4. Add Title (You're Like)
5. Click HTML View Button.
6. Remove code if present (Ex:- <br>)
7. Add this [sitemap]
Conclusion:-
So that's all from this video and post. I hope you can do it easily and if you have any suggestions please leave us a comment.
Post a Comment
Post a Comment