Cách tạo Sitemap và một số mẫu Sitemap đẹp cho Blogger ~ Iris Tips

How to create a Sitemap for Blogger?

Sitemap (hay còn được gọi là sơ đồ của một trang web) có lẽ là một tiện ích đã khá quen thuộc cho những ai làm website. Nó là một tiện ích có chứa tất cả các đường dẫn bài viết của một trang web. Thông qua sitemap độc giả có thể có được một cái nhìn tổng quan về website của bạn và có thể tìm kiếm các bài viết được nhanh chóng và thuận tiện hơn.

Trong bài viết này Iris Tips sẽ chia sẻ cho các bạn cách tạo một trang Sitemap cho Blogger và kèm theo đó là một số mẫu Sitemap đẹp cho bạn lựa chọn.

Cách tạo Sitemap

1Đầu tiên các bạn vào Blogger >> Trang và nhấn vào nút Trang mới

2Tiếp theo chuyển qua tab HTML và dán đoạn code sitemap bên dưới mà bạn đã chọn vào.

Một số mẫu Sitemap đẹp

Sitemap style 1

DEMO

<style type="text/css">
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}
#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}
#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}
#feedContainer .toc-title:hover {color:#404040;}
#feedContainer .news-text {font-size:11px;display:none;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}
#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
 margin-left:5px}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>Sắp xếp theo : </label></td><td><select id="orderFeedBy"><option selected="" value="published">Bài mới đăng</option><option value="updated">Bài mới cập nhật</option></select></td></tr>
<tr><td><label>Lọc theo chủ đề : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Đang tải...</option></select></span></td></tr>
<tr><td><label>Tìm kiếm bằng từ khóa : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="resultDesc"></header><br /><br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Đang tải...</div>
  </div>
<script src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-1.js" type="text/javascript"></script>
<script type='text/javascript'>
var tocConfig = {
    url: "http://iris-tips.blogspot.com",
    feedNum: 6,
    labelName: (window.location.hash && window.location.hash != "#0" && window.location.hash != "#search") ? encodeURIComponent(window.location.hash.substr(1)) : false,
    numChars: 140,
    thumbWidth: 70,
    navText: "Tải thêm &#9660;",
    frontText: "Lên đầu &uArr;",
    noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    loading: "<span>Đang tải...</span>",
    searching: "<span>Đang tìm kiếm...</span>",
    MonthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],
    noResult: "No Result"
};
</script>

Sitemap style 2

DEMO

<style type="text/css">
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:100%;margin-bottom:5px;position:relative;z-index:0;}
#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}
#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}
#feedContainer .toc-title:hover {color:#404040;}
#feedContainer .news-text {font-size:11px;padding-top:10px;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}
#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
 margin-left:5px}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>Sắp xếp theo : </label></td><td><select id="orderFeedBy"><option selected="" value="published">Bài mới đăng</option><option value="updated">Bài mới cập nhật</option></select></td></tr>
<tr><td><label>Lọc theo chủ đề : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Đang tải...</option></select></span></td></tr>
<tr><td><label>Tìm kiếm bằng từ khóa : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="resultDesc"></header><br /><br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Đang tải...</div>
</div>
<script src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-1.js" type="text/javascript"></script>
<script type='text/javascript'>
var tocConfig = {
    url: "http://iris-tips.blogspot.com",
    feedNum: 6,
    labelName: (window.location.hash && window.location.hash != "#0" && window.location.hash != "#search") ? encodeURIComponent(window.location.hash.substr(1)) : false,
    numChars: 225,
    thumbWidth: 70,
    navText: "Tải thêm &#9660;",
    frontText: "Lên đầu &uArr;",
    noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    loading: "<span>Đang tải...</span>",
    searching: "<span>Đang tìm kiếm...</span>",
    MonthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],
    noResult: "No Result"
};
</script>

Sitemap style 3

DEMO

