#Keren-Cara Membuat Sitemap SEO Responsive di Blog dengan Mudah

---

C

ara Membuat Sitemap Blog yang Super Kece - Sitemap sering dipertanyakan oleh para blogger, terutama yang baru belajar tentang aktivitas blogging untuk mendapatkan penghasilan tambahan dari Adsense. Bertanya tanya kesana dan kesini hanya untuk memahami apa itu sitemap dan kelebihannya. Ya, ini adalah hal yang wajar bagi setiap blogger. Pada kesempatan ini, saya akan menjelaskan sitemap dan cara membuatnya.

DAFTAR ISI

1. Apa itu Sitemap
2. Manfaat Sitemap
3. Langkah-langkah
4. Akhir Kata

Apa sih itu Peta Situs (SITEMAP) pada Blogger?

Sederhananya, sitemap atau peta situs adalah halaman khusus yang dibuat untuk mengumpulkan semua data url yang terdapat dalam sebuah blog. Umpan mesin pencari semua jenis informasi yang terjadi di blog Anda. Ini dapat mencakup semua kasus data url blog Anda saat itu

Manfaat peta situs/SITEMAP

Dengan menggunakan sitemap, blog Anda akan lebih mudah untuk memasukkan data url ke mesin pencari. Alhasil, blog Anda akan lebih cepat terindeks di mesin pencari Google. Ini juga salah satu trik SEO (Search Engine Optimization) sederhana yang sering diperhatikan banyak blogger. Saat Anda menerbitkan artikel baru, peta situs akan otomatis diperbarui. Tentunya hal ini juga akan menginformasikan kepada search engine bahwa blog Anda masih terkelola dengan baik dan terus memberikan manfaat bagi banyak orang. Sitemap juga dapat membantu pengunjung melihat berbagai koleksi artikel berdasarkan tag di blog Anda. Dengan itu, pengunjung dapat dengan mudah menemukan artikel yang dicarinya. Misalnya Anda bisa melihat sitemap ngeblogger.com. Menurut beberapa sumber di berbagai forum komunitas yang saya tanyakan, sitemap itu sendiri juga dapat mendorong tampilan halaman dan mengurangi rasio pentalan blog Anda. Tentu saja, ini akan membuat blog Anda lebih baik dari sebelumnya. Nah dibawah ini saya akan memberikan tutorial “Cara Membuat Sitemap Blogger Anda Terlihat Menarik” bagi yang baru belajar. Berikut Langkah-langkah nya.

Langkah-Langkah

  Langkah pertama log in dashboar blogger anda.
  Pilih Halaman/Laman

  Pastikan kamu membuat judul dan memilih mode HTML terlebih dahulu

 Silahkan anda copy script/source code yang saya sediakan dibawah ini.

<!-- Content Of Table CSS -->

<style scoped="scoped" type="text/css">

/* Skin for Blogger Tabbed Layout TOC */

#tabbed-toc{margin:0 auto;background-color:#2D96DF;

-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}

#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}

#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}

#tabbed-toc .toc-tabs{width:20%;float:left}

#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}

#tabbed-toc .toc-tabs li a:hover{background-color:#99D5FE;color:white}

#tabbed-toc .toc-tabs li a.active-tab{background-color:#1F689C;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}

#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #2D96DF;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}

#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}

#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}

#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}

#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #0066B3;overflow:hidden;}

#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:0px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fff;}

#tabbed-toc .panel li:nth-child(even){background-color:#C8E5F9;}

#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}

#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}

@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#1F689C;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}

</style>

<!-- Content Of Table CSS -->

<!-- Content Of Table HTML -->

<div id="tabbed-toc"><span class="loading">Memuat...</span></div>

<!-- Content Of Table HTML -->

<!-- Content Of Table Script Code -->

<script>

/* Global Configuration */

var tabbedTOC = {

blogUrl: location.protocol + "//" + location.host, 

containerId: "tabbed-toc", 

activeTab: 1, 

showDates: false, 

showSummaries: true, 

numChars: 200, 

showThumbnails: true, 

thumbSize: 40, 

noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL

monthNames: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],

newTabLink: true, 

maxResults: 99999,

preload: 0, 

sortAlphabetically: true,

showNew: 7,

newText: " - <i style='color:red;'>New!</i>"

};

/* Do Not Change Global Default Configuration */

var tabbedTOC_defaults = {

    /* Blog URL */

    blogUrl: location.protocol + "//" + location.host,

/* Container ID */

    containerId: "tabbed-toc",

/* The default active tab index (default: the first tab) */

    activeTab: 1,

/* true to show the post date */

    showDates: true,

/* true to show the posts summaries */

    showSummaries: true,

/* Number of summary chars */

    numChars: 200,

/* true to show the posts thumbnails (Not recommended) */

    showThumbnails: true,

/* Thumbnail size */

    thumbSize: 40,

/* No Thumbnail Image Default */

/* No thumbnail URL */

    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

    /* Array of month names */

monthNames: [

        "Januari",

        "Februari",

        "Maret",

        "April",

        "Mei",

        "Juni",

        "Juli",

        "Agustus",

        "September",

        "Oktober",

        "November",

        "Desember"

    ],

/* Open link in new window? */

    newTabLink: true,

/* Maximum posts result */

    maxResults: 99999,

/* Load the feed after 0 seconds (option => time in milliseconds || "onload") */

    preload: 0,

/* 'false' to sort posts by date */

    sortAlphabetically: true,

/* 'false' to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked */

    showNew: true,

/* HTML for the "New!" text */

    newText: " - <em style='color:red;'>Baru!</em>"

};

