Sitemap Blogger Chuẩn Responsive - Code Blogger (Blogspot)

<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;
}
.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:21.8%;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>

<div class="container">
  <h1>Tạo 1 trang mới và past code bên dưới</h1>
  <div class="post-body">[sitemap]</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=["Tháng 1","Tháng 2","Tháng 3","R","Tháng 5","Tháng 6","Tháng 7","Sau đó","Tháng 9","Tháng 10","Tháng 11","Tháng 12"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"https://www.veospot.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="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:"https://veospot.blogspot.com/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>