Cara Membuat Daftar Isi Dengan Menu Accordion ~ Trelo-Skato

Wednesday 16 September 2015

Sobat Skato sekalian, pada postingan terdahulu saya pernah membagikan trik bagaimana Cara Membuat Daftar Isi Berdasarkan Label, nah pada kesempatan kali ini saya akan berbagi hal yang sama tetapi daftar isi kali ini dilengkapi dengan Menu Accordion.
Dengan memakai Menu Accordion tentu saja selain menghemat tempat juga dapat membuat tampilan daftar isi anda menjadi lebih menarik, Daftar isi dengan accordion ini saya bagikan dalam 2 versi, yaitu versi Hitam untuk template dengan latar yang gelap, dan versi putih untuk template dengan latar yang terang. Silahkan anda pilih mana yang yang anda anggap lebih menarik.
Trik kali ini saya beri judul Cara Membuat Daftar Isi Dengan Menu Accordion di halaman statis akan secara otomatis dapat menampilkan content dengan label pada postingan anda, dalam kata lainnya anda tidak perlu repot-repot memasukan satu per satu halaman postingan anda.

Cara Membuat Daftar Isi Dengan Menu Accordion Versi Hitam/Gelap

Simak langkah² dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.table-of-content{background-color:#333;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;box-shadow:0 0 17px #000;}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#000;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}

5. Save Template
6. Kemudian tambahkan kode HTML berikut ini pada halaman statis anda dan beri judul sitemap atau daftar isi.

<div class="table-of-content" id="table-of-content">
<span class="loading">Loading...</span></div>
<script>
var toc_config = {
    url: 'http://trelo-skato.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#ff0000;padding:1px 6px 3px 6px;line-height:normal;float:right;">New</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="//cdn.rawgit.com/zmaxs/folder/master/table-of-content.js"></script>
</div>

7. Silahkan ganti Url http://trelo-skato.blogspot.com dengan Url blog anda.
8. Publikasikan.

Selesai dan selamat mencoba.

Daftar Isi Dengan Menu Accordion Versi Gelap

Demo Versi Gelap

Cara Membuat Daftar Isi Dengan Menu Accordion Versi Putih/Terang

.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;box-shadow:0 0 17px 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:#21212B!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:#A0F9F9;text-decoration:none;transition:initial}
.post ol li:before{display:none}

5. Save Template
6. Lalu tambahkan kode HTML berikut ini pada halaman statis anda dan beri judul sitemap atau daftar isi.

<div class="table-of-content" id="table-of-content">
<span class="loading">Loading...</span></div>
<script>
var toc_config = {
    url: 'http://trelo-skato.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#ff0000;padding:1px 6px 3px 6px;line-height:normal;float:right;">New</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="//cdn.rawgit.com/zmaxs/folder/master/table-of-content.js"></script>
</div>

7. Silahkan ganti Url http://trelo-skato.blogspot.com dengan Url blog anda.
8. Publikasikan.

Selesai dan selamat mencoba.