Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

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="//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/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: ' &ndash; <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="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-1.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda, lalu klik tombol Publikasikan.

Konfigurasi Widget

Opsi Keterangan
url Ganti nilainya dengan URL blog Anda.
containerId ID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget.
showNew Opsi 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.
newText Markup HTML bebas untuk label Baru!
sortAlphabetically Opsi ini mencakup judul panel dan daftar judul posting di bawahnya. Ubah nilainya menjadi true untuk menyortir konten berdasarkan abjad.
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!

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 113 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!