Otomatis & Ringan! Trik Pasang TOC Otomatis di Viomagz Tanpa Bikin Blog Lemot (Skor Speed Tetap Hijau!)

Tutorial pasang daftar isi atau TOC otomatis di template blog Viomagz

Bagi seorang blogger, menulis artikel panjang dan mendalam (pillar content) adalah kunci utama untuk memenangkan persaingan di halaman pertama Google. Namun, artikel yang panjang sering kali membuat pembaca cepat lelah karena harus melakukan scroll tanpa arah.

Solusi terbaiknya adalah memasang TOC (Table of Contents) atau Daftar Isi. Selain mempermudah manusia, Google sangat menyukai blog yang memiliki TOC karena berpeluang besar mendapatkan fitur Jump Links (tautan pintas langsung) di hasil pencarian Google.

Masalahnya, banyak tutorial TOC di internet yang menggunakan library pihak ketiga yang berat (seperti jQuery lama) yang justru membuat skor loading blog Anda anjlok drastis.

Nah, kali ini Saya akan membagikan trik rahasia memasang TOC Otomatis khusus untuk Template Viomagz. Caranya sangat aman, menggunakan Javascript murni (Vanilla JS) yang super ringan, dan penempatannya dijamin rapi di paling atas artikel. Mari kita eksekusi!

Mengapa Trik TOC Ini Lebih Unggul?

Sebelum masuk ke tutorial, ini beberapa alasan mengapa metode ini wajib Anda coba:

Otomatis Penuh: Anda tidak perlu membuat tautan manual satu per satu setiap kali menulis. Script ini akan mendeteksi otomatis tag Heading (H2 dan H3) di dalam artikel Anda.
0% Beban Server Luar: Kode berjalan secara internal di browser pengunjung, sehingga tidak akan membebani kecepatan blog.
Letak Sempurna: TOC akan langsung duduk manis di bagian paling atas konten (di atas gambar utama dan paragraf pertama), persis seperti situs berita profesional.
Tahu Diri: Jika artikel Anda pendek (tidak ada atau hanya ada 1 heading), kotak TOC tidak akan muncul sehingga tampilan blog tetap rapi.

Tutorial Pasang TOC Otomatis di Viomagz

Metode yang kita gunakan kali ini sangat bersih karena memisahkan antara desain (CSS) dan fungsi (Script), sehingga kode bawaan template utama Anda tetap perawan dan aman dari crash.

Langkah 1: Pasang CSS via Menu "Tata Letak/Layout" Blogger

Keunggulan cara ini adalah kita tidak perlu mengotori kode HTML tema untuk urusan tampilan.

1. Masuk ke Dashboard Blogger Anda.
2. Pilih menu Tata Letak (Layout) ➔ klik tombol pensil pada widget Custom CSS
3. Salin kode CSS di bawah ini dan tempelkan (paste) ke dalam kolom yang disediakan:

    
   /* Custom Automatic TOC Viomagz by rifaisugiono.web.id */
#toc-auto {
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 12px 15px;
    display: inline-block;
    margin: 15px 0;
    min-width: 300px;
    max-width: 100%;
    border-radius: 4px;
    font-size: 14px;
}
#toc-title {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #a2a9b1;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #333;
}
#toc-toggle {
    cursor: pointer;
    font-size: 12px;
    color: #0066cc;
    text-decoration: underline;
}
#toc-lists {
    padding-left: 0;
    margin: 0;
    list-style: none;
    counter-reset: h2-counter; /* Reset hitungan nomor */
}
#toc-lists li {
    margin-bottom: 5px;
}
/* Hanya H2 yang dihitung dan diberi nomor */
#toc-lists li.toc-h2 {
    counter-increment: h2-counter;
}
#toc-lists li.toc-h2::before {
    content: counter(h2-counter) ". ";
    font-weight: bold;
    color: #333;
}
/* H3 otomatis jadi anak buah berbentuk bulat tanpa merusak nomor */
#toc-lists li.toc-h3 {
    margin-left: 20px;
    display: list-item;
    list-style-type: circle;
}
#toc-lists a {
    color: #222;
    text-decoration: none;
}
#toc-lists a:hover {
    color: #0066cc;
    text-decoration: underline;
}

4. Klik Simpan di pojok kanan bawah halaman dekorasi tersebut.

Langkah 2: Pasang Engine Script Otomatis di Template

Sekarang saatnya memasukkan fungsi otomatisasinya agar script bisa membaca isi artikel Viomagz Anda.

1. Kembali ke Dashboard Blogger ➔ Pilih Tema ➔ Klik tanda panah bawah di sebelah 'Sesuaikan' ➔ Pilih Edit HTML.
2. Klik di dalam kotak kode, tekan Ctrl + F, lalu cari tag penutup </body> (biasanya berada di paling bawah kode tema).
3. Tempelkan seluruh kode JavaScript murni berikut tepat di atas tag </body>:

    
   <!-- Script TOC Otomatis Khusus Halaman Artikel Saja -->
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    var postBody = document.querySelector('.post-body');
    if (!postBody) return;

    var headings = postBody.querySelectorAll('h2, h3');
    if (headings.length < 2) return; 

    var tocContainer = document.createElement('div');
    tocContainer.id = 'toc-auto';

    var tocTitle = document.createElement('div');
    tocTitle.id = 'toc-title';
    tocTitle.innerHTML = 'Daftar Isi <span id="toc-toggle">Sembunyikan</span>';
    tocContainer.appendChild(tocTitle);

    // Diubah jadi UL agar penomoran dikendalikan penuh oleh CSS Counter
    var tocList = document.createElement('ul');
    tocList.id = 'toc-lists';

    headings.forEach(function(heading, index) {
        var id = heading.id || 'toc-head-' + index;
        heading.id = id;

        var listItem = document.createElement('li');
        listItem.className = 'toc-' + heading.tagName.toLowerCase();

        var link = document.createElement('a');
        link.href = '#' + id;
        link.textContent = heading.textContent;

        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });

    tocContainer.appendChild(tocList);
    postBody.insertBefore(tocContainer, postBody.firstElementChild);

    document.getElementById('toc-toggle').addEventListener('click', function() {
        var list = document.getElementById('toc-lists');
        if (list.style.display === 'none') {
            list.style.display = 'block';
            this.textContent = 'Sembunyikan';
        } else {
            list.style.display = 'none';
            this.textContent = 'Tampilkan';
        }
    });
});
//]]>
</script>
</b:if>

4. Klik tombol Simpan (Ikon Disket) di bagian atas.

Selesai! Sekarang coba buka salah satu artikel panjang Anda yang memiliki beberapa sub-judul. Kotak Daftar Isi yang responsif dan interaktif dijamin sudah muncul secara elegan di bagian paling atas artikel.

Opini Saya: Jangan Korbankan Kecepatan demi Fitur

Banyak blogger yang terlalu bersemangat memasang berbagai fitur di blog mereka tanpa memikirkan dampaknya pada kecepatan loading. Padahal, Core Web Vitals (kecepatan halaman) saat ini menjadi salah satu faktor penentu utama peringkat di Google.

Trik pemisahan CSS ke dalam fitur bawaan Blogger dan penggunaan Vanilla JS murni ini adalah pembuktian bahwa kita bisa membuat blog kita kaya akan fitur navigasi premium tanpa harus mengorbankan performa kecepatan. Kerja cerdas seperti inilah yang membedakan antara blogger profesional dengan blogger musiman.

Selamat mencoba trik ini di blog Viomagz Anda. Jika ada kendala terkait selektor kelas, silakan diskusikan di kolom komentar di bawah!