Mecha versi 2.6.1 sudah dirilis!

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

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…”).

bimaindramulya

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

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>

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.