Home
Code

Hướng dẫn tạo sơ đồ trang web dạng tab nhãn

Sơ đồ trang web hoặc mục lục giúp người truy cập vào web của bạn dễ dàng tìm thấy các bài viết phù hợp dựa trên các danh mục hoặc nhãn nhất định.

Ngoài ra sơ đồ trang web còn có tác dụng tăng chất lượng SEO của blog vì nó giúp thu thập đữ liệu dễ dàng lập chỉ mục thông qua sitemap.xml.


Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo sơ đồ trang dành cho blogger. Nếu bạn muốn dùng nó thì hãy xem phần bên dưới để biết cách làm nhé. DEMO SITEMAP

Các bước tạo sitemap tab cho blogger

  • Bước 1: Đăng nhập vào blogger
  • Bước 2: Vào phần Trang tạo một trang mới
  • Bước 3: Nhập tiêu đề trang (Sitemap)
  • Bước 4: Chuyển qua phần chế độ xem HTML
  • Bước 5: Sao chép toàn bộ code dưới đây vào
  • Bước 6: Xuất bản

Source Code

Label Sitemap Blog Code By www.quanglinhchiase.com
<!--DOCTYPE html-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Labeled Posts Blogger Widget in Tab 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, 700);
 body {
 margin:0;
 padding:0;
 background:#fff;
 font-family:'Roboto', sans-serif;
 }
*, *:before, *:after {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 }
ins {
 background:#fff;
 }
#arlina {
 background:#fff;
 position:relative;
 margin:5% auto;
 width:100%;
 max-width:920px;
 overflow:hidden;
 box-shadow:0 0 0 20px rgba(0, 0, 0, 0.03);
 }
a:link, a:visited:hover {
 color:#138be6;
 text-decoration:none;
 outline:none;
 transition:all 0.25s;
 }
a:visited, a:link:hover {
 color:#333;
 text-decoration:none;
 }
.recent-labpost {
 margin:20px;
 }
.rctab-button>span {
 padding:15px 20px;
 cursor:pointer;
 position:relative;
 color:#222;
 display:inline-block;
 font-size:120%;
 font-weight:700;
 }
.rctab-button>span.active {
 color:#222;
 background:rgba(0, 0, 0, 0.05)}
.rctab-button>span.active:before {
 content:'';
 top:0;
 opacity:1}
.rctab-content {
 padding:15px;
 background:rgba(0, 0, 0, 0.05);
 position:relative;
 min-height:100px;
 overflow:auto}
.rctab-item {
 float:left;
 width:48%;
 margin:10px 1%;
 background:#fff;
 border:1px solid rgba(0, 0, 0, 0);
 transition:all .3s;
 }
.rctab-item:hover {
 border:1px solid rgba(0, 0, 0, 0.1);
 }
.rctab-item-inner {
 padding:10px}
.rctab-item img {
 float:left;
 width:120px;
 height:auto;
 }
.rctab-item h3 {
 float:right;
 width:calc(100% - 130px);
 height:20px;
 margin:10px 0;
 font-size:120%}