for (var i in tabbedTOC_defaults) {

    tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(

        tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[

        i];

}

function clickTab(pos) {

    var a = document.getElementById(tabbedTOC_defaults.containerId),

        b = a.getElementsByTagName('ol'),

        c = a.getElementsByTagName('ul')[0],

        d = c.getElementsByTagName('a');

    for (var t = 0; t < b.length; t++) {

        b[t].style.display = "none";

        b[parseInt(pos, 10)].style.display = "block";

    }

    for (var u = 0; u < d.length; u++) {

        d[u].className = "";

        d[parseInt(pos, 10)].className = "active-tab";

    }

}

function showTabs(json) {

    var total = parseInt(json.feed.openSearch$totalResults.$t, 10),

        c = tabbedTOC_defaults,

        entry = json.feed.entry,

        category = json.feed.category,

        skeleton = "",

        newPosts = [];

    for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {

        if (g == entry.length) break;

        entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText :

            '');

    }

    entry = c.sortAlphabetically ? entry.sort(function(a, b) {

        return (a.title.$t.localeCompare(b.title.$t));

    }) : entry;

    category = c.sortAlphabetically ? category.sort(function(a, b) {

        return (a.term.localeCompare(b.term));

    }) : category;

    /* Build the tabs skeleton */

    skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';

    for (var h = 0, cen = category.length; h < cen; h++) {

        skeleton += '<li class="toc-tab-item-' + h +

            '"><a href="javascript:clickTab(' + h + ');">' + category[h].term +

            '</a></li>';

    }

    skeleton += '</ul>';

    /* Bulid the tabs contents skeleton */

    skeleton += '<div class="toc-content">';

    for (var i = 0, cnt = category.length; i < cnt; i++) {

        skeleton += '<ol class="panel" data-category="' + category[i].term +

            '"';

        skeleton += (i != (c.activeTab - 1)) ? ' style="display:none;"' : '';

        skeleton += '>';

        for (var j = 0; j < total; j++) {

            if (j == entry.length) break;

            var link, entries = entry[j],

                pub = entries.published.$t, /* Get the post date */

                month = c.monthNames, /* Month array from the configuration */

                title = entries.title.$t, /* Get the post title */

                summary = ("summary" in entries && c.showSummaries === true) ?

                entries.summary

                .$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(

                    /[<>]/g, "").substring(

                    0, c.numChars) + '&hellip;' : '', /* Get the post summary */

                img = ("media$thumbnail" in entries && c.showThumbnails ===

                    true) ?

                '<img class="thumbnail" style="width:' + c.thumbSize +

                'px;height:' + c.thumbSize +

                'px;" alt="" src="' + entries.media$thumbnail.url.replace(

                    /\/s72(\-c)?\//,

                    "/s" + c.thumbSize + "-c/") + '"/>' :

                '<img class="thumbnail" style="width:' + c.thumbSize +

                'px;height:' + c.thumbSize +

                'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//, "/s" +

                    c.thumbSize +

                    "-c/") + '"/>', /* Get the post thumbnail */

                cat = (entries.category) ? entries.category : [], /* Post categories */

                date = (c.showDates) ? '<time datetime="' + pub + '" title="' +

                pub + '">' +

                pub.substring(8, 10) + ' ' + month[parseInt(pub.substring(5, 7),

                    10) - 1] +

                ' ' + pub.substring(0, 4) + '</time>' : ''; /* Formated published date */

            for (var k = 0; k < entries.link.length; k++) {

                if (entries.link[k].rel == 'alternate') {

                    link = entries.link[k].href; /* Get the post URL */

                    break;

                }

            }

            for (var l = 0, check = cat.length; l < check; l++) {

                var target = (c.newTabLink) ? ' target="_blank"' : ''; /* Open link in new window? */

                /* Write the list skeleton only if at least one of the post

                has the same category term with one of the current categories term list */

                if (cat[l].term == category[i].term) {

                    skeleton += '<li title="' + cat[l].term + '"';

                    skeleton += (c.showSummaries) ? ' class="bold"' : '';

                    skeleton += '><a href="' + link + '"' + target + '>' +

                        title + date +

                        '</a>';

                    skeleton += (c.showSummaries) ? '<span class="summary">' +

                        img + summary +

                        '<span style="display:block;clear:both;"></span></span>' :

                        '';

                    skeleton += '</li>';

                }

            }

        }

        skeleton += '</ol>';

    }

    skeleton += '</div>';

    skeleton += '<div style="clear:both;"></div>';

    document.getElementById(c.containerId).innerHTML = skeleton;

    clickTab(c.activeTab - 1);

}

(function() {

    var h = document.getElementsByTagName('head')[0],

        s = document.createElement('script');

    s.type = 'text/javascript';

    s.src = tabbedTOC_defaults.blogUrl +

        '/feeds/posts/summary?alt=json-in-script&max-results=' +

        tabbedTOC_defaults.maxResults +

        '&orderby=published&callback=showTabs';

    if (tabbedTOC_defaults.preload !== "onload") {

        setTimeout(function() {

            h.appendChild(s);

        }, tabbedTOC_defaults.preload);

    } else {

        window.onload = function() {

            h.appendChild(s);

        };

    }

})();

</script>

<!-- Content Of Table Script Code -->

  

  

  

 

 Langkah terakhir kamu pastekan kode yang tadi kamu copy dan PUBLISH. Kamu akan melihat hasil tampilannya.

Akhir Kata

Oke, begitulah tutorial singkat cara membuat Sitemap Keren pad blog. Bila ada kritik, saran dan masukan boleh tulis dikomentar dibawah ini. Terimakasih.

Keywords

blog, sitemap, Petasitus, SEO, responsive