Cara Membuat Indikator Table of Content Berkedip di Blogger

arsipbiru_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

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 /*]]>*/</b:skin> dan klik Simpan Tema.

.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

Untuk dapat memasang indikator ToC berkedip pada template Median UI versi sebelumnya, dapat memodifikasi kode CSS di atas dengan menyesuaikan class dan variabel ToC yang telah terpasang. Sementara untuk template selain Median UI, tidak perlu khawatir. Karena di artikel sebelumnya, saya sudah membahas bagaimana Cara Membuat Table of Content Mirip Median UI di Blogger.

Apabila Anda telah memasang ToC mirip Median UI di blog, Anda cukup menambahkan kode di atas dan memodifikasinya dengan menyesuaikan class dan variabelnya. Untuk tampilannya, Anda dapat melihat indikator ToC di samping kanan artikel ini.

Demikianlah tutorial singkat bagaimana cara membuat indikator table of content berkedip di Blogger. Jika ada saran dan masukan, silahkan berkomentar di bawah ini. Terima kasih telah berkunjung di blog Arsipbiru dan semoga bermanfaat.

Sumber:

Mau donasi lewat mana?

Trakteer Saweria
N/A
Traktir creator minum kopi dengan cara memberikan sedikit donasi.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details