Chào bạn! có phải bạn đang cần tìm mẫu
code sitemap cho blogger (blogspot) hay không? hôm nay
veospot.com sẽ chia sẻ miễn phí bộ code sitemap dành cho các bạn đang phát triển blog...
Giới thiệu code Sitemap Blogger (Blogspot)
Các bạn nhớ làm theo mình nhé, đây là code sitemap khá là đơn giản, ví dụ phần code HTML khi tạo trang nhớ bôi đen nó [sitemap]
- Bạn phải nhớ trong code <data:post.body/> của bạn phải dùng thẻ <div class='post-body'><data:post.body/></div> vì trong JS mình lấy thông tin từ "post-body"
1. Code 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;
}
.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>
2. Code HTML
<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>
3. Code JS (Javascript)
<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>
Như vậy là mình đã chia sẻ bài viết "Sitemap Blogger Chuẩn Responsive - Code Blogger (Blogspot)" bạn có thể góp ý với blog của mình ở dưới phần comments nhé...
Post a Comment