For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Mengubah tombol toc median ui 1.7 seperti median ui 1.6

Mengubah tombol table of content pada template median UI 1.7 seperti median UI 1.6

Hello sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara mengubah tombol toc median UI versi 1.7 ke versi 1.6 melalui kode CSS saja

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Tombol TOC

Tombol toc merupakan fitur yang berfungsi untuk menampilkan Table of content atau yang lebih di kenali sebagai Daftar isi di postingan, pada template median ui 1.7 tombol toc di buat secara sederhana bahkan tanpa menggunakan animasi indicator yang selalu di gunakan pada versi median UI sebelumya, karena setiap pembaruan dari template median UI seluruh source kode akan di perbarui juga, sehingga setiap versi dari template median UI memiliki struktur template yang berbeda beda pula, silahkan Download Template median UI terbaru v1.7 dengan tombol TOC yang sudah di ubah seperti median UI 1.6 lengkap menggunakan animasi indikator di dalamnya

Melalui kode CSS dan HTML

Untuk mengubah tombol TOC median UI versi 1.7 ke versi 1.6 kita bisa menggunakan kode CSS saja dan mengubah sedikit kode CSS dari tombol TOC tersebut, karena emang pembuatan tombol TOC tersebut di buat melalui kode CSS, sedangkan kode HTML pada tombol TOC median UI di gunakan untuk menampilkan tombol TOC serta menjalankan fungsi perintah pada kode CSS

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan cara mengubah tombol median UI versi 1.7 ke versi 1.6, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

  1. Langkah pertama silahkan login ke blogger menggunakan akun google milikmu dan silahkan pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
  2. Kemudian silahkan cari kode CSS seperti di bawah ini
  3. .tocB span{position:fixed;top:calc(var(--headerHeight) + 40px); width:45px;height:40px; background-color:var(--tocBg); box-shadow:0 5px 20px 0 rgb(0 0 0 / 10%);opacity:0;visibility:hidden;transition:var(--tShowHide); z-index:1} .tocB:not(.r) span{right:0;border-radius:20px 0 0 20px} .tocB.r span{left:0;border-radius:0 20px 20px 0}

    Info: Pastikan kode CSS nya sesuai seperti yang tertera di atas okay

  4. Kemudian ubah kode CSS tersebut dengan kode CSS di bawah ini
  5. /* TOC button modified by ICloudice.com */ .tocB{position:fixed;top:calc(var(--headerHeight) + 40px);z-index:2;right:0}.tocB.r{left:0}.tocB svg.rah{width:20px;height:20px;position:absolute;top:-19px;fill:var(--tocBg);transition:inherit}.tocB svg.rah{right:-2px;transform:rotate(92deg)}.tocB svg.rah.in{transform:rotate(-2deg)}.tocB svg.rah.in{top:auto;bottom:-19px;} .tocB span svg{opacity:.8}.tocB span{/*position:fixed;top:calc(var(--headerHeight) + 40px)*/; width:45px;height:40px; background-color:var(--tocBg); box-shadow:0 5px 20px 0 rgb(0 0 0 / 10%);opacity:0;visibility:hidden;transition:var(--tShowHide);} .tocB:not(.r) span{right:0;border-radius:20px 0 0 20px} .tocB.r span{left:0;border-radius:0 20px 20px 0}.tocB span::before{content:'';z-index:1;display:block;width:15px;height:15px;background:var(--tocBg);border-radius:50%; position:absolute;top:5px;left:9px;transition:var(--tShowHide)} .tocB span::after{content:'';z-index:2;display:block;width:10px;height:10px;background:var(--themeLink);border-radius:50%; position:absolute;top:7.5px;left:11.5px;-webkit-animation:indicator 1s ease infinite;-moz-animation:indicator 1s ease infinite;animation:indicator 1s ease infinite}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @-moz-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

    Info: Jika sudah kemudian simpan template dan lanjutkan ketahapan selanjutnya

  6. Setelah mengubah kode CSS kamu harus mengubah kode HTML, langkah selanjutnya yang bisa anda lakukan adalah mencari lagi kode HTML seperti di bawah ini
  7. <label aria-label='Open table of content' class='tocB fc' for='forTOC'>
                                  <b:class cond='data:blog.languageDirection == &quot;rtl&quot;' name='r'/>
                                  <span class='flex center op i22'><b:include name='document-icon'/></span>
                                </label>

    Info: Pastikan kode HTML nya sesuai seperti yang tertera di atas okay

  8. Kemudian ubah atau ganti kode HTML sebelumnya dengan kode HTML di bawah ini
  9. /* TOC button modified by ICloudice.com */ 
    <label aria-label='Open table of content' class='tocB fc' for='forTOC'>
                                  <b:class cond='data:blog.languageDirection == &quot;rtl&quot;' name='r'/>
                                  <svg class='rah' 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 class='flex center op i22'><b:include name='document-icon'/></span>
                                  <svg class='rah 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>
                                </label>

    Info: Jika sudah kemudian simpan template dan periksa bagaimana hasilnya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • 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!
    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.
    Site is Blocked
    Sorry! This site is not available in your country.