Widget Daftar Isi Akordion dengan Sortir Bulan Terbit
Tabel Konten
Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion jQuery:

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

Klik tab Edit HTML pada formulir posting:

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">▶ 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
Opsi | Keterangan |
---|---|
url | Ganti dengan URL blog Anda. |
containerId | ID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget. |
monthNames | Nama-nama bulan dalam satu tahun sesuai dengan penamaan bulan di negaramu. |
oldestFirst | Ganti nilainya menjadi true untuk menampilkan arsip dengan tanggal yang lebih tua terlebih dahulu. |
maxResults | Jumlah maksimal feed yang ingin dimuat. Abaikan! |
activePanel | Urutan 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. |
slideSpeed | Tentukan kecepatan efek animasi panel baik saat bergeser ke atas maupun saat bergeser ke bawah pada variabel ini. |
delayLoading | Waktu 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:
Dan menggantinya dengan ini:
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
@ARMANhttp://hompimpaalaihumgambreng.blogspot.com/2012/02/widget-daftar-isi-akordion-dengan.html
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>
Ən Yeni Mahnı Sözləri 2
mas, kalau kita mau tampilkan langsung di halaman depan gimana caranya?
Taufik Nurrohman
⇒ /2012/03/tip-membuat-halaman-muka-blog.html
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