<style type="text/css">
.bsd-sitemap{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:14px;font-weight:410;overflow:hidden;border-radius:5px;box-shadow:0 0 9px rgba(0,0,0,.1)}
.bsd-sitemap .toc-header{color:#fff;font-family:inherit;font-weight:410;font-size:14px;background-color:#333;margin:0;padding:13px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.bsd-sitemap .toc-header:hover{background-color:#3a3a3a}
.bsd-sitemap .toc-header:before{content:'';width:0;height:0;position:relative;float:right;top:10px;right:10px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.bsd-sitemap .toc-header.active{background:#3a3a3a;color:#fff}
.bsd-sitemap .toc-header.active:before{border-color:#fff transparent transparent;top:5px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.bsd-sitemap .loading{display:block;padding:14px;text-decoration:blink}
.bsd-sitemap ol{margin:0;padding:0;list-style:none;transition:initial}
.bsd-sitemap li{line-height:normal!important;margin:0!important;padding:7px 7px 7px 16px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.bsd-sitemap a{color:#aaa;text-decoration:none;font-size:87%;transition:initial}
.bsd-sitemap a:visited{color:#666;transition:initial}
.bsd-sitemap a:hover,.bsd-sitemap a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<div dir="ltr" style="text-align:left;" trbidi="on">
<div class="bsd-sitemap" id="bsd-sitemap">
<span class="loading">Đang tải..</span></div>
</div>

<script type='text/javascript'>
var toc_config = {
    url:'http://iris-tips.blogspot.com',
    containerId: 'bsd-sitemap',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FF0000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:2px;">Mới!</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
</script>

Sitemap style 4

DEMO

<style type="text/css">
#toc{width:100%;margin:5px auto;border:1px solid #dddddd;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2)}
.labl{color:#eb3131;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#eb3131 0%,#eeeeee 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#eb3131),color-stop(1,#f06060));border:1px solid #transparent;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block}
.labl a{color:#fff;line-height:2.5em;}
.labl:first-letter{text-transform:uppercase}
.new{color:#444444;font-weight:bold;font-style:none}
.postname{padding-left:30px;font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#eeeeee))}
.postname li{border-bottom:#ddd 1px dotted;margin-right:5px;line-height:2.5em;}
</style>

<div id="toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;"><script src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-4.js" type="text/javascript"></script><script src="http://iris-tips.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Sitemap style 5

DEMO

<style type="text/css">
#tabbed-toc{margin:0 auto;background-color:#FFFFFF;border:4px dashed rgb(48,167,229);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 10px rgba(0,0,0,0.55);overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#434B50;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:rgba(110,193,255,0.68);color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#6EC1FF;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:2px dotted #30A7E5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#434B50;line-height:40px;height:35px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid rgb(48, 167, 229);overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#CAE6F2}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}

</style>

<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://iris-tips.blogspot.com", 
    containerId: "tabbed-toc", 
    activeTab: 1, 
    showDates: false, 
    showSummaries: false, 
    numChars: 200, 
    showThumbnails: false, 
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 6, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>Mới!</em>" 
};  
 </script> 
<script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-5.js"></script>

Sitemap style 6

DEMO

<style type="text/css">
#tabbed-toc{margin:0 auto;background-color:#FFFFFF;border:4px dashed rgb(48,167,229);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 10px rgba(0,0,0,0.55);overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#434B50;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:rgba(110,193,255,0.68);color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#6EC1FF;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:2px dotted #30A7E5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#434B50;line-height:40px;height:35px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid rgb(48, 167, 229);overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#CAE6F2}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>

<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://iris-tips.blogspot.com", 
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false, 
    showSummaries: true, 
    numChars: 200, 
    showThumbnails: true,
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true,
    showNew: 6, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>Mới!</em>" 
}; 
 </script> 
<script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-5.js"></script>

Sitemap style 7

DEMO

<style type="text/css">
#bp_toc{border:0 solid #000000;background:#ffffff;padding:10px 0;width:100%;margin-top:10px}
#bp_toc a{text-decoration:none!important}
#bp_toc a:hover{text-decoration:underline!important}
.toc-header-col1,.toc-header-col2,.toc-header-col3{padding:10px;background:#292929;width:250px;border-bottom:5px solid #99dbff}
.toc-header-col2{border-right:2px solid #ffffff;border-left:2px solid #ffffff}
.toc-header-col2{width:75px;border-bottom:5px solid #ed4e69}
.toc-header-col3{width:125px}
.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-family:"Trebuchet MS",sans-serif;font-size:14px;font-weight:bold;line-height:1.4em;font-style:normal;border-collapse:separate;color:#ebebeb;text-decoration:none}
.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:underline}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;background:#f8f8f8;border-bottom:2px solid #ffffff}
.toc-entry-col2{border-right:2px solid #ffffff;border-left:2px solid #ffffff}
.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#45818e;font-size:12px;font-family:verdana}
.toc-note{background-color:#333333;padding:10px;font-size:20px;display:inline-block;display:inline;text-align:center;color:#999999;}
</style>

<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;"><script src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-6.js" type="text/javascript"></script><script src="http://iris-tips.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script></div>

Sitemap style 8

Lưu ý: Ở style này code đã bị tác giả mã hóa và sẽ chứa backlink.

DEMO

<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

<script src="https://sites.google.com/site/iristipsblogger/file/Blogger-Sitemap-8.js" type='text/javascript'></script>
<script src="http://iris-tips.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

Iris Tips

Cách tạo Sitemap và một số mẫu Sitemap đẹp cho Blogger

Iris Tips

Có thể bạn quan tâm

Mẹo nhỏ khi bình luận

2 Comments

Iris Tips

Cách tạo Sitemap và một số mẫu Sitemap đẹp cho Blogger

How to create a Sitemap for Blogger?

Cách tạo Sitemap

Một số mẫu Sitemap đẹp

Sitemap style 1

Sitemap style 2

Sitemap style 3

Sitemap style 4

Sitemap style 5

Sitemap style 6

Sitemap style 7

Sitemap style 8

Iris Tips

Có thể bạn quan tâm

Hơn 10.000 độc giả đã đăng ký thành công

Mẹo nhỏ khi bình luận

2 Comments

Cập nhật mới trên Iris Tips

Phiếu khảo sát