Widget Daftar Isi Akordion dengan Sortir Label

Widget Daftar Isi Akordion dengan Sortir Label
Kali ini Saya akan memeprkenalkan widget daftar isi akordion berdasarkan label setelah sebelumnya Saya pernah menuliskan tentang widget daftar isi akordion berdasarkan bulan terbit:
Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:


Menambahkan halaman statis baru.

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:


Pilih mode HTML.

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/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="http://www.dte.web.id/2012/02/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',
    showNew: 10,
    newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    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="http://dte-project.googlecode.com/svn/trunk/accordion-toc-1.js"></script>
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda, lalu klik tombol Publikasikan.

Konfigurasi Widget

OpsiKeterangan
urlGanti nilainya dengan URL blog Anda.
containerIdID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget.
showNewOpsi untuk menampilkan teks Baru! di samping judul-judul posting terbaru atau tidak. Angka menunjukkan jumlah maksimal posting terbaru/terakhir diterbitkan yang ingin diberi label ini.
newTextMarkup HTML bebas untuk label Baru!
sortAlphabeticallyOpsi ini mencakup judul panel dan daftar judul posting di bawahnya. Ubah nilainya menjaditrue untuk menyortir konten berdasarkan abjad.
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!
Previous
Next Post »

2 komentar

Write komentar
ok
ADMIN BLOG
April 26, 2015 at 9:53 PM delete

mantep gan :D nice info :D

Reply
avatar
aulia dian p
ADMIN BLOG
April 26, 2015 at 9:58 PM delete

mantap gan... bisa dicoba ini. thankyou infonya yaaaaa

http://jaringanhosting.com

Reply
avatar