🔔 Aktifkan notifikasi disini Google News

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?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

15 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. min req tutorial buat halaman For
    um Diskusi seperti admin.
  2. Tutorialnya bisa di cek di sini ya
    https://www.saifullah.id/2021/10/cara-membuat-forum-diskusi-median-ui-15.html
  3. Di 1.6 udah beda lagi ya mas codenya?
    1. Beda, soalnya di versi 1.6 icon titiknya tidak ada. Jadi harus di tambah dulu iconnya
    2. Tutorial untuk Median 1.6 sudah saya upload ya.
  4. kekurangan nya kan 1. posisi nya kurang pas, kalau mau atur ke atas atau ke bawah nya gmna mas?
  5. Toc saya yg nomor 1 tertutup separuh oleh header toc (tulisan contents). Mau edit setting cari margin atau padding tdk ketemu bgmn ya solusinya? Terimakasih
    1. Bisa kirim link blog dan screenshot bagian yang bermasalah?
  6. Request memasang progressive web app (pwa)
  7. Cara Membuat Progressive Web App (PWA) Untuk Blogger Klik Disini
  8. min, buatin tutorial buat toc di median ui 1.4 dong
  9. kak cara ngatur posisinya supaya bisa agak kebawah biar posisinya pas gimana ya?
    1. https://www.tugasiswa.com/2023/07/cara-mengubah-posisi-toc-median-ui-v15.html
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.