Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Daftar isi atau sitemap merupakan halaman wajib bagi setiap blogger untuk di pasang di blog nya . karena fungsinya untuk memudahkan pengunjung untuk mencari daftar artikel yang sudah ada di blog kita. Banyak di luar sana Tutorial Cara Membuat Daftar Isi di Blogger dengan berbagai cara dan berbagai tampilan . ada yang responsive ada juga yang tidak. Pada tutorial kali ini saya menaruh halaman daftar isi atau sitemapnya di bagian laman tapi gak masalah kalau sobat menaruhnya bukan di laman blog sobat semisal di bagian post . oke tanpa banyak basa basi lagi berikut Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label :

• Pastikan sobat sudah login di akun blogger sobat lalu klik laman

• Silahkan sobat buat laman baru

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

• Masukan judul laman blog sobat , kemudian pilih bagian HTML ( Note HTML ya bukan Compose ) dan pastekan kode di bawah ini di bagian HTML . Jika sudah silahkan klik Publikasikan

<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>

<br />


<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>



<script>
var toc_config = {
    url: 'http://blogger-css.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://rawgit.com/bloggercss/bcss/master/sitemap.js"></script>
</div>

Note : Ganti https://blogger-css.blogspot.co.id/ dengan url blog sobat

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

• Daftar isi atau sitemap berhasil di buat di laman . Silahkan klik Lihat untuk melihat hasil dari Daftar isi yang sobat buat tadi.

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

• Jika sudah benar maka tampilan daftar isi sobat akan tampak seperti ini

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Result