Senin, 15 Januari 2018

Membuat Halaman Daftar Isi Blog Berdasarkan Bulan dengan Fungsi Accordion

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.

Membuat Daftar isi Versi Accordion Style

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 Cara Membuat Halaman Daftar Isi Berdasarkan Bulan
  • Setelah itu Salin semua kode dibawah ini dan letakkan kedalam editor kamu.
    <div id="toc-kw-container">
      <div id="toc"></div>
    </div>
    <script>
      function fetchBlogPosts() {
        const script = document.createElement('script');
        script.src = 'https://www.kangwira.com/feeds/posts/default?alt=json-in-script&max-results=500&callback=displayToCByMonth';
        document.body.appendChild(script);
      }
      fetchBlogPosts();
    </script>
    <script src="https://ardiduker.github.io/toc/tocByMonth.js"></script>
    <style>
    #toc-kw-container{margin-bottom:30px}
    .toc-kw-acc-bulan{background:linear-gradient(to bottom,#b73120,#E74C3C);color:white;font-weight:bold;cursor:pointer;padding:10px;border:none;text-align:left;outline:none;width:100%;font-size:18px;transition:background-color 0.3s ease;position:relative}
    .toc-kw-acc-bulan.active,.toc-kw-acc-bulan:hover{background-color:#ccc}
    .toc-kw-acc-bulan::after{content:"\25BC";position:absolute;right:20px;font-size:14px;transition:transform 0.3s ease}
    .toc-kw-acc-bulan.active::after{transform:rotate(180deg)}
    .toc-kw-acc-content{padding:0 18px;max-height:0;overflow:hidden;background-color:#f9f9f9;transition:max-height 0.3s ease,padding 0.3s ease}
    .toc-kw-acc-content ul{list-style-type:none;padding:0;margin:0}
    .toc-kw-acc-content li{padding:5px 0;display:flex;justify-content:space-between;align-items:center}
    .toc-kw-acc-content .info{display:flex;width:100%}
    .toc-kw-acc-content .tanggal{font-size:14px;color:gray;text-align:left;flex:0 0 90px;margin-right:10px;padding:5px 0}
    .toc-kw-acc-content .judul{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:22px}
    </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.

1 komentar: