Blogger Sitemap in Timeline Style
close
Blogger Sitemap in Timeline Style

Blogger Sitemap in Timeline Style

Blogger Sitemap in Timeline Style

Sitemap of blogger blog is a kind of map which shows up all the posts of your blogger blog.

And Blogger provides this functionality using a widget but that is not mostly used instead people use different styles of sitemaps for their blogger blogs on their static pages of their website.

This time I have another beautiful and amazing blogger sitemaps source code in timeline style.

I think that this question will be arising in your mind that's what is timeline style?

Well I have the answer of this question for you. You can just click on the button below to see the live demo of this timeline style blogger sitemap.

View Demo

This timeline style blogger sitemap is responsive to all devices which means that it adjusts it's with and other styles according to the device or viewport width.

This blogger sitemap in timeline style is in light color mode and looks beautiful on white pages of your website.

You can add this blogger sitemap in timeline style in your static page to show up all the posts of your blog.

So below are the steps provided by which you can add this blogger sitemap in timeline style into your blogger Blog by creating a static page and adding this code into it.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Page Section
  3. Click Add New Page
  4. Now give your page a title and description.
  5. Now copy the code provided below and paste it into the HTML Editor of this newly created page.
  6. <!--DOCTYPE html-->
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>Blogger Sitemap in Timeline Style</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);
    a,a:link,a:visited {color:#ffa502;text-decoration:none;transition:all .3s}
    a:hover,a:hover:visited {color:#ea9906}
    *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    body {
      background: #f5f5f5;
      font-family: "Roboto", sans-serif;
      margin: 0;
      padding: 0;
      position: relative;
      line-height: normal;
    }
    
    .container {
      max-width: 768px;
      margin: 4% auto;
      padding: 40px;
      background: #fff;
      color: #666;
      font-size: 16px;
      line-height: 1.6;
      border-radius: 10px;
      box-shadow: 0 3px 20px rgba(0, 0, 0, 0.03);
    }
    
    .container h1,
    .container h2 {
      display: block;
      margin-bottom: 40px;
      font-size: 2rem;
      font-weight: 700;
      color: #000;
    }
    
    .container h2 {
      margin-top: 30px;
    }
    .timeline-sitemap{position:relative;margin:30px auto}
    .timeline-toc-wrap{display:inline-block;width:100%}
    .timeline-toc-wrap .timeline-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
    .timeline-toc::before{background:#333;bottom:0;content:'';left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
    .timeline-toc{margin:0;padding:30px 20px;position:relative}
    .timeline-sitemap ul.timeline-toc{margin:0;padding:30px 0;list-style-type:none}
    .timeline-toc li{list-style:none;margin:0;padding:0;position:relative}
    .timeline-toc > li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
    .timeline-toc > li .timeline-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:21.8%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
    .timeline-toc > li .timeline-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}
    .timeline-toc > li .timeline-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
    .timeline-toc > li .timeline-post a{color:#333;font-weight:700}
    .timeline-toc > li:last-child .timeline-post{margin:0 0 0 23%}
    .timeline-toc > li .timeline-post a:hover{color:#999}
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Blogger Sitemap in Timeline Style</h1>
    <div class="post-body">[sitemap]</div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'>
    </script>
    <script>
    //<![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:"https://www.softwebtuts.com/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="timeline-sitemap"></div>');$(".post-body .timeline-sitemap").text(t);var r=$(".timeline-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".timeline-sitemap").html(i);$(".timeline-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"https://www.softwebtuts.com/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="timeline-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="timeline-icon"></div><span class="timeline-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="timeline-toc-wrap"><div class="timeline-cat">'+t+'</div>'+i+"</div>")}})})}})}});
    //]]>
    </script>
    </body>
    </html>
  7. Click Publish Page

In the source code provided above you have to replace my website URL with your website URL for your age I have highlighted the URL so that you can recognise it.

If you have knowledge about CSS then you can customise this blogger sitemap in timeline style according to your requirements.

If you don't have knowledge about CSS, JavaScript, HTML then modification of this blogger sitemap timeline style will not be beneficial for you and create errors in your blogger blog.

Conclusion:

I hope you will like this blogger sitemap in timeline style if you did please leave your positive feedback in the comment section I am waiting for that.
Disqus Codes

No comments

Notifications

Disqus Logo