Widget Daftar Isi Akordion dengan Sortir Bulan Terbit
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 Comments:
wah akhirnya di bagi juga accordionnya
waw gaya baru ya according dengan bulan
kok gak muncul ya...
padahal udah di copy semua dan diganti nama blognya tapi gak muncul
@DuniaPiyen: Oke sudah jadi. Kayaknya ada yang salah sama kodenya sedikit. Sekarang insya Allah sudah bisa dipakai :D
kok masih gak bisa ya mas
@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).
bener g bisa orang saya pake widget abu farhan bisa kok, ini kok g bisa ya
@Zh!nTho: Tapi Saya sudah coba sampai tiga kali pakai kode di posting ini dan jadi. Kenapa ya? Mungkin ada yang tahu jawabannya?
gan ane anak smpn1 sumpiuh kelas 8 ane coba di blog saya ya spenzasumpiuh.co.cc
izin bro..., copas & belajar disini.., thx ilmux gan, gk nyangka nyasar di tempat lautan Ilmu heheh...
Mantap Sob.., tp gmn klo per tanggalx di ganti dgn Per Label..., tolong yaa :), thx...
gan reques yang per label...kyk pnya gan gt,,,heheheheh trmakasih gan sangat membantu...
@Rohis Facebook, @Dextoshare: Untuk daftar isi berdasarkan label sudah ada di situs http://www.abu-farhan.com
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
izin nyoba yaa :), thx...
Tampilan Accordion punya mas lebih bagus dari punya abu farhan, tolong dshare dong yang per label mas
@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.
@ARMAN http://hompimpaalaihumgambreng.blogspot.com/2012/02/widget-daftar-isi-akordion-dengan.html
Mantap kang :)
Cara melebarkan gimana mas? Soalnya saya pakek pada html/javascript di new gadget , bukan pada new pages.
hehe, maklum newbe. :D
@bimaindramulya Hehe... nggak bisa dilebarin mas...
Saya Boleh Tanya Enggak? Bagaimana Caranya Mengganti Kode Javascriptnya setelah kita download di Google Code???
@Admin Zokufo Unit 111 Ganti <script src="file.js"></script> menjadi <script>file</script>
<script type="text/javascript">
// Kode JavaScript di sini...
</script>
mas, kalau kita mau tampilkan langsung di halaman depan gimana caranya?
⇒ /2012/03/tip-membuat-halaman-muka-blog.html
Bemanfaat sekali artikelnya,, kodenya sudah saya pasang di blog saya
ijin pasang di blog ku mas.... makasih ya...
ini kan warna biru, bisa ngga diubah ke merah ?, biar pas sama template saya...
sip lah emang jagonya javascript
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
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…”).
Post a Comment
<< Home