How to Create Timeline Sitemap Page in Blogger | How to Add Timeline Sitemap Page in Blogger

Hi to all in this article I am going to tell you all about how to create and add timeline sitemap page in blogger website easily in just few minutes.

So read the article carefully and completely, if you miss ant one steps then your website may get some issues, so read till end.

FAQ's:

What is a timeline sitemap ?

Basically timeline sitemap is of the attractive sitemap, if any new visitor visits your sitemap then definitely he can find each and every article clearly, so due to this your bounce rate will become low.

What is HTML Sitemap ?

html sitemap is one of the important page in your website, in this page you can see all your important pages or posts, by this your visitors can easily find the suitable page to read.

What is difference between XML sitemap and HTML sitemap ?

XML sitemap are mainly created for the search engines to crawl your web pages easily and faster and HTML sitemap is create for the visitors of your website to easily navigate your webpages.

What is Sitemap in SEO (Search Engine Optimization) ?

In sitemap we provide the information regarding webpages, posts, videos and other documents of your website, by this search engines like Google, Bing etc.. can easily read your webpage and crawl it easily.

Note: Before doing the process, you need to backup your code safely, if any problem arises then you can backup your code again and can run your website as usual.

How to Create Timeline Sitemap Page in Blogger by tial wizards

Steps to Create Timeline Sitemap page in Blogger

Step-1: First of all you need to login to your bogger website dashboard by using your login credentials.

Step-2: You need to click on Theme option and then click on customize.

Step-3: Now backup your theme code safely before adding the code.

Step-4: Then click on Edit HTML option from the customize.

Step-5: Here click on blank area and press CTRL + F and enter </head> closing header tag in the search bar and press Enter.

STep-6: First you need to copy the below provided code-1 and paste this code-1 above the </head> closing header tag of your theme code and then save the theme.

Step-7: Now come back to blogger dashboard and click on Pages and then create a new page.

Blogger HTML Page View

Step-8: Here you need to add title as (sitemap) and add this caller code - [sitemap] in the HTML view of the page.

Adding Caller Code & Publishing Page

Step-9: Now after completing page settings and click on Publish.

Step-10: You have successfully created timeline sitemap page for your blogger website, now you can open sitemap page and check whether the stylish timeline sitemap is showing correctly or not.

Timeline Blogger Sitemap Blogger Page by tial wizards

Note: 

To show articles in stylish timeline manner, you need to write a minimum of 10 to 15 articles on your website, and if any issue comes then backup your code and do the same process again by reading the steps carefully.

The same process can be done in WordPress websites too, but in WordPress websites there so many plugins with different styles and in upcoming articles I will provide you some of the best plugins.

And don't forger to add [sitemap] in your page by opening the HTML view.

Code-1

<!--[ Timeline Sitemap Blogger 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>
Copy

Conclusion:

Read and follow the above provided steps carefully to create and add timeline sitemap page in blogger website easily in just few minutes.