Cara Membuat Daftar Isi Dengan Menu Accordion

TheCode-X

Javascript, Tips and Tricks, Tutorial

Wednesday, 16 September 2015

Belum ada komentar

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

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:#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.

Daftar Isi Dengan Menu Accordion  Versi Terang

Demo Versi Putih 

Semoga bermanfaat dan tetap kunjungi blog ini untuk Update postingan terbaru atau anda bisa subscribevia email, terimakasih.