Cara Membuat TOC Berkedip Pada Table Of Content Median UI 1.5

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
   
   
   

   
   
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.

O,ya tutorial Cara Membuat TOC Berkedip dibuat untuk menjawab request dari Andi Wahyudin 4 hari lalu. Semoga bermanfaat ya.