🔔 Aktifkan notifikasi disini Google News

Cara Memasang Animasi Kedip Pada Table Of Content Median UI 1.6

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
    Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

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

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

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan rating Bintang 5. Tekan tombol merah disebelah kanan 👉
Selanjutnya kalian mau dibuatkan artikel tentang apalagi? Tuliskan pada kolom komentar di bawah ini

5 komentar

Berkomunikasi adalah salah satu cara untuk saling memahami, yuk tinggalkan komentar :)
  1. bang request cara rubah widget pular post donk, saya cari di gugel blom ada buat median ui
    1. Cek di sini https://www.saifullah.id/search?q=popular+post
  2. Halo Kak, mohon bantuan saya punya theme median ui untuk versi wordpress. kesulitan saya membuat menu drop down seperti yang kak share. Apakah kode htmlnya juga sama? Mohon bantuannya kak.

    Website saya:
    https://sil.web.id
    1. Saya belum punya template Median UI versi Wordpress, jadi saya tidak tahu apakah kode HTML nya sama atau beda.
  3. sama aja bang, udah teliti seperti tutorial diatas
Popular Emoji
😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐

Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode
Table of Contents



  • Home


  • Follow


  • Menu


  • Share


  • Comment
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
English: We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.

Bahasa: Halo kak! Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa terus update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.