Cara Membuat Indikator Table of Content Berkedip di Blogger

Arsipbiru.com - Selamat datang kembali di Arsipbiru. Maaf, kalo blog ini jarang update karena memang banyak hal yang harus saya kerjakan di dunia nyata. Meskipun begitu, saya akan tetap berusaha semaksimal mungkin untuk menyajikan artikel terbaru bagi para pembaca.

Pada kesempatan kali ini, saya hanya akan membagikan tutorial singkat mengenai bagaimana cara membuat indikator table of content (ToC) di Blogger. Sebenarnya untuk membuat indikator ToC cukup mudah. Terlebih lagi jika Anda menggunakan Template Median UI buatan Muhammad Maki (JagoDesain), baik versi 1.5 maupun versi 1.6. Namun, tidak menutup kemungkinan bagi template Median UI versi di bawahnya dan selain template Median UI. Asalkan di blog Anda telah terpasang ToC mirip Median UI. Jika belum, Anda bisa membaca artikel Cara Membuat Table of Content di Blogger.

Tutorial kali ini, saya dapatkan dari blog YazidTips setelah melihat tutorial dari blog WendyCode. Nah, langsung saja simak langkah-langkahnya berikut ini.

Cara Memasang Indikator Table of Content Berkedip di Blogger

Memasang Indikator ToC Berkedip pada Template Median UI Versi 1.6

1. Pertama, silahkan masuk ke akun Blogger masing-masing.

2. Selanjutnya, pilih Tema > Edit HTML.

3. Tambahkan kode CSS berikut ini di atas atau sebelum kode /*]]>*/</style> dan klik Simpan Tema.

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

Memasang Indikator ToC Berkedip pada Template Median UI Versi 1.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;

}

Memasang Indikator ToC Berkedip pada Template Median UI Versi Sebelumnya dan Selain Template Median UI