Cara Memasang Animasi Kedip Pada Table Of Content Median UI 1.6

Saifulah.id - Icon Titik atau Icon Notif yang ada di Table of Content (ToC) Median UI 1.5 sudah di hapus pada Median UI 1.6. Padahal tampilannya cukup keren untuk memperindah tampilan blog. Selain itu ada fungsi khusus yang jarang diketahui oleh para Blogger.

Apa Fungsi Tabel of Content (ToC)?

Tabel of Content adalah fitur yang berfungsi sebagai daftar isi suatu artikel yang memuat  judul dan subjudul yang jika kita tekan bisa mempermudah kita melompati ke judul yang ingin kita baca.

Apa Fungsi Icon Notif Pada Table of Content (ToC)?

Icon Notif yang berkedip pada ToC ini bisa berfungsi untuk memancing perhatian pengunjung agar mereka sadar bahwa ada tombol yang bisa dibuka di sana. Sehingga peluang ToC akan diklik akan jauh lebih besar.

Bagaimana Cara Memasang Icon Notif Median UI 1.6?

1. Masuk ke Edit HTML Template
2. Ganti kode CSS bawaan Median UI 1.6
3. Tambahkan kode animasi blink
4. Ubah kode HTML ToC.
5. Ubah kode Darkmode ToC. Untuk lebih lengkapnya, simak tutorial berikut ini:

Cara Memasang Animasi Kedip Pada Table Of Content Median UI 1.6

Sebelum mengedit template, jangan lupa membaca Bismillah dan Backup template terlebih dahulu agar jika terjadi kesalahan pengeditan bisa dikembalikan ke awal dengan mudah.

1. Masuk ke Edit HTML Template

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

2. Ganti kode CSS bawaan Median UI 1.6

1. Cari kode /* Widget ToC */
2. Hapus kode dari /* Widget ToC */ sampai /* Widget PopularPosts */
3. Lalu ganti dengan kode berikut
   

   /* Widget ToC by Saifullah.id */ .tocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:var(--trans-1);z-index:5} .tocLi{width:100%;height:100%;position:relative;background:var(--contentB);box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px} .tocLs{position:relative;top:20px;background:inherit} .tocIn{padding:60px 0 0;overflow-y:scroll;overflow-x:hidden;width:100%;height:calc(100vh - var(--headerH))} .tableOfIcon{position:absolute;left:-45px;top:105px;transition:var(--trans-1)} .tableOfIcon span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:20px 0 0 20px;background:var(--contentB);transition:inherit;z-index:1;box-shadow:0 5px 20px 0 rgba(0,0,0,.1)} .tocL svg.rad{width:20px;height:20px;position:absolute;right:-2px;top:-19px;fill:var(--contentB);transform:rotate(92deg);transition:inherit} .tocL svg.rad.in{top:auto;bottom:-19px;transform:rotate(-2deg)} .tableOfIcon span svg{opacity:.8} .tocT{display:flex;width:100%} .tocL ol{margin:0;padding-inline-start:35px;line-height:1.6em} .tocL li ol{margin:5px 0 10px;list-style:lower-roman} .tocL a{color:inherit;opacity:.8} .tocL a:hover{text-decoration:underline} .tocI:checked ~ .tocL{right:0;z-index:10} .tocI:checked ~ .tocL .tableOfIcon{opacity:0;visibility:hidden} .tocI:checked ~ .tocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible} /* Widget PopularPosts */

    

3. Tambahkan kode animasi blink

1. Cari kode </b:skin>
2. Lalu letakkan kode berikut di </b:skin>
   

   /* Indicator ToC by Saifullah.id */ .tableOfIcon: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}}

    

4. Ubah kode HTML TOC

1. Cari kode <label aria-label='Close' class='tocH fixH' for='forTocJs'>
2. Hapus kode <div class='tocC'> sampai </label>
3. Lalu ganti dengan kode berikut
   

   <div class='tableOfIcon'>

   <svg class='rad' viewBox='0 0 160 160'><path d='M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z' transform='translate(0 10)'/></svg>

   <span>

   <svg class='line' viewBox='0 0 24 24'><g transform='translate(3.610000, 2.750100)'><line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'/><line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'/><line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'/><path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'/></g></svg>

   </span>

   <svg class='rad in' viewBox='0 0 160 160'><path d='M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z' transform='translate(0 10)'/></svg>

   </div>

   <div class='tocT fixT' data-text='Contents'>

   <span class='c cl' data-texxt='Close'/>

   </div>

   </label>

5. Ubah kode Darkmode

1. Cari kode .drK .tocLi{background:var(--darkB)} .drK .tocC span, .drK .pShc
2. Hapus dan ganti dengan kode ini
   

   .drK .tocLi{background:var(--darkB)} .drK .tableOfIcon span, .drK .pShc

3. Simpan Tema

LIVE DEMO

Lihat contoh tampilannya dengan menekan tombol di atas, lalu buka salah satu postingan dan lihat hasilnya. Semoga bermanfaat.