Widget Daftar Isi Akordion dengan Sortir Bulan Terbit

Tabel Konten
  1. Konfigurasi Widget 

Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion jQuery:

Table of Content for Blogger

Lihat Demo

Pertama-tama, masuklah ke tab Posting/Entri, kemudian pilih Edit Laman. Tambahkan sebuah halaman baru:

halaman statis blogger
Tambahkan sebuah halaman statis


Klik tab Edit HTML pada formulir posting:

instalasi script daftar isi blog
Pilih mode HTML.


Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-skin.css"/>
<div id="table-of-content" class="table-of-content"><span class="loading">Memuat...</span></div>
<div class="credit-link"><a href="//www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html" title="Accordion TOC by Taufik Nurrohman">&#9654; Accordion TOC</a></div>
<script>
var toc_config = {
    url: 'http://nama_blog.blogspot.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 src="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-2.js"></script>

Konfigurasi Widget 

OpsiKeterangan
urlGanti dengan URL blog Anda.
containerIdID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget.
monthNamesNama-nama bulan dalam satu tahun sesuai dengan penamaan bulan di negaramu.
oldestFirstGanti nilainya menjadi true untuk menampilkan arsip dengan tanggal yang lebih tua terlebih dahulu.
maxResultsJumlah maksimal feed yang ingin dimuat. Abaikan!
activePanelUrutan panel yang ingin dibuat terbuka secara default. Dalam hal ini, nilai 1 menunjukkan bahwa panel yang akan aktif saat pertama kali widget dimuat adalah panel yang pertama.
slideSpeedTentukan kecepatan efek animasi panel baik saat bergeser ke atas maupun saat bergeser ke bawah pada variabel ini.
delayLoadingWaktu tunda pemuatan feed.

Kode yang Saya beri garis bawah adalah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, Singkirkan kode tersebut!

31 Komentar

  • Unknown

    wah akhirnya di bagi juga accordionnya

  • Frzhrdynt

    waw gaya baru ya according dengan bulan

  • Piyen

    kok gak muncul ya...
    padahal udah di copy semua dan diganti nama blognya tapi gak muncul

  • Taufik Nurrohman

    @DuniaPiyen: Oke sudah jadi. Kayaknya ada yang salah sama kodenya sedikit. Sekarang insya Allah sudah bisa dipakai :D

  • Unknown

    kok masih gak bisa ya mas

  • Taufik Nurrohman

    @Zh!nTho: Kalau tetep nggak bisa berarti ada di pengaturan Feed Situsnya. Kalau izin feed dinonaktifkan, posting-posting tidak akan bisa terpanggil. Bahkan widget-widget seperti recent post, artikel terkait dan yang lainnya juga tidak akan berfungsi karena feed situs dinonaktifkan (tidak boleh dilihat).

  • Unknown

    bener g bisa orang saya pake widget abu farhan bisa kok, ini kok g bisa ya

  • Taufik Nurrohman

    @Zh!nTho: Tapi Saya sudah coba sampai tiga kali pakai kode di posting ini dan jadi. Kenapa ya? Mungkin ada yang tahu jawabannya?

  • Unknown

    gan ane anak smpn1 sumpiuh kelas 8 ane coba di blog saya ya spenzasumpiuh.co.cc

  • Unknown

    izin bro..., copas & belajar disini.., thx ilmux gan, gk nyangka nyasar di tempat lautan Ilmu heheh...

  • Unknown

    Mantap Sob.., tp gmn klo per tanggalx di ganti dgn Per Label..., tolong yaa :), thx...

  • Miftachudin

    gan reques yang per label...kyk pnya gan gt,,,heheheheh trmakasih gan sangat membantu...

  • Taufik Nurrohman

    @Rohis Facebook, @Dextoshare: Untuk daftar isi berdasarkan label sudah ada di situs http://www.abu-farhan.com

  • Kaki Lebah

    ini Rohis Facebook/kaki lebah

    aduh sob... daftar isi abu farhan sdh dipake dimana2, lagian daftar isi ente lebih keren ko', dr sisi tampilan & yg jauh lbh penting bisa open link new tab..., tlg dishare dunk *smile... thx ya sebelumx

  • Lentera Langit

    izin nyoba yaa :), thx...

  • Anonim

    Tampilan Accordion punya mas lebih bagus dari punya abu farhan, tolong dshare dong yang per label mas

  • Taufik Nurrohman

    @Kaki Lebah@Rohis Facebook, @ARMAN: Sebenarnya Saya juga memakai script yang sama. Cuma untuk kode CSSnya memang sudah Saya modifikasi. Saya menghapus kode ini:

    <link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>

    Dan menggantinya dengan ini:

    <style type="text/css">
    Kode CSS baru...
    </style>

    Kapan-kapan Saya bagikan untuk model daftar isi ini. Untuk yang model ke dua Saya belum yakin karena waktu Saya menemukan itu Saya tidak melihat ada atribusi di dalam scriptnya. Kalau atribusinya sudah jelas mungkin akan Saya bagikan lagi yang versi ke dua.

  • Taufik Nurrohman

    • Anonim

      Mas Tovic, saya mau ijin make sekalian sedikit modifikasi TOC accordion-nya. Rubahannya cuman sedikit kok.

      Cuman menggabungkan TOC perbulan dengan sorting label dengan menambahkan variabel 'label' dan rubahan di bagian json callback -nya.

      rubahannya ada di sini: https://code.google.com/p/id-lib/source/browse/daftarisi/acordion_label.js

      Maaf, ijin modifikasinya telat

      • Taufik Nurrohman

        Widget-widget yang Saya buat dan terbitkan di blog ini sudah lama Saya lepaskan. Silakan edit dan modifikasi kode sumbernya sesuka hati. Jika kamu tidak suka ada nama Saya di situ, kamu boleh membuangnya. Yang penting nama tidak diganti dengan yang lain. Membuang kredit boleh, tapi mengganti kredit tidak boleh (kecuali menambahkan tulisan-tulisan seperti “dimodifikasi oleh…”).

  • Unknown

    Mantap kang :)

  • bimaindramulya

    Cara melebarkan gimana mas? Soalnya saya pakek pada html/javascript di new gadget , bukan pada new pages.
    hehe, maklum newbe. :D

  • Taufik Nurrohman

    @bimaindramulya Hehe... nggak bisa dilebarin mas...

  • Unknown

    Saya Boleh Tanya Enggak? Bagaimana Caranya Mengganti Kode Javascriptnya setelah kita download di Google Code???

  • Taufik Nurrohman

    @Admin Zokufo Unit 111 Ganti <script src="file.js"></script> menjadi <script>file</script>

    <script type="text/javascript">
    // Kode JavaScript di sini...
    </script>
  • Ən Yeni Mahnı Sözləri 2

    mas, kalau kita mau tampilkan langsung di halaman depan gimana caranya?

  • Felix Comp.

    Bemanfaat sekali artikelnya,, kodenya sudah saya pasang di blog saya

  • Unknown

    ijin pasang di blog ku mas.... makasih ya...

  • Anonim

    ini kan warna biru, bisa ngga diubah ke merah ?, biar pas sama template saya...

  • Anonim

    sip lah emang jagonya javascript

Komentar telah ditutup.