Tổng Hợp Một Số Sitemap Đẹp Dành Cho Blogger/Blogspot


Ở bài viết này mình sẽ chia sẻ cho các bạn 3 mẫu mà mình sưu tầm được. Chắc các bạn đều đã biết các thêm rồi đúng không. Nên mình cũng không nói cách thêm như thế nào nhé.

Mẫu 1: 

Javascript/HTML

<div class="spicetab" id="spicetab"></div>
<script>
var tabbedTAB={blogUrl:"https://quangsangit.com/",containerId:"spicetab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://quangsangit.com",containerId:"spicetab",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:#ff0000;">New!</em>'};if("undefined"==typeof tabbedTAB)tabbedTAB=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTAB[e]?tabbedTAB[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="tab-line"></span><ul class="tab-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="tab-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="tab-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);
</script>

CSS

.spicetab{border-radius:15px;margin:0 auto;position:relative;opacity: .9;background:linear-gradient(90deg, rgb(169, 108, 232), rgb(0, 115, 183));background-size:400% 400%;animation:Gradient 15s ease infinite}
.spicetab .loading{display:block;padding:2px 12px;color:#fff}
.spicetab ul,.spicetab ol,.spicetab li{list-style:none;color: #fff; margin:0;padding:0}
.spicetab .tab-tabs{width:20%;float:left}
.spicetab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.spicetab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.spicetab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.spicetab .tab-content,.spicetab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.spicetab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.spicetab .panel{position:relative;z-index:5}
.spicetab .panel li a{text-decoration: none;color:#737373;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.spicetab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right}
.spicetab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.spicetab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.spicetab .panel li{background-color:#f9f9f9;margin:0}
.spicetab .panel li:nth-child(even){background-color:#fff}
.spicetab .panel li a:hover,.spicetab .panel li a:focus,.spicetab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.spicetab .panel li a em{background:#0998ce;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.spicetab .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.spicetab .tab-tabs,.spicetab .tab-content{overflow:hidden;width:auto;float:none;display:block}.spicetab .tab-tabs li{display:inline;float:left}.spicetab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.spicetab .tab-content{border:none}.spicetab .tab-line,.spicetab .panel li time{display:none}}

Jquery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Mẫu 2:

Javascript/HTML

<div class="spicetab" id="spicetab"></div>
<script>
var tabbedTAB={blogUrl:"https://quangsangit.com/",containerId:"spicetab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:#ff0000;">New</em>'};
<script type='text/javascript'>
 var postTitle = new Array();
 var postUrl = new Array();
 var postPublished = new Array();
 var postDate = new Array();
 var postLabels = new Array();
 var postRecent = new Array();
 var sortBy = "titleasc";
 var numberfeed = 0;
 function bloggersitemap(a) {
     function b() {
         if ("entry" in a.feed) {
             var d = a.feed.entry.length;
             numberfeed = d;
             ii = 0;
             for (var h = 0; h < d; h++) {
                 var n = a.feed.entry[h];
                 var e = n.title.$t;
                 var m = n.published.$t.substring(0, 10);
                 var j;
                 for (var g = 0; g < n.link.length; g++) {
                     if (n.link[g].rel == "alternate") {
                         j = n.link[g].href;
                         break
                     }
                 }
                 var o = "";
                 for (var g = 0; g < n.link.length; g++) {
                     if (n.link[g].rel == "enclosure") {
                         o = n.link[g].href;
                         break
                     }
                 }
                 var c = "";
                 if ("category" in n) {
                     for (var g = 0; g < n.category.length; g++) {
                         c = n.category[g].term;
                         var f = c.lastIndexOf(";");
                         if (f != -1) {
                             c = c.substring(0, f)
                         }
                         postLabels[ii] = c;
                         postTitle[ii] = e;
                         postDate[ii] = m;
                         postUrl[ii] = j;
                         postPublished[ii] = o;
                         if (h < 10) {
                             postRecent[ii] = true
                         } else {
                             postRecent[ii] = false
                         }
                         ii = ii + 1
                     }
                 }
             }
         }
     }
     b();
     sortBy = "titledesc";
     sortPosts(sortBy);
     sortlabel();
     displayToc();
 }
 function sortPosts(d) {
     function c(e, g) {
         var f = postTitle[e];
         postTitle[e] = postTitle[g];
         postTitle[g] = f;
         var f = postDate[e];
         postDate[e] = postDate[g];
         postDate[g] = f;
         var f = postUrl[e];
         postUrl[e] = postUrl[g];
         postUrl[g] = f;
         var f = postLabels[e];
         postLabels[e] = postLabels[g];
         postLabels[g] = f;
         var f = postPublished[e];
         postPublished[e] = postPublished[g];
         postPublished[g] = f;
         var f = postRecent[e];
         postRecent[e] = postRecent[g];
         postRecent[g] = f
     }
     for (var b = 0; b < postTitle.length - 1; b++) {
         for (var a = b + 1; a < postTitle.length; a++) {
             if (d == "titleasc") {
                 if (postTitle[b] > postTitle[a]) {
                     c(b, a)
                 }
             }
             if (d == "titledesc") {
                 if (postTitle[b] < postTitle[a]) {
                     c(b, a)
                 }
             }
             if (d == "dateoldest") {
                 if (postDate[b] > postDate[a]) {
                     c(b, a)
                 }
             }
             if (d == "datenewest") {
                 if (postDate[b] < postDate[a]) {
                     c(b, a)
                 }
             }
             if (d == "orderlabel") {
                 if (postLabels[b] > postLabels[a]) {
                     c(b, a)
                 }
             }
         }
     }
 }
 function sortlabel() {
     sortBy = "orderlabel";
     sortPosts(sortBy);
     var a = 0;
     var b = 0;
     while (b < postTitle.length) {
         temp1 = postLabels[b];
         firsti = a;
         do {
             a = a + 1
         } while (postLabels[a] == temp1);
         b = a;
         sortPosts2(firsti, a);
         if (b > postTitle.length) {
             break
         }
     }
 }
 function sortPosts2(d, c) {
     function e(f, h) {
         var g = postTitle[f];
         postTitle[f] = postTitle[h];
         postTitle[h] = g;
         var g = postDate[f];
         postDate[f] = postDate[h];
         postDate[h] = g;
         var g = postUrl[f];
         postUrl[f] = postUrl[h];
         postUrl[h] = g;
         var g = postLabels[f];
         postLabels[f] = postLabels[h];
         postLabels[h] = g;
         var g = postPublished[f];
         postPublished[f] = postPublished[h];
         postPublished[h] = g;
         var g = postRecent[f];
         postRecent[f] = postRecent[h];
         postRecent[h] = g
     }
     for (var b = d; b < c - 1; b++) {
         for (var a = b + 1; a < c; a++) {
             if (postTitle[b] > postTitle[a]) {
                 e(b, a)
             }
         }
     }
 }
 function displayToc() {
     var a = 0;
     var b = 0;
     while (b < postTitle.length) {
         temp1 = postLabels[b];
         document.write("");
         document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
         firsti = a;
         do {
             document.write("<p>");
             document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
             if (postRecent[a] == true) {
                 document.write(' - <strong><span>New!</span></strong>')
             }
             document.write("</a></p>");
             a = a + 1
         } while (postLabels[a] == temp1);
         b = a;
         document.write("</div></div>");
         sortPosts2(firsti, a);
         if (b > postTitle.length) {
             break
         }
     }
 }
 </script>
 <script src="https://quangsangit.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script></script>

Mẫu 3: 

Javascript/HTML


<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.quangsangit.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

CSS

#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}


Thay đường dẫn quangsangit.com thành đường dẫn tới blog của bạn
Bạn có thể xem trước demo ở dưới đây.


Chúc các bạn thành công

You may like these posts

0 Comments

  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"