Membuat daftar isi Buka tutup

Cara membuat Daftar isi blog buka tutup, Daftar isi adalah dalam bahasa blogger nya di sebut dengan Sitemap dan daftar isi atau sitemap ini berfungsi untuk membuat halaman khusus daftar isi artikel/posting yang sudah di publikasikan sehingga pengunjung website/blog dengan membuka halaman daftar isi atau sitemap bisa melihat keseluruhan judul artikel/posting pada website/blog yang sedang di bukanya, sebagai contohnya silahkan buka menu halaman Daftar isi di blog ini atau bisa langsung membuka Disini.

Lalu bagaimana Cara membuat daftar isi buka tutup, Contoh yang saya berikan dalam link di atas adalah daftar isi atau sitemap dengan versi yang lain pada dasarnya fungsi nya sama akan tetapi yang berbeda tampilan dan aksesories yang lainya, dan untuk panduan Cara membuat sitemap dengan versi yang ada dalam link tersebut bisa mengunjungi Cara membuat sitemap, dan pada panduan ini sesuai judul yaitu Membuat daftar isi buka tutup maka tampilanya nantinya tetap sesuai label akan tetapi judul postinganya bisa di buka atau di tutup hal ini bisa untuk menghemat ruang dan terlihat rapi , contoh nya bisa di lihat gambar yang di bawah ini

dan panduan cara membuat daftar isi atau sitemap buka tutup silahkan simak dan ikuti caranya di bawah ini :

Cara membuat daftar isi atau sitemap buka tutup
1.buka blog anda bisa melalui alamat www.blogger.com
2.lalu login ke akun blog masing-masing
3.klik desain untuk menuju dashboard blogger
4.di dalam menu dashboard blogger pilih Laman , lalu klik buat laman baru , panduan gambarnya bisa di lihat gambar yang di bawah ini

5.selanjutnya silahkan kopi kode yang ada di bawah ini dan pastekan kedalam Laman baru , ingat penulisan mempastekan dalam laman baru tersebut pada posisi format HTML bukan 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://jasa-seting.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:12px;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>

6.kemudian ganti dalam kode yang bertuliskan warna biru yaitu http://jasa-seting.blogspot.com/ ganti dengan alamat url blog/website masing-masing

• jika ingin mengganti background nya (tidak harus di ganti) namun jika mau mengganti silahkan ganti kode warna nya yang saya beri tandu tulisan warna biru ini #5c5a78 dan untuk mengganti kode warna nya silahkan buka Kode warna Html

7.selanjutnya  beri judul laman baru anda (terserah mau di beri judul sitemap atau daftar ini)
8.Lalu publikasikan laman tersebut
9.selesai

dan silahkan tampilkan halaman sitemap atau daftar isi pada menu navigasi supaya pengunjung website anda bisa menelusuri karya artikel anda.

Demikian panduan website Tentang Cara membuat daftar isi atau sitemap buka tutup, jika masih kesulitan silahkan bertanya di kolom komentar di bawah ini.