Membuat Halaman Daftar Isi Blog Menurut Bulan Dengan Fungsi Accordion

Di beberapa artikel Kang Wira sebelumnya, aku sudah membahas Cara Membuat Halaman Daftar isi dengan banyak sekali Style. Nah kali ini, aku tidak akan terlalu banyak basa-basi yah teman-teman.

Yaa tapi setidaknya aku tetap harus menjelaskan dulu pengertian dari Accordion itu kepada teman-teman disini.

Di beberapa artikel Kang Wira sebelumnya Membuat Halaman Daftar Isi Blog Berdasarkan Bulan dengan Fungsi Accordion

Di beberapa artikel Kang Wira sebelumnya Membuat Halaman Daftar Isi Blog Berdasarkan Bulan dengan Fungsi Accordion

Style dari daftar isi yang sering kita jumpai di beberapa blog memang mempunyai banyak sekali yah teman-teman. Beberapa diantaranya sudah aku buatkan tutorialnya. Kaprikornus silahkan teman-teman praktekkan satu per satu pada link dibawah ini.

Apa itu Accordion didalam Bahasa CSS?

Beberapa blogger mungkin sudah paham dengan bahasa Accordion Styling ini, tapi bagi yang masih awam sanggup coba perhatihan gambar dibawah ini yah.

Yaap... Accordion itu sebetulnya yaitu sebuah Alat Musik Piano nih teman-teman.

Karena melihat dari bentuk nya itulah para pakar CSS jadinya mencoba memanipulasi Style Accordion kedalam sebuah CSS.

Menarik bukan bila memakai Style ini kedalam halaman Daftar isi?

Baca Juga

Buat teman-teman yang masih belum paham dengan Tampilan Daftar Isi Blog yang menurut Bulan dengan memakai Fungsi Accordion, silahkan teman-teman klik tombol DEMO dibawah ini dulu deh yaa..

Tertarik Memasang Daftar Isi Accordion Style ini?

Nah bila tertarik, silahkan teman-teman ikuti langkah-langkah di bawah ini ya.

Buka Dashboard Blog teman-teman, kemudian pilih sajian Halaman.
Jika teman-teman sudah pernah menciptakan Halaman Daftar Isi sebelumnya, silahakn Abaikan Langkah ketiga ini.
Buat Halaman Baru dengan Judul Daftar Isi
Didalam Editor itu silahkan pilih Tab HTML terlebih dulu yah, jangan pilih Compose

Setelah itu Salin semua instruksi dibawah ini dan letakkan kedalam editor kamu.

<div id="table-of-content" class="table-of-content"> <span class="loading">Memuat...</span></div> <script> var toc_config = {     url: 'https://www.kangwira.com',     containerId: 'table-of-content',     monthNames: [         'Januari',         'Februari',         'Maret',         'April',         'Mei',         'Juni',         'Juli',         'Agustus',         'September',         'Oktober',         'November',         'Desember'     ],     oldestFirst: false,     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 async="" src="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-2.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <span class="getwidget"><a onclick="window.location.href='https://rumahsolved.blogspot.com/search?q=membuat-halaman-khusus-untuk-daftar-isi'">Dapatkan Widget ini</a></span> <style type='text/css'> /* Daftar Isi */ .table-of-content {margin-bottom:5px;overflow:hidden;} .table-of-content .toc-header {margin:0;padding:10px 15px;overflow:hidden;cursor:pointer;font:inherit;font-size:13px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);background-color:#E74C3C;margin-bottom:1px} .table-of-content .toc-header.active, .table-of-content .toc-header:hover {color:#fff;background-color:#c73727;} .table-of-content .loading {display:block;padding:10px 15px;text-decoration:blink;} .table-of-content ol {transform: rotate(180deg);margin:0;padding:5px 5px 5px 15px;list-style:none;} .getwidget {float: right;font-size: 80%;font-weight: 600;cursor: pointer;font-style: italic;color: red;} .post ol li {transform: rotate(-180deg);position: relative;display: block;padding: 0;margin: .5em .5em .5em 2em;background: transparent;text-decoration: none;{ .table-of-content li {line-height:normal; margin:0; padding:5px 5px 5px 15px; text-align:left; overflow:hidden;border-bottom:1px solid #2f2f2f} .table-of-content li:first-child {border-top:none} .table-of-content li:last-child {border-bottom:none} .table-of-content a {color:#5687f8;text-decoration:none;} .table-of-content a:hover {text-decoration:underline} .table-of-content a:visited {color:#5687b8} .credit-link {text-align:right;margin-right:2px;} </style>

Simpan Template, dan Lihat Hasilnya Terlebih Dulu
Jika Fungsi Accordionnya tidak berjalan dengan baik, silahkan teman-teman tambahkan link Jquery ini sempurna dibawah instruksi yang tadi

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Simpan kembali Halaman Daftar isinya, kemudian lihat hasilnya lagi.

PERHATIAN

Perhatikan pada goresan pena yang ditandai pada Kolom JavaScript diatas. Silahkan Ganti dengan URL Blog kamu. Lalu untuk mengganti warna, silahkan kau sesuaikan CSS yang ada diatas.