Home
Blogger
Tips

Membuat Halaman Sitemap Dengan Tab Label

7 minute read
Membuat Halaman Sitemap Dengan Tab Berdasar Label

Membuat Sitemap Blogger dengan menu Tab Label - Sitemap atau daftar isi adalah halaman yang berfungsi untuk mempermudah pengunjung blog mencari artikel yang sesuai berdasarkan Kategori atau Label tertentu.

Selain itu, dengan adanya sitemap juga berfungsi untuk menambah kualitas SEO blog karena memudahkan mesin perayapan melakukan indeks artikel melalui sitemap.xml, dengan begitu artikel blog akan cepat terindeks oleh mesin pencarian seperti Google.

Lalu Seberapa penting laman sitemap harus ada di Blog? Tentu sangat penting karena selain mempermudah pengunjung mencari topi tertentu juga memudahkan bot-crawl melakukan perayapan.

Ada beberapa cara untuk membuat halaman sitemap, seperti menggunakan CSS, atau Pure HTML dan bahkan memakai JavaScript agar lebih dinamis.

Pada tutorial kali ini saya akan berbagi cara membuat sitemap blogger dengan fitur tab sesuai kategori atau label, jadi pengunjung akan lebih mudah menjelajahi isi sebuah blog. Jika kamu penasaran dengan tampilannya kamu bisa lihat pada demo diakhir artikel. Berikut tutorialnya :

Membuat Halaman Sitemap Blogger

  1. Pertama kamu harus masuk ke Dashboard Blogger
  2. Buka Bagian Halaman, lalu buat halaman baru
  3. Masukan Judul halaman, dan deskripsi halaman.
  4. Jika sudah, ubah mode penulisan ke HTML bukan Compose
  5. Selanjutnya salin kode yang diberikan dibawah ini lalu Paste di halaman tersebut pada Tab HTML tadi.
  6. Terakhir Publish halaman

// Kode sitemap ini saya dapat dari blog softwebtuts
<!--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='["Info","Android","Tips","Blogger","Hacker"]'>
</div>
</div>
<aside id="bott">
<div>
<span class="bott">Read the tutorial on Softweb Tuts</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/AVvXsEiJCB_cooF788kwd3QlDKuKTQgluzSrokXJr2IihA96QIbeRzAde9TLA7pDBR13cp4njvcpoE9RfnZ2fh3thnwikjw0_vEs4P23paA8jP3683oBYtwDa1uhVGVOLmLjrczuM_IL-cJojhI/s1600/thumb.png", t[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCB_cooF788kwd3QlDKuKTQgluzSrokXJr2IihA96QIbeRzAde9TLA7pDBR13cp4njvcpoE9RfnZ2fh3thnwikjw0_vEs4P23paA8jP3683oBYtwDa1uhVGVOLmLjrczuM_IL-cJojhI/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.idecara.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>

Untuk mengatur halaman sitemap sesuai dengan Blog punya kamu, cukup ganti kode yang saya tandai sesuai dengan alamat situs blog dan Label postingan agar berfungsi dengan baik.

Istilah Keterangan
https://www.idecara.com Ganti URL ini dengan URL Blog kamu
Info, Android, Tips, Blogger, Hacker Ubah semua label ini dengan Label yang ingin kamu tampilkan, kamu juga bisa menambahkan Label lain

Penutup

Nah itu tadi cara membuat halaman sitemap dengan menu tab berdasarkan label, jika ada yang tidak berhasil jangan ragu untuk bertanya di kolom komentar. Semoga bermanfaat dan jangan lupa share.

Sitemap TeknoDemo Sitemap


Article "Membuat Halaman Sitemap Dengan Tab Label" protected

Post a Comment