Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Widget Daftar Isi Akordion untuk Blogger

Pembaharuan 1 September 2018: Berbagai perubahan dan fitur baru telah ditambahkan untuk memenuhi tuntutan para pengguna. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel.

Widget Daftar Isi Akordion untuk Blogger

Kali ini Saya akan memperkenalkan widget daftar isi akordion berdasarkan label setelah sebelumnya Saya pernah menuliskan tentang widget daftar isi akordion berdasarkan bulan terbit:

Lihat Demo


Integrasi Widget ke Blogger

Memasang widget ini memerlukan kemampuan dasar dalam membaca dan menulis kode HTML. Jika Anda termasuk kategori penulis blog yang masih bergantung pada perangkat tulis WYSIWYG atau pada mode Compose dalam editor Blogger, mungkin Anda perlu mempelajari dasar-dasar penulisan kode HTML terlebih dahulu sebelum menerapkan widget ini. Sebuah blog dari Niagahoster menyediakan tutorial dasar tentang pemahaman kode HTML untuk pemula dimulai dari persiapan alat hingga pengenalan berbagai tag dan atribut HTML dasar, terutama yang sangat umum dijumpai pada konten sebuah artikel seperti format judul, efek huruf tebal dan miring, serta penjelasan tentang cara menyisipkan tautan dan gambar. Anda bisa membacanya di Belajar HTML.

Pertama-tama klik menu Laman pada bilah sisi. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Blogger Post Editor
Menambahkan halaman statis baru

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

Blogger Post Editor
Pilih mode HTML

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link href="//dte-project.github.io/blogger/stacked-toc/248ab0.min.css" rel="stylesheet">
<script src="//dte-project.github.io/blogger/stacked-toc.min.js?url=http://dte-feed.blogspot.com&amp;active=0"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Menghilangkan parameter url akan membuat widget ini secara otomatis menentukan URL halaman muka berdasarkan URL pada bilah alamat. Berkas 248ab0.min.css adalah berkas tema. Anda bisa menghapus berkas tersebut jika Anda ingin membuat tema sendiri:

<style>
/* KODE TEMA KUSTOM */
</style>
<script src="//dte-project.github.io/blogger/stacked-toc.min.js?active=0"></script>

Pengaturan

