Cara Membuat TOC Berkedip Pada Table Of Content Median UI 1.5

Cara Membuat TOC Berkedip Pada Table Of Content Median UI
Saifulah.id
 - Table Of Content (TOC) pada template Median UI v1.5 terbilang cukup unik karena ditempatkan di pinggir halaman. Fitur TOC ini di hiasi dengan icon kertas yang di sertai titik biru di atasnya.


Meskipun tampilannya sudah bagus, tapi akan lebih menarik lagi jika titik biru itu kita tambahkan efek animasi berkedip (Blink).

Cara Membuat Table Of Content Berkedip

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Menghapus Icon dan Tombol Header (Profile, Translate, Dark Mode) Median UI


  5. Cari kode .tableOfIcon:before
    .tableOfIcon:before{content:'';display:block; width:12px;height:12px; background-color:var(--link-color);border:2px solid var(--content-bg); border-radius:50%; position:absolute;top:8px;left:15px}
  6. Tambahkan kode berikut di dalam kurung
    animation: indicator 1s ease infinite; -webkit-animation: indicator 1s ease infinite;
  7. Hasilnya jadi seperti ini
    .tableOfIcon:before{animation: indicator 1s ease infinite; -webkit-animation: indicator 1s ease infinite;content:'';display:block; width:12px;height:12px; background-color:var(--link-color);border:2px solid var(--content-bg); border-radius:50%; position:absolute;top:8px;left:15px}
  8. Lalu cari kode ]]></b:skin>
  9. Letakkan kode CSS berikut tepat di atasnya
    @-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
  10. Simpan Tema
  11. Selesai


Kelebihan Table Of Content Median UI

TOC di Median UI 1.5 memiliki kelebihan yang tidak dimiliki oleh TOC di template lain, diantaranya:
  1. Mudah di akses
    Biasanya di template lain meletakkan fitur Table Of Content itu di awal artikel, paragraf pertama. Nah, setelah kita tekan salah satu judulnya, pasti halaman akan scroll sendiri ke bawah menuju subjudul.

    Lalu saat ingin mengakses TOC lagi, kita harus scroll halaman ke atas lagi kan? Hal ini sangat tidak efisien dan lambat.

    Sementara di Median UI, kita dapat mengakses fitur TOC dimanapun kita mau, baik itu di awal artikel, di tengah, maupun di akhir artikel.

  2. Simpel & Rapi
    TOC yang diletakkan bersama artikel terkadang membuat postingan terasa padat dan sesak. Sedangkan TOC Median UI sama sekali tidak mengganggu karena diletakkan terpisah dari postingan.

Kekurangan Tabel Of Content Median UI

Walaupun memiliki kelebihan dibanding TOC biasa, tapi tetap saja ada kelemahan yang harus disempurnakan, yaitu:
  1. Posisinya kurang pas
    Posisi icon sejajar dengan judul postingan, hal ini berdampak menutupi judul sebagian. Makanya pada blog Saifullah.id, icon TOC ini saya pindah agak ke atas supaya sejajar dengan Breadcrumb karena terdapat celah kosong.

  2. Indent (spasi) terlalu lebar
    Saat posting artikel dengan sedikit subjudul mungkin tidak begitu kelihatan. Tapi kalau kalian posting pakai 3 tingkat subjudul, pasti kalian akan sadar bahwa jarak spasi nomor TOC Median UI terlalu boros dan kurang rapi. Makanya di bagian ini saya perbaiki sehingga hasilnya lebih teratur dan tidak terlalu menjorok ke kanan.


  3. Bahasa
    Orang Indonesia banyak yang tidak paham Bahasa Inggris. Jadi kata "Table Of Contents" saya ubah jadi "Daftar Isi" agar mudah dimengerti oleh anak negeri.

    Lagipula saya sudah pasang widget Google Translate di atas Header, jadi tidak perlu khawatir jika ada orang asing yang berkunjung.
Cara Membuat TOC Berkedip Pada Table Of Content Median UI
O,ya tutorial Cara Membuat TOC Berkedip dibuat untuk menjawab request dari Andi Wahyudin 4 hari lalu. Semoga bermanfaat ya.

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.