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

Cara membuat Table of Content (Toc) Otomatis di Blogger

Memasang dan menggunakan Table of content di blogger secara otomatis

Hello sobat IcloudZer kali ini saya akan membahas mengenai Table of Content, apakah kamu tahu mengenai Table of Content, jika belum tahu kami akan memberikan informasi nya Untuk anda dan kami juga akan memberikan cara untuk menerapkan Table of Content didalam Postingan secara otomatis

Apa Itu Toc?

Toc atau Table of Content adalah sebuah Fitur yang bisa membuat sebuah link yang menuju langsung ke poin poin didalam artikel atau kumpulan inti pokok didalam pembasan artikel tersebut

Sebagai contoh kamu bisa melihat Table of Content Pada artikel yang sedang kamu baca ini, Table of Content juga dipakai atau digunakan oleh atau diterapkan oleh platform Wikipedia

Haruskah menggunakan Toc?

Table of Content bisa digunakan didalam artikel yang memuat pembahasan yang cukup panjang sehingga pembaca bisa memilih inti dari pembahasan dalam suatu artikel dengan melihat dari Table of Content tersebut

Tidak diharuskan anda untuk menggunakan Table of Content (Toc) tetapi tidak ada salahnya anda menggunakan Table of Content didalam postingan anda, Jika anda mempunyai pembahasan atau penjelasan yang cukup panjang

Lagi pula dengan menggunakan Table of Content didalam artikel membuat tulisan kita menjadi lebih teratur dan rapi

Pengaruh Terhadap SEO

Bisa dibilang ketika kamu menerapkan Table of Content didalam sebuah artikel berpengaruh terhadap pengalaman pengguna atau User Experience di dalam blog kita, dan tidak secara langsung berpengaruh terhadap SEO ataupun ranking dipencarian google

Info: User Experience atau pengalaman pengguna saat ini merupakan salah satu faktor penilaian Google untuk menentukan peringkat website.

Tampilan pada pencarian google?

Seperti yang sudah saya jelaskan sebelumnya bahwa dengan menerapkan Table of Content didalam postingan akan membuat tampilan yang berbeda dalam pencarian google sebagai contoh lihat gambar dibawah ini

Tampilan diatas ketika Table of Content diterapkan didalam postingan

Cara Pembuatan

