How to create a sitemap with timeline style in blogger. In this post, I will show How to Add Sitemap with Timeline Style In Blogger without any problems you can follow the below steps to add timeline sitemap in blogger.
1st Step:-
Open Blogger Page, Click Theme Menu, Click 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>
2nd Step:-
When finished, click the Save Theme button.
Then select the Page Menu then click New Page button
After that click the HTML View Button then add the caller code below in HTML
[sitemap]
Post a Comment
Post a Comment