How to Create a Sitemap Page with Labels Tabs Menu - Sitemap or table of contents is a page that serves to make it easier for blog visitors to find suitable articles based on certain categories or labels.

In addition, the sitemap also serves to increase the SEO quality of the blog because it makes it easier for crawling engines to index articles through sitemap.xml, so blog articles will be indexed quickly by search engines like Google.

Then how important is the sitemap page to be on the blog? Of course it is very important because in addition to making it easier for visitors to find certain hats, it also makes it easier for bots to crawl.

There are several ways to create a sitemap page, such as using CSS, or Pure HTML and even using JavaScript to make it more dynamic.

In this tutorial I will share how to create a blogger sitemap with tab features according to categories or labels, so visitors will find it easier to explore the contents of a blog. If you are curious about how it looks, you can see the demo at the end of the article. Here's the tutorial:

Creating a Blogger Sitemap Page

First You have Login Your Blogger Account.
Then Go to Pages Section, then create a new page.
Enter a Page Title, and a Page Description.
If so, change the Compose Mode to HTML instead of Compose.
Then Copy The Code Given Below and paste it on the Page on the HTML tab earlier.
Last Publish Your Page.

Copy This Code


// Label Sitemap Blog Code By https://smarttechcarry.blogspot.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 SmartTechMukesh.Online</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/AVvXsEiTXcxuxpZB00wfwBbgKD7JWJxTT0niuWweGfw3oBvQh2ub2o4Ga5V4hrU1RtGo7RVz-TvNZeVjzsbAk6NT7IeHQUE_ZibmrJ-f-87GqydYsTxBLHXHCCT95hyphenhyphenGuo0IxVRvzsEvJOjEIz8/s1600/thumb.png", t[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXcxuxpZB00wfwBbgKD7JWJxTT0niuWweGfw3oBvQh2ub2o4Ga5V4hrU1RtGo7RVz-TvNZeVjzsbAk6NT7IeHQUE_ZibmrJ-f-87GqydYsTxBLHXHCCT95hyphenhyphenGuo0IxVRvzsEvJOjEIz8/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://smarttechcarry.blogspot.com/feeds/posts/summary/-/" + e + "?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>

To set the sitemap page according to your blog, just change the code that I marked according to the blog site address and post label so that it works properly.

Term	Descripton
https://www.smarttechmukesh.online	Replace this URL with your Blog URL
Premium, Template, Html, Css, JavaScript	Change all these labels with the Labels you want to display, you can also add other Labels

Demo :- Click Here

Conclusion:-

So, that was how to create a sitemap page with tab menus based on labels, if something doesn't work, don't hesitate to ask in the comments column. Hopefully useful and don't forget to share.

How to Create a Sitemap Page with Labels Tabs

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to Create a Sitemap Page with Labels Tabs ?:)

Conclusion

In this article, I have shared How to Create a Sitemap Page with Labels Tabs ?. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!

Smart Tech Carry

How to Create a Sitemap Page with Labels Tabs ?

Creating a Blogger Sitemap Page

Demo :- Click Here

Conclusion:-

Conclusion

About the Author

إرسال تعليق

How To Show Image First in Blogger Post or First Image on a Blog Article [Updated]

Smart Tech Carry