Cara Membuat Sitemap Sederhana dan Keren di Blogspot 100% SEO Friendly

Hai sobat blogger, seperti pada pembahasan sebelumnya kita telah membahas apa pengertian dan kegunaan sitemap pada blog. kali ini kita belajar bagaimana sih cara membuat sitemap pada blog agar blog kita bisa mempunyai daftar isi postingan yang sederhana, keren dan pastinya SEO Friendly. di bawah ini kita akan memberikan Style sitemap keren dan Responsive beserta cara membuat sitemap pada blog lengkap dengan tutorial sebagai berikut :

Sitemap SEO  Sederhana dan Keren Responsive

Berikut beberapa koleksi untuk membuat sitemap keren. pilih salah satu sitemap dibawah ini lalu pasang pada laman blog anda. Jika anda memasang dengan benar maka sitemap sudah berhasil anda pasang di blog.

Sitemap Style 1 

Kode Script Sitemap Style 1

<div class='jontor'>
<script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .mas_tamvan_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.mas_tamvan_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

Sitemap Style 2

Kode Script Sitemap Style 2

JS <link rel="stylesheet" href="https://rawgit.com/markokono/sitemap/master/accordion-toc-skinsaya.css"/>
<div id="table-of-content" class="table-of-content">
<span class="loading">Memuat...</span></div>
<div class="credit-link">
<a href="//www.flobamorapedia.com/2017/05/cara-pasang-sitemapdaftar-isi.html" title="Accordion TOC by Marko Kono">&#9654; Accordion TOC</a></div>
<script>
var toc_config = {
    url: 'https://zoinformasi.blogspot.com',
    containerId: 'table-of-content',
    showNew: 10,
    newText: ' &ndash; <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://rawgit.com/markokono/sitemap/master/accordionsaya.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Keterangan :Silahkan ganti URL http:/zoinformasi.blogspot.com dengan URL blog anda.
Cara Memasang Sitemap Sederhana dan Keren di BlogPertama, Silahkan login akun blogger anda, kemudian pilih “Laman” lalu klik tombol “Laman Baru” lihat gambar berikut:

Kedua, Isi judul laman dengan “Sitemap” atau “Daftar Isi“, Pilih Mode “HTML”

Ketiga, Pasang kode HTML sitemap pilihan anda, terakhir klik “Publikasikan”. Perhatikan gambar dibawah ini.

Keempat, Selesai dan lihat hasilnya. untuk melihat hasilnya bisa di lihat pada gambar dibawah ini.


Sekian tutorial cara membuat sitemap pada blog , semoga berhasil, salam blogger !!