Rabu, 06 Juni 2018

Cara Membuat Sitemap Blog Keren Untuk Blogspot 2018

Sitemap atau peta situs pada blog merupakan sebuah navigasi yang memudahkan para pengunjung untuk mengetahui daftar isi artikel di blog secara keseluruhan. Sangat penting untuk membuat sitemap keren di blog karena ini akan berkaitan langsung dengan ketertarikan para pembaca untuk membaca artikel lainnya di blog kalian.

Ketika pengunjung tertarik dengan artikel kita, maka besar kemungkinan mereka akan mencari menu sitemap untuk mengetahui isi artikel menarik lainnya. Ini juga bisa berhubungan dengan persentase bounce rate pada blog, dengan memasang sitemap jika pengunjung tertarik mereka akan membaca artikel lainnya dari apa yang telah ditampilkan oleh sitemap yang telah kita buat.

Sitemap yang akan saya bagikan merupakan sitemap yang berjalan secara otomatis pada blog, jadi ketika kamu update artikel otomatis akan masuk juga langsung ke daftar isi/sitemap blog.

Cara Membuat Sitemap di Blogspot


1. Buka dasboard blogspot anda.
2. Pilih menu halaman -> halaman baru.
3. Pilih mode HTML untuk memasukan kode.
4. Silahkan copy dan paste kode dibawah ini:

cara membuat sitemap di blogspot

STYLE 1
<div style="text-align: center;">
Sitemap</div>
<div style="text-align: left;">
<br /></div>
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js">
</script>
<script src="https://robbyjungjunan.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>


STYLE 2
<link href="https://goo.gl/2qrReh" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="https://goo.gl/6FjxRX" type="text/javascript"></script>
<script src="https://robbyjungjunan.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


STYLE 3
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://robbyjungjunan.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">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://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
Keterangan: Silahkan ganti kode yang berwarna merah dengan url blog anda.

5. Silahkan tekan publikasi dan lihat hasil sitemapnya.

Itulah beberapa contoh sitemap blog keren untuk blogspot, semoga kamu suka dengan sitemap yang sudah saya rekomendasikan diatas. Jika kamu merasa terbantu silahkan share ke teman-teman kamu agar mereka juga tahu bahwa ada sitemap keren untuk dipasang pada blog. Jangan lupa beri komentar dibawah postingan ini jika kamu ingin bertanya atau sekedar memberikan saran.

Perhatian!!!
Perlu kalian ketahui bahwa Kode/script diatas bukan buatan saya, script diatas diambil dari berbagai sumber di internet yang saya rekomendasikan dan saya anggap sebagai sitemap terkeren untuk di pasang pada blog anda.


Sumber kode/script:

http://infodiki.blogspot.co.id/2017/07/sitemap-keren-otomatis-dan-responsive-di-blogger.html
https://www.arlinadzgn.com/2015/04/menerapkan-daftar-isi-menurut-label.html


EmoticonEmoticon