Hướng dẫn tạo sitemap dạng tab nhãn

Hướng dẫn tạo sitemap dạng tab nhãn

Sơ đồ trang web là một mục lục giúp người đọc có thể truy cập đúng nội dung cần tìm phù hợp. Ngoài ra sơ đồ trang web còn tăng chất lượng SEO blog. Vậy thì trong bài viết này mình sẽ hướng dẫn các bạn tạo sơ đồ trang web nhé, khômg linh tinh luyên thuyên nữa vào làm nào.

Hướng dẫn tạo sitemap dạng tab nhãn

Các bước tạo Sitemap

Bước 1: Đăng nhập vào Blogger

Bước 2: Vào phần Trang ➤ Tạo trang mới

Bước 3: Nhập tiêu đề Trang (Sitemap)

Bước 4: Chuyển sang phần xem HTML và dán code dưới đây vào.

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://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png", t[1] = "https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/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://nguyenphongproo.blogspot.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>

Thay nguyenphongproo.blogspot.com thành url blog của bạn.

Lời Kết

Trên đây là toàn bộ code sitemap dạng tab nhãn mà mình đã chia sẻ. Nếu có vấn đề về khiếu nại hay bản quyền vui lòng comment xuống dưới, chúc các bạn một ngày làm việc hiệu quả.

Copyright © Nguyễn Phong Pro