Baiklah sobat dibawah ini adalah cara membuat Table of content, pelajari setiap langkah yang kami berikan agar mudah untuk dimengerti

  1. Login ke akun blogger kamu
  2. Pergi ke Template Kemudian pilih edit HTML
  3. Selanjutnya letakkan kode dibawah ini diatas kode ></head> atau sebelum kode </head>
  4. <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
    <style media='all' type='text/css'>
    .rah-toc {
    margin: 10px 0;
    background:#e3e3e3;
    border:0px solid #f80000;
    }
    .rah-toc ol, .rah-toc ul {
     margin: 0 0 15px 20px;
     padding: 0;
    }
    .rah-toc ul {
     list-style: disc;
    }
    .rah-toc ol li, .rah-toc ul li {
     font-size: 95%;
     padding: 5px 10px 0 0;
     margin: 0 0 0 30px;
    }
    .rah-toc a {
     text-decoration: none;
    }
    .rah-toc a:hover {
     text-decoration: underline;
    }
    .rah-toc .rah-tocHeader {
     font-weight: bold;
     font-size: 100%;
     position: relative;
     outline: none
     border: none;
     padding: 5px 15px 5px 5px;
     margin: 5px 10px;
    }
    .rah-toc .rah-tocHeader a {
     text-decoration: none;
     cursor: pointer;
    }
    .rah-toc .rah-tocHeader a:hover {
     text-decoration: underline;
    }
    </style>
    <!-- Blogger TOC -->
    <script type='text/javascript'>
    //<![CDATA[
    function rah-toc() {
     var rah-toc = i = headinglength = getheading = 0;
     headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
     if (headinglength > 0) {
     // Hanya Tampil Jika Ditemukan Minimal 1 Heading
     for (i = 0; i < headinglength; i++) {
     getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
     var rah-toc_1 = getheading.replace(/[^a-z0-9]/gi," ");
     var rah-toc_2 = rah-toc_1.trim();
     var getHeadUri = rah-toc_2.replace(/\s/g, "_"); document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
     rah-toc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>"; document.getElementById("rah-toc").innerHTML += rah-toc;
     }
     } else { document.write("<style>.rah-toc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
    }
    function rah-tocShow() {
        var rah-tocBtn = document.getElementById('rah-toc');
     var rah-tocWrapID = document.getElementById('rah-tocwrap');
     var rah-tocLink = document.getElementById('rah-tocLink');
        if (rah-tocBtn.style.display === 'none') {
            rah-tocBtn.style.display = 'block';
     rah-tocWrapID.style.display = 'block';
     rah-tocLink.innerHTML = 'Tutup';
        } else {
            rah-tocBtn.style.display = 'none';
     rah-tocWrapID.style.display = 'inline-block';
     rah-tocLink.innerHTML = 'Tampil';
        }
    }
    //]]>
    </script>
    <noscript><style media='all' type='text/css'>#rah-tocwrap,.rah-toc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
    </b:if>
  5. Jika sudah kemudian simpan

Cara penggunaan Toc

Setelah anda menyelesaikan cara seperti di atas selanjutnya, untuk menampilkan Toc didalam postinganan periksa dua cara yang bisa kamu pilih

Cari kode <data:post.body/> jika sudah ketemu kemudian ganti dengan kode yang kami sediakan dibawah ini :

Toc Terbuka

<div id='post-toc'>
<div id='rah-tocwrap' class='rah-toc' style='display:inline-block;'><div class='rah-tocHeader'>Table of Content [<a id='rah-tocLink' onclick='rah-tocShow()'>Tutup</a>]</div><ul id='rah-toc' style='display:block'/></div>
<data:post.body/>
<script>rah-toc();</script>
</div>

Ganti Kode <data:post.body/> dengan kode diatas untuk menampilkan Table of Content

Contoh Tampilan

Baiklah admin akan menyertakan contoh tampilan dari Toc Terbuka, nah tampilan nya seperti contoh dibawah ini ya

Table of Content [Tutup]

    Info: Toc ini akan benar benar berfungsi jika kamu menerapkannya didalam template blog, Tampilan diatas hanya sebagai contoh demonya saja oke

    Toc Tertutup

    <div id='post-toc'>
    <div id='rah-tocwrap' class='rah-toc' style='display:inline-block;'><div class='rah-tocHeader'>Table of Content [<a id='rah-tocLink' onclick='rah-tocShow()'>Tampil</a>]</div><ul id='rah-toc' style='display:none'/></div>
    <data:post.body/>
    <script>rah-toc();</script>
    </div>

    Ganti Kode <data:post.body/> dengan kode diatas untuk menampilkan Table of Content

    Contoh Tampilan

    Baiklah admin akan menyertakan contoh tampilan dari Toc Tertutup, nah tampilan nya seperti contoh dibawah ini ya

    Table of Content [Tampil]
    Info: Toc ini akan benar benar berfungsi jika kamu menerapkannya didalam template blog, Tampilan diatas hanya sebagai contoh demonya saja oke

    Begitulah informasi yang bisa saya bagikan untuk anda mengenai bagaimana cara membuat Table of Content didalam postingan blog secara otomatis

    About the Author

    Keindahanmu akan kuabadikan disetiap karyaku.

    2 comments

    1. Berikut ini adalah Contoh berkomentar yang baik dengan menggunakan Fitur Media+

      Fitur Komentar

      Kamu bisa menggunakan beberapa tombol menu didalam fitur Media+ yang telah kami sediakan diantaranya :

      Menampilkan Gambar (Image)
      Menampilkan Vidio (Vidio)
      Menampilkan Kotak script (Pre)
      Menyorot Text (Code)
      Membuat text blockquoute (quote)

      Cara menggunakan

      Ketika ingin menampilkan gambar atau Vidio anda harus memiliki sebuah link dari gambar atau Vidio yang nantinya akan anda tampilkan tersebut, dan masukkan link tersebut didalam kotak Media+ dan perhatikan dibawah ini adalah contoh Penggunaan komentar
    2. Contoh penggunaan

      Ketika kamu ingin menggunakan Tombol image untuk menampilkan gambar maka nantinya akan seperti ini

      https://1.bp.blogspot.com/-wP_7lYSE35g/YKwApwSS9hI/AAAAAAAAAFU/__o2fFk1QGQEKM3YM0nd3SLP_jukqBhIwCLcBGAsYHQ/s0/0002-1759728493_20210524_000514_0000.png

      Ketika kamu ingin menggunakan Tombol vidio untuk menampilkan vidio maka nantinya akan seperti ini

      https://www.youtube.com/watch?v=uuEB56u0sls

      Ketika kamu ingin menggunakan Tombol pre untuk membuat kotak script maka nantinya akan seperti ini

      <script>{fungtion b;a'n"g}<g4anteng><aiuro class=''></guanteng></script>
      Ketika kamu ingin menggunakan Tombol code untuk Menyorot Text maka nantinya akan seperti ini

      Hello sorot text begini ya, BLA BLA BLA

      Ketika kamu ingin menggunakan Tombol quote untuk membuat Text blockquoute maka nantinya akan seperti ini

      Hello kamu inilah text blockquoute nya

      Bagaimana Selamat berkomentar dan semoga bermanfaat
    Menghasilkan uang melalui survei berbayar
    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.