Memasang Daftar Isi/Sitemap di dalam Blog

Memasang Daftar Isi/Sitemap di dalam Blog - Tutorial kali ini memasang Daftar Isi/Sitemap dengan menggunakan Javascript yang nantinya menampilkan Daftar Isi sesuai sortiran Laber dengan animasi keren. Sitemap ini berasal dari modifikasi Arlina. diblognya www.arlinadzgn.com.

Saya berterimakasih telah mengeshare Daftar Isi/Sitmape ini kepublik. Selanjutnya akan saya beritahu cara memasang Daftar Isi/Sitmape keren ini kedalam Blog sobat. Bagi yang menginginkanya silahkan ikuti tutorial ini.

Cara Memasang Daftar Isi/Sitemap di dalam Blog

1. Masuk keblogger > Pilih mau memasukkan kedalam Laman atau Postingan > Kalau sudah memilih mau memasukkan dimana, sekarang ke lanjut berikutnya.

2. Masukkan kode dibawah ini tepat didalam postingan dengan memilih HTML jangan Compose.

<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://minandzgn.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fdd835;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://googledrive.com/host/0B0ja58ELXA-EM3VoT01WUlhzUVk"></script> </div>

Terakhir Klik Simpan.

Result

Untuk Demo lain bisa dilihat disini.
Sekian untuk tutorial Memasang Daftar Isi/Sitemap di dalam Blog. Terimakasih