🔔 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)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

5 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  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
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.