Opsi Keterangan
url Ganti nilainya dengan alamat blog Anda atau alamat blog orang lain yang ingin Anda tampilkan kontennya.
id Alternatif untuk menentukan sumber data selain dengan url. Ganti nilainya dengan ID blog Anda atau ID blog orang lain yang ingin Anda tampilkan kontennya. ID harus dituliskan sebagai string. Menambahkan parameter id akan mengabaikan nilai parameter url. Contoh: id="4890949828965961610"
direction Direksi teks pada blog Anda. Nilainya bisa berupa "ltr" atau "rtl".
container Selektor CSS untuk menentukan di mana widget akan ditampilkan. Menghilangkan parameter ini akan membuat widget secara otomatis menempatkan widget tepat sebelum tag <script> yang Anda sisipkan.
active Digunakan untuk menentukan urutan panel yang akan aktif saat pertama kali halaman dimuat. Nilai 0 akan membuat panel di urutan pertama menjadi aktif. Nilai "Musim Gugur" akan membuat panel dengan label Musim Gugur menjadi aktif.
toggle Digunakan untuk menentukan sifat panel ketika diklik. Menentukan nilai true akan membuat panel yang aktif menutup dirinya sendiri ketika Anda mengeklik panel tersebut, atau ketika Anda mengeklik panel yang lainnya. Menentukan nilai false akan membuat panel yang aktif menutup hanya ketika Anda mengeklik panel yang lainnya. Menentukan nilai -1 akan membuat panel yang aktif menutup dirinya sendiri hanya ketika Anda mengeklik panel tersebut; panel-panel yang lain tidak akan terpengaruh.
hide Tentukan nama-nama label yang tidak ingin Anda tampilkan.
date Ganti nilainya menjadi false untuk menyembunyikan waktu penerbitan artikel. Selain itu akan dianggap sebagai format waktu penerbitan: %Y% untuk menampilkan angka tahun, %M% untuk menampilkan angka bulan, %D% untuk menampilkan angka hari, %h% untuk menampilkan angka jam format 12, %m% untuk menampilkan angka menit, %s% untuk menampilkan angka detik, %M~% untuk menampilkan nama bulan, %D~% untuk menampilkan nama hari, %h~% untuk menampilkan angka jam format 24, dan %?% untuk menampilkan keterangan waktu format 12; nilainya bisa berupa "AM" atau "PM" tergantung dari data text[midday].
excerpt Ganti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk menentukan maksimal karakter yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter .
image Ganti nilainya menjadi true untuk menampilkan gambar artikel. Atau gunakan angka untuk menentukan ukuran lebar dan tinggi gambar. Anda juga bisa menggunakan parameter standar gambar Google untuk memanipulasi ukuran, seperti "s100", "s100-c", dan "w100-h50".
target Jika bernilai "_blank", semua tautan akan terbuka di tab/jendela baru saat diklik.
load Digunakan untuk menentukan waktu penundaan pemuatan JSON. Tentukan sebagai angka untuk waktu penundaan memuat dalam satuan milidetik atau true agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sort false untuk menyortir artikel secara normal berdasarkan bulan terbit, 1 untuk menyortir artikel dari A ke Z, -1 untuk menyortir artikel dari Z ke A.
recent false untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak artikel terbaru yang ingin ditandai dengan label New!.
text[recent] Markup HTML bebas untuk membuat label New! pada artikel-artikel terbaru.
text[months] Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem kalender di negara tempat Anda tinggal.
text[days] Digunakan untuk menentukan nama-nama hari sesuai dengan sistem kalender di negara tempat Anda tinggal.

Contoh

Menampilkan gambar dan ringkasan:

<script src="stacked-toc.min.js?excerpt=200&amp;image=80"></script>

Membuat panel ke tiga aktif saat pertama kali halaman dimuat:

<script src="stacked-toc.min.js?active=2"></script>

Membuat panel dengan label Iklan aktif saat pertama kali halaman dimuat:

<script src="stacked-toc.min.js?active=Iklan"></script>

Menyembunyikan panel dengan label Iklan dan Tautan:

<script src="stacked-toc.min.js?hide=["Iklan","Tautan"]"></script>
<script src="stacked-toc.min.js?hide[0]=Iklan&amp;hide[1]=Tautan"></script>

Memodifikasi format waktu penerbitan (karakter % harus diubah menjadi %25):

<script src="stacked-toc.min.js?date=%25Y%25-%25M%25-%25D%25%20%25h%25%3A%25m%25%3A%25s%25"></script>

Menentukan kontainer spesifik (karakter # harus diubah menjadi %23):

<script src="stacked-toc.min.js?container=%23content"></script>

Kemudian, pada suatu tempat, Anda buat elemen HTML seperti ini:

<div id="content"></div>

Gunakan alat ini untuk mempermudah dalam mengubah karakter mentah menjadi karakter yang aman untuk URL.


Animasi

Fitur animasi pada widget ini sudah tidak lagi dibuat menggunakan API jQuery, melainkan hanya memanfaatkan fitur CSS3 transisi. Anda bisa memodifikasi kecepatan dan percepatan animasi dengan cara seperti ini:

<style>
.stacked-toc-panel {
  /* `ease-in-out-quart` */
  -webkit-transition-timing-function:cubic-bezier(.77,0,.18,1);
  -moz-transition-timing-function:cubic-bezier(.77,0,.18,1);
  transition-timing-function:cubic-bezier(.77,0,.18,1);
  /* ½ detik */
  -webkit-transition-duration:.5s;
  -moz-transition-duration:.5s;
  transition-duration:.5s;
}
</style>
<script src="stacked-toc.min.js?active=0"></script>

Contoh

  

Berlangganan

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

 119 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>
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 :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* 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?
Ke atas!