Cara Memasang Indikator Table of Content (ToC) di Template Median UI Semua Versi

Halo semua, di halaman ini saya akan membagikan cara memasang indikator ToC (Table of Content) di blog dengan template Median UI. Indikator ini biasanya muncul sebagai titik atau animasi kecil di samping daftar isi yang sedang aktif.

Sebagai contoh, kamu bisa melihat indikator ini muncul di sebelah kanan postingan saat kamu menggulir artikel. Jika kamu tertarik, silakan simak panduan ini sampai selesai ya.

Kenapa Perlu Menambahkan Indikator ToC?

Meskipun membuat table of content itu cukup mudah, menambahkan indikator visual bisa membuat navigasi artikel jadi lebih menarik dan interaktif. Ini sangat berguna untuk meningkatkan pengalaman pengguna (user experience) dan membuat blog kamu terlihat lebih profesional.

Banyak blogger pemula yang belum tahu cara ini. Jadi, meskipun tutorial serupa sudah banyak, saya tetap ingin membagikannya agar kita bisa sama-sama bersaing di hasil pencarian Google 😄

Langkah Memasang Indikator ToC di Template Median Ui

1. Masuk ke Dashboard Blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Cari tag </style> atau ]]</b:skin>
4. Tempelkan kode CSS sesuai dengan versi Median UI yang kamu gunakan.

Indikator ToC Median Ui V1.7

.tocB span:before{content:'';display:block;width:12px;height:12px;background-color:var(--lightLink);border:2px solid var(--themeBg);border-radius:50%;position:absolute;top:5px;left:12px;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1;}
@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}

Indikator ToC Median Ui V1.6

.tocC:before{content:'';display:block;width:12px;height:12px;background-color:var(--linkC);border:2px solid var(--bodyB);border-radius:50%;position:absolute;top:5px;left:12px;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1}
@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

Indikator ToC Median Ui V1.5

.Blog .post-tocContainer .show:before{content:unset;display:block;position:absolute;width:10px;left:13px;border-radius:50px;top:7px;height:10px;background:#555;webkit-animation:indicator 1s ease infinite;-moz-animation:indicator 1s ease infinite;animation:indicator 1s ease infinite}
@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.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; animation: indicator 1s ease infinite; -webkit-animation: indicator 1s ease infinite;}

Penutup

Untuk versi template Median UI lainnya, kamu hanya perlu menyesuaikan selector class CSS sesuai struktur versi yang digunakan. Kode di atas bisa dijadikan referensi atau dimodifikasi sesuai kebutuhan blog kamu.

Sekian panduan kali ini. Kalau kamu punya pertanyaan, jangan ragu tulis di kolom komentar ya. Dan jangan lupa baca artikel lainnya untuk mendapatkan informasi dan tips seputar blogging, SEO, dan kustomisasi template Median UI.