Cara Pasang Animasi Blink TOC Median UI 1.5

Berikut pada tutorial kali ini saya akan memberikan sebuah tutorial Memodifikasi tampilan TOC (table off content) pada template Median UI 1.5.

Bagi kamu yang menggunakan template Median UI 15 pastinya dari fitur template tersebut di lengkapi dengan fitur Table Of Content yang berada di atas samping sebelah kanan.

Jika kita hiasi dengan cara berkedip tampilannya akan lebih tambah keren, kita cuma hanya memberi effect animasi blink atau berkedip pada tampilan TOC table of content tersebut.

Cara memasangnya pun sangat mudah, buat kamu yang ingin mencobanya bisa ikuti tutorialnya dibawah.

Cara Pasang Animasi Blink Pada TOC Median UI 1.5

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

4. Selanjutnya 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}

5. Silahkan Tambahkan kode berikut di dalam kurung

animation: indicator 1s ease infinite; -webkit-animation: indicator 1s ease infinite;

6. Nanti hasilnya kurang lebih seperti dibawah.

.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}

7. Lanjut silahkan cari kode ]]></b:skin>

8. Lalu 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}}

9. Terakhir klik Simpan

Untuk melihat tampilannya silahkan kamu refresh browser dan buka blog pilih salah satu postingan, jika bagian TOC berkedip berarti kamu telah berhasil memasang Animasi Indikator TOC Median UI.

Kelebihan Table Of Content Median UI.

TOC di Median UI 1.5 memiliki kelebihan yang tidak dimiliki oleh TOC di template lain, yaitu 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 dan Rapih
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.

1. Posisi kurang pas.
Posisi icon sejajar dengan judul postingan, hal ini berdampak menutupi judul sebagian. Makanya pada blog https://ongkynamina.blogspot.com, icon TOC ini di 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 sedikit lebih di perbaiki sehingga hasilnya lebih teratur dan tidak terlalu menjorok ke kanan.

Terimakasih bagi kamu yang sudah singgah di Blog ini, apabila ada yang tidak dimengerti tentang uraian dalam artikel ini, silahkan berikan masukannya pada kolom komentar dibawah