Cara Membuat Sitemap HTML / Peta Situs Di Blogger

byIDBLOGGER -March 17, 2021

0

Cara Membuat Sitemap Di Blogger - Sebelum kita masuk ke pembuatan sitemap / peta situs, perlu kita ketahui perbedaan antara peta situs HTML dan peta situs XML.

Cara Membuat Sitemap HTML / Peta Situs Di Blogger

Apa Itu Sitemap XML?

Sebenarnya, Mesin pencari menggunakan Web Crawler (bot) untuk menemukan halaman dari tautan di dalam situs dan dari situs lain.

Peta Situs XML adalah file .xml yang dilampirkan ke situs web yang memberikan data ini ke Crawler. File peta situs terdiri dari semua URL posting dengan informasi tambahan mengenai setiap URL.

Mesin pencari menggunakan data ini untuk mengindeks posting blog kita. Penggunaan file sitemap XML menjamin bahwa halaman web kita akan terindeks di mesin pencari.

Menarik Untuk di Baca: Cara Lock Band Frekuensi 4G LTE Telkomsel Orbit Star 2

Apa Itu Sitemap HTML?

Sitemap HTML adalah halaman HTML biasa yang dapat dibaca oleh bot mesin pencari maupun oleh pengunjung. Crawler web memperlakukannya seperti halaman HTML biasa (dengan banyak link).

Tujuan utama penggunaan peta situs berbasis HTML adalah untuk mewakili semua posting kita secara teratur sehingga pengguna dapat menavigasi semua posting melalui satu halaman. (Kurang lebih mirip seperti daftar isi)

Lihat Juga: Cara Membuat Blog Dengan Github Pages

Kelebihan Sitemap HTML

Daftar posting akan diperbarui secara otomatis dengan penambahan posting baru.
Penambahan otomatis Suffix baru ke posting yang baru ditambahkan.
Diurutkan menurut abjad atau bisa kita sesuaikan sendiri.

Bagaimana Cara Menambahkan Halaman Sitemap Di Blogger?

Catatan: Ini adalah Halaman Peta Situs Berbasis Label

Langkah 1. Masuk ke akun Blogger, lalu buka Halaman >Halaman baru.

Langkah 2. Beri Judul Halaman `Sitemap` di bidang Judul halaman, dan beralih ke Mode `HTML`

Langkah 3. Klik View RAW, Copy dan pastekan script dibawah ini di area body content, hapus terlebih dahulu kode default jika ada

<script type='text/javascript'>

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}

function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}

function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}



function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
        firsti = a;
        do {
            document.write("<p>");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div></div>");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

</script>

<script src="http://www.yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script> {codeBox}

Langkah 4. Ubah `http://yourblog.blogspot.com` dengan alamat blog kalian.

Langkah 5. Simpan dan Publikasikan, lihat hasilnya. atau bisa melihat demo dibawah ini.

{getButton} $text={Demo 1} $icon={preview}

Dan contoh lain dari sitemap bisa menggunakan kode dibawah ini, lebih keren dan simpel

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #2D96DF; -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:#FF5F00;font-weight:bold;margin:0 -5px; padding:1px 0 2px 11px;background: #3498DB; border:1px solid #2D96DF; 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;} .labl:first-letter{text-transform:uppercase;} .new{color:#FF5F00;font-weight:bold;font-style:italic;} .postname{font-weight:normal;background:#fff;margin-left: 35px;} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style>
<br /><div id="toc"><script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script><br /><script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div></div> {codeBox}

{getButton} $text={Demo 2} $icon={preview}

Oke, sekarang kita sudah berhasil membuat sitemap keren untuk blogger, kita bisa menaruh sitemap tersebut sebagai link untuk mempermudah pengunjung melihat semua konten yang ada di blog kita, Sekian dan terimakasih.

Salam idblogger.org - Blogger Indonesia!

Drop your comments, but make sure they’re related to the discussion!

I'd be grateful if you could read the Commenting Rules on this blog before posting a comment.