.rctab-item h3 a {
 color:#222}
.rctab-item h3 a:hover {
 color:#e74c3c}
.loader {
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-27.5px;
 margin-top:-27.5px;
 transition:all .3s linear}
.hide-load .loader {
 opacity:0}
.squarin {
 background:#374140;
 width:15px;
 height:15px;
 float:left;
 top:-10px;
 margin-right:5px;
 margin-top:5px;
 position:relative;
 opacity:0;
 -webkit-animation:enter 6s infinite;
 animation:enter 6s infinite}
.enter {
 top:0;
 opacity:1}
.squarin:nth-child(1) {
 -webkit-animation-delay:1.8s;
 -moz-animation-delay:1.8s;
 animation-delay:1.8s}
.squarin:nth-child(2) {
 -webkit-animation-delay:2.1s;
 -moz-animation-delay:2.1s;
 animation-delay:2.1s}
.squarin:nth-child(3) {
 -webkit-animation-delay:2.4s;
 -moz-animation-delay:2.4s;
 animation-delay:2.4s;
 background:#09c}
.squarin:nth-child(4) {
 -webkit-animation-delay:0.9s;
 -moz-animation-delay:0.9s;
 animation-delay:0.9s}
.squarin:nth-child(5) {
 -webkit-animation-delay:1.2s;
 -moz-animation-delay:1.2s;
 animation-delay:1.2s}
.squarin:nth-child(6) {
 -webkit-animation-delay:1.5s;
 -moz-animation-delay:1.5s;
 animation-delay:1.5s}
.squarin:nth-child(8) {
 -webkit-animation-delay:0.3s;
 -moz-animation-delay:0.3s;
 animation-delay:0.3s}
.squarin:nth-child(9) {
 -webkit-animation-delay:0.6s;
 -moz-animation-delay:0.6s;
 animation-delay:0.6s}
@media screen and (max-width:768px) {
 .rctab-item {
 float:left;
 width:100%;
 }
.rctab-item {
 margin:10px auto;
 }
}
aside#bott {
 position:static;
 left:0;
 right:0;
 bottom:0;
 margin:5% auto 0 auto;
 flex:none;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(0, 0, 0, .08);
 color:#999;
 padding:1em}
aside span.bott {
 color:inherit;
 text-decoration:none;
 font-weight:normal;
 display:inline-block;
 padding:.4em 1em}
</style>
</head>
<body>
<div id="arlina">
<div class='recent-labpost' data-label='["Premium","Tips","Html","JavaScript","Css"]'>
</div>
</div>
<aside id="bott">
<div>
<span class="bott">Read the tutorial on www.quanglinhchiase.com</span>
</div>
</aside>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
//<![CDATA[
function getMeImg(a) {
    var t = [a, a, !1];
    return void 0 !== a ? -1 !== a.url.indexOf("img.youtube") ? (t[0] = a.url.replace("default.jpg", "hqdefault.jpg"), t[1] = a.url.replace("default.jpg", "mqdefault.jpg"), t[2] = !0) : (t[0] = a.url.replace("s72-c", "w100-h75-c"), t[1] = a.url.replace("s72-c", "s500-c")) : (t[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9gkupVmDRziPjGBN0WRNivBrNNajFS4O36qeV7Mkng9b3cUsjACzczXWjPq8TmQgmADW0g45zsTPlCJm_wY5SMirbDKzqJc9JmCabfXMPZVmSaJWi7PfSCt517qW2Jq8ybW-0hEbo4M/s1600/thumb.png", t[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9gkupVmDRziPjGBN0WRNivBrNNajFS4O36qeV7Mkng9b3cUsjACzczXWjPq8TmQgmADW0g45zsTPlCJm_wY5SMirbDKzqJc9JmCabfXMPZVmSaJWi7PfSCt517qW2Jq8ybW-0hEbo4M/s1600/thumb.png"), t
}
 
function load_w_tab(a) {
    var t = a.find(".rctab-content>.active"),
        e = t.attr("data-load");
    $.ajax({
        type: "GET",
        url: "https://www.quanglinhchiase.com/feeds/posts/summary?max-results=20&alt=json-in-script",
        async: !1,
        contentType: "application/json",
        dataType: "jsonp",
        success: function(a) {
            if (a.feed.entry) {
                t.append('<div class="wtab-inner"></div>');
                for (var e = 0; e < a.feed.entry.length; e++) {
                    for (var i = a.feed.entry[e], d = 0; d < a.feed.entry[e].link.length; d++)
                        if ("alternate" == a.feed.entry[e].link[d].rel) {
                            var s = a.feed.entry[e].link[d].href;
                            break
                        }
                    var n = i.title.$t,
                        l = getMeImg(i.media$thumbnail),
                        r = '<div class="rctab-item"><div class="rctab-item-inner"><a href="' + s + '"><img src="' + l[0] + '"/></a><h3><a href="' + s + '">' + n + '</a></h3><div style="clear:both"></div></div></div>';
                    t.find(".wtab-inner").append(r)
                }
                t.addClass("hide-load")
            }
        }
    })
}
 
function getwtabs(e) {
    for (var labelArr = eval(e.attr("data-label")), html = '<div class="rctab-button">', i = 0; i < labelArr.length; i++) html += '<span data-target="' + labelArr[i] + '-genova">' + labelArr[i] + "</span>";
    html += '</div><div class="rctab-content">';
    for (var i = 0; i < labelArr.length; i++) html += '<div data-load="' + labelArr[i] + '" data-container="' + labelArr[i] + '-genova">' + loaderHTML + "</div>";
    html += "</div>", e.append(html), e.find(".rctab-button>span").first().addClass("active"), e.find(".rctab-content>div").hide(0), e.find(".rctab-content>div").first().show(0).addClass("active loaded"), setTimeout(function() {
        load_w_tab(e)
    }, 500), e.find(".rctab-button>span").click(function() {
        var a = $(this).attr("data-target"),
            t = $(this),
            i = "";
        e.find(".rctab-content>div").each(function() {
            $(this).attr("data-container") == a && (e.find(".rctab-button>span").removeClass("active"), t.addClass("active"), e.find(".rctab-content>div").removeClass("active").hide(0), $(this).fadeIn().addClass("active"), i = $(this))
        }), i.hasClass("loaded") || (i.addClass("loaded"), setTimeout(function() {
            load_w_tab(e)
        }, 500))
    })
}
var loaderHTML = '<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';
$(function() {
    getwtabs($(".recent-labpost"))
});
//]]>
</script>
</body>
</html>

Lưu ý: Thay link https://www.quanglinhchiase.com/ thành URL blog của bạn nhé

Lời kết

Vậy là mình đã chia sẻ cho các bạn cách làm sitemap dạng tab rồi, rất là đơn giản đúng không nào. Nếu bạn có thắc mắc hay khiếu nại bản quyền xin vui lòng comment xuống phía dưới để mình biết nhé. Chúc các bạn có một ngày làm việc thật là hiệu quả.

Bài viết liên quan:

9 comments

  1. Good
    • ok em
  2. oke luon :3
    • đẳng cấp
  3. trông giống một bản web thu nhỏ nhỉ
    • nhìn ảo luôn
  4. nhưng mà nhìn lỗi lỗi
    • buồn quá anh :(((
  5. Great Article on Blogger theme designing

    Blog Name :- Theforyou
    Blog Url :- https://www.theforyou.xyz