Membuat Halaman Daftar Isi Blog Berdasarkan Bulan dengan Fungsi Accordion

Chat on Whatsapp

coba baca yang ini

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

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


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

Baca juga:

1. Daftar Isi Menurut Kategori
2. Daftar Isi Lengkap Dengan Kolom Search
3. Daftar Isi Sesuai Kategori Pilihan

Naah kali ini saya akan bahas tentang Halaman Daftar isi Berdasarkan Bulan dengan Fungsi Accordion.

Apa itu Accordion didalam Bahasa CSS?

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

Yaap... Accordion itu sebenarnya adalah sebuah Alat Musik Piano nih teman-teman.

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

Menarik bukan jika menggunakan Style ini kedalam halaman Daftar isi?

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

Tertarik Memasang Daftar Isi Accordion Style ini?

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

• Buka Dashboard Blog teman-teman, lalu pilih menu Halaman.
• Jika teman-teman sudah pernah membuat 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 kode 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://www.kangwira.com/2018/01/halaman-daftar-isi-blog-accordion-berdasarkan-bulan.html'">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 tepat dibawah kode yang tadi
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
• Simpan kembali Halaman Daftar isinya, lalu lihat hasilnya lagi.

PERHATIAN

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

Baca juga: Sesuaikan Warnanya disini

Selesai..

Kalau ada yang mau ditanyakan, silahkan tanyakan melalui kolom komentar dibawah. Atau kalau mau lebih mesra, silahkan chat langsung ke Whatsapp saya.

Agar lebih mudah, gunakan tombol Whatsapp yang dapat kamu jumpai dihalaman atas tepatnya dibawah judul artikel ini.

Jangan lupa Berlangganan Gratis di blog ini yah teman-teman supaya tidak ketinggalan info menarik lainnya seputar Modifikasi dan Optimasi Template Blog.