Cara Memasang Sitemap Keren dan Responsive di Blogspot

Pengertian Sitemap

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Selain itu, sitemap juga bisa disebut sebagai Daftar Isi dari sebuah blog yang berguna untuk mempermudah robot mesin pencari merayapi isi konten di dalam website atau blog, selain mempermudah robot mesin pencari sitemap juga bisa mempermudah visitor / pengunjung blog mencari setiap konten yang di butuhkan.

 

Tutorial Memasang Sitemap Responsive di Blog

Setelah tahu penjelasan dari sitemap sekarang kita lanjut ke tutorial cara memasang sitemap keren dan responsive di blogspot. Sitemap ini merupakan karya seorang blogger yaitu Taufik Nurrohman di dalam blog nya www.dte.web.id dan sudah di modifikasi oleh Arlina Design di blog nya www.arlinadzgn.com dan akan saya share disini siapa tahu sobat tertarik memasang nya di blog sobat.

Silahkan login ke dasbor blogger untuk memasang nya :
1. Klik menu Laman
2. Klik Laman Baru
3. Beralih dari mode Compose ke mode HTML

Kemudian copy paste script berikut
<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://dodiventuraz.blogspot.co.id/',
    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>

Jangan lupa sobat harus mengganti url http://dodiventuraz.blogspot.co.id/ dengan url blog atau website sobat, kalau sudah selesai klik Simpan. Untuk melihat hasilnya sobat bisa klik pada menu sitemap blog ini atau silahkan klik disini.

Dengan langkah sederhana sobat tidak akan kecewa dengan hasil sitemap nya yang bisa dibilang sangat elegan, mudah bukan ? silahkan dicoba & semoga bermanfaat.


Source references :
https://id.wikipedia.org/wiki/Sitemaps
http://www.arlinadzgn.com/2015/04/menerapkan-daftar-isi-menurut-label.html  

Subscribe to receive free email updates: