Skip to content
Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger / Canva Style! Trik Membuat Daftar Isi Pro di Viomagz, Otomatis & Support Dark Mode Luxury

Canva Style! Trik Membuat Daftar Isi Pro di Viomagz, Otomatis & Support Dark Mode Luxury

Oleh Rifai S. Posting Komentar
Tutorial pasang daftar isi premium otomatis canva style di template blogger viomagz

Tingkatkan estetika dan SEO blog Viomagz: Panduan membuat Daftar Isi Pro Canva Style otomatis dengan dukungan Luxury Dark Mode.

Halaman Daftar Isi (Sitemap) adalah salah satu halaman paling krusial yang wajib ada di sebuah blog profesional. Selain berfungsi sebagai peta navigasi bagi pembaca untuk menjelajahi seluruh konten, halaman ini juga menjadi ladang subur bagi Googlebot untuk merayap dan mengindeks artikel lama Anda secara teratur (Internal Linking Optimization).

Namun, coba perhatikan halaman daftar isi bawaan atau tutorial jadul di internet. Tampilannya rata-rata sangat membosankan: hanya berupa peluru poin (bullet points) memanjang ke bawah yang merusak estetika blog, bahkan sering kali membuat loading halaman menjadi sangat berat.

Bagi Anda pengguna Template Viomagz, kini saatnya bermigrasi ke tampilan premium. Kali ini, kita akan membuat Daftar Isi Pro Versi Canva Style dengan kombinasi warna Tactical Navy dan Gold Premium. Bukan cuma elegan, sitemap ini dibekali fitur canggih anti-eror dan otomatis sinkron dengan tombol Dark Mode Viomagz!

4 Alasan Kenapa Daftar Isi Pro Ini Wajib Dipasang

Sebelum masuk ke tutorial, mari kita intip keunggulan arsitektur kode dari Daftar Isi Pro ini:

  1. Desain Canva Style Grid: Artikel dikelompokkan dalam kartu-kartu (cards) modern berbasis label. Sangat bersih, rapi, dan sedap dipandang.
  2. Fitur Suntikan Internal Scroll: Jika sebuah label memiliki puluhan artikel, kotak kartu tidak akan melorot ke bawah sampai merusak footer. Sistem secara otomatis menyuntikkan batang scrollbar mini yang estetik di dalam kartu.
  3. Sinkronisasi Dark Mode 100%: Begitu pengunjung mengeklik tombol Dark Mode bawaan Viomagz, warna daftar isi ini akan langsung bertransisi menjadi tema gelap mewah (Luxury Dark Mode) tanpa delay.
  4. Otomatis Penuh & Super Ringan: Menggunakan teknologi JSON-in-script bawaan Blogger. Begitu Anda selesai menerbitkan artikel baru, daftar isi ini akan terbarui otomatis secara real-time tanpa perlu diutak-atik lagi.

Tutorial Langkah demi Langkah Pemasangan

Karena seluruh kode desain (CSS), mesin pengambil data (JavaScript), dan struktur dasarnya (HTML) sudah disatukan ke dalam satu paket kode all-in-one, proses pemasangannya menjadi sangat mudah. Anda tidak perlu menyentuh editor HTML Tema utama.

Langkah 1: Buat Halaman Statis Baru

  • Buka Dashboard Blogger Anda.
  • Masuk ke menu Halaman (Pages) → Klik Halaman Baru (New Page).
  • Beri judul halaman tersebut: Daftar Isi atau Sitemap.
  • Di pojok kiri atas (di bawah judul), ubah mode menulis dari Tampilan Menulis (Compose View) menjadi Tampilan HTML (HTML View).

Langkah 2: Tempelkan Kode All-in-One Ini

Salin (copy) seluruh baris kode di bawah ini, lalu tempelkan (paste) ke dalam editor HTML kosong tersebut:

HTML, CSS & JavaScript - Viomagz Canva Style Sitemap Code 
<div id="blogger-toc-container">
  <div class="toc-loading">Mengambil data artikel...</div>
</div>

<style>
/* =======================================================
   TOC PRO - MODERN KNOWLEDGE BASE (CANVA STYLE NAVY GOLD)
   ======================================================= */
:root {
  --toc-primary: #0a2342;       /* Tactical Navy */
  --toc-accent: #d4af37;        /* Gold Premium */
  --toc-bg: #ffffff;
  --toc-bg-card: #ffffff;       /* Putih Bersih */
  --toc-text: #333333;
  --toc-border: rgba(10, 35, 66, 0.06); /* Border Navy Transparan */
}

#blogger-toc-container {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.7;
  margin-top: 20px;
}

/* Kategori Card - Canva Style Grid */
.toc-category-card {
  background: var(--toc-bg-card) !important;
  border: 1px solid var(--toc-border) !important;
  border-radius: 14px !important;
  margin-bottom: 25px !important;
  padding: 24px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 12px rgba(10, 35, 66, 0.02) !important;
}

/* Efek Hover Mengambang Elegan */
@media screen and (min-width: 769px) {
  .toc-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(10, 35, 66, 0.07) !important;
    border-color: var(--toc-primary) !important;
  }
}

/* Judul Kategori */
.toc-category-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--toc-primary) !important;
  margin: 0 0 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid rgba(10, 35, 66, 0.05) !important;
  padding-bottom: 10px !important;
}

.toc-category-title span {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Badge Jumlah Postingan */
.post-count-badge {
  background: var(--toc-primary) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(10, 35, 66, 0.15) !important;
}

/* Ikon Folder SVG */
.toc-category-title svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--toc-primary) !important;
}

/* Daftar Artikel + SUNTIKAN FITUR SCROLL */
.toc-post-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 260px !important; /* Batasi tinggi maksimal agar tidak melorot */
  overflow-y: auto !important;   /* Otomatis memunculkan scroll vertikal */
  padding-right: 8px !important; /* Ruang bernapas untuk batang scrollbar */
}

/* KUSTOMISASI BATANG SCROLLBAR PREMIUM (LIGHT MODE) */
.toc-post-list::-webkit-scrollbar {
  width: 5px !important; /* Ketebalan scrollbar super tipis & rapi */
}
.toc-post-list::-webkit-scrollbar-track {
  background: rgba(10, 35, 66, 0.02) !important;
  border-radius: 10px !important;
}
.toc-post-list::-webkit-scrollbar-thumb {
  background: rgba(10, 35, 66, 0.15) !important; /* Warna navy halus */
  border-radius: 10px !important;
}
.toc-post-list::-webkit-scrollbar-thumb:hover {
  background: var(--toc-accent) !important; /* Berubah emas saat disorot kursor */
}

.toc-post-list li {
  padding: 12px 0 !important;
  border-bottom: 1px dashed rgba(10, 35, 66, 0.06) !important;
  transition: all 0.2s ease !important;
}

.toc-post-list li:hover {
  padding-left: 6px !important;
}

.toc-post-list a {
  text-decoration: none !important;
  color: #444444 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
}

.toc-post-list a:hover {
  color: var(--toc-accent) !important;
}

/* Sektor Badge Label Per Artikel */
.toc-item-labels {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.toc-mini-badge {
  font-size: 10px !important;
  background: rgba(10, 35, 66, 0.04) !important;
  color: var(--toc-primary) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(10, 35, 66, 0.08) !important;
  letter-spacing: 0.3px !important;
}

.toc-loading {
  text-align: center;
  padding: 30px;
  color: #666;
  font-weight: 600;
  font-size: 14px;
}

/* =======================================================
   AMUNISI DATA: PROTEKSI DARK MODE LUXURY (SINKRON 100%)
   ======================================================= */
body.dark-mode #blogger-toc-container {
  --toc-primary: #ffffff;
  --toc-accent: #d4af37;
  --toc-text: #c9d1d9;
  --toc-border: #21262d;
}

body.dark-mode .toc-category-card { 
  background: #161b22 !important; 
  border-color: #21262d !important;
  box-shadow: none !important;
}

body.dark-mode .toc-category-card:hover {
  border-color: #d4af37 !important;
}

body.dark-mode .toc-category-title {
  color: #ffffff !important;
  border-bottom-color: #21262d !important;
}

body.dark-mode .toc-category-title svg {
  stroke: #d4af37 !important;
}

body.dark-mode .post-count-badge { 
  background: #21262d !important; 
  color: #d4af37 !important; 
  border: 1px solid #d4af37 !important;
  box-shadow: none !important;
}

body.dark-mode .toc-post-list li {
  border-bottom-color: #21262d !important;
}

body.dark-mode .toc-post-list a { 
  color: #c9d1d9 !important; 
}

body.dark-mode .toc-post-list a:hover { 
  color: #d4af37 !important; 
}

body.dark-mode .toc-mini-badge {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* KUSTOMISASI SCROLLBAR SAAT DARK MODE AKTIF */
body.dark-mode .toc-post-list::-webkit-scrollbar-track {
  background: #161b22 !important;
}
body.dark-mode .toc-post-list::-webkit-scrollbar-thumb {
  background: #30363d !important;
}
body.dark-mode .toc-post-list::-webkit-scrollbar-thumb:hover {
  background: var(--toc-accent) !important;
}
</style>

<script>
function buildTOC(json) {
  var container = document.getElementById('blogger-toc-container');
  var entries = json.feed.entry;
  
  if (!entries || entries.length === 0) {
    container.innerHTML = "<div class='toc-loading'>Belum ada artikel yang diterbitkan.</div>";
    return;
  }

  var categories = {};

  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var url = "";
    
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel === "alternate") {
        url = entry.link[j].href;
        break;
      }
    }

    var allLabels = [];
    if (entry.category && entry.category.length > 0) {
      for (var x = 0; x < entry.category.length; x++) {
        allLabels.push(entry.category[x].term);
      }
    }

    if (entry.category && entry.category.length > 0) {
      for (var c = 0; c < entry.category.length; c++) {
        var label = entry.category[c].term;
        if (!categories[label]) {
          categories[label] = [];
        }
        categories[label].push({ title: title, url: url, tags: allLabels });
      }
    } else {
      var label = "Tanpa Kategori";
      if (!categories[label]) { categories[label] = []; }
      categories[label].push({ title: title, url: url, tags: [] });
    }
  }

  var html = "";
  var sortedLabels = Object.keys(categories).sort(); 
  
  var folderIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';

  for (var k = 0; k < sortedLabels.length; k++) {
    var catName = sortedLabels[k];
    
    html += '<div class="toc-category-card">';
    html += '<h3 class="toc-category-title"><span>' + folderIcon + catName + '</span><span class="post-count-badge">' + categories[catName].length + '</span></h3>';
    
    html += '<ul class="toc-post-list">';
    for (var m = 0; m < categories[catName].length; m++) {
      var post = categories[catName][m];
      
      html += '<li>';
      html += '<a href="' + post.url + '">' + post.title + '</a>';
      
      if (post.tags && post.tags.length > 0) {
        html += '<div class="toc-item-labels">';
        for (var t = 0; t < post.tags.length; t++) {
          html += '<span class="toc-mini-badge">' + post.tags[t] + '</span>';
        }
        html += '</div>';
      }
      
      html += '</li>';
    }
    html += '</ul></div>';
  }

  container.innerHTML = html;
}
</script>
<script src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=buildTOC"></script>

Klik tombol Publikasikan halaman tersebut.

Panduan Kustomisasi: Cara Mengubah Warna dan Batas Tinggi Konten

Bagian terbaiknya adalah kode di atas sangat fleksibel untuk disesuaikan dengan identitas branding blog Anda. Berikut adalah bagian-bagian penting yang bisa diubah:

1. Mengubah Warna Utama Tema Terang (Light Mode)

Jika Anda tidak ingin menggunakan warna Navy-Gold bawaan di atas, cari baris kode :root di bagian atas tag <style>:

  • --toc-primary: #0a2342 → Ganti kode HEX jika ingin mengubah warna Navy (judul kategori folder, teks utama, dan lingkaran badge).
  • --toc-accent: #d4af37 → Ganti kode HEX jika ingin mengubah warna Emas (warna efek tautan saat disorot kursor).

2. Mengubah Batas Tinggi Kartu Sebelum Muncul Scrollbar

Secara default, batas maksimal tinggi daftar artikel di dalam satu kategori kartu adalah 260px sebelum batang scrollbar mini muncul. Jika ingin kotaknya terlihat lebih panjang atau pendek, sesuaikan baris ini pada CSS:

  • max-height: 260px !important → Ubah menjadi 350px (jika ingin menampung lebih banyak artikel secara vertikal) atau 200px (minimalis).

3. Meningkatkan Batas Maksimal Jumlah Artikel yang Ditarik

Pada baris paling bawah kode JavaScript, terdapat teks max-results=500. Artinya, skrip ini mampu memanggil hingga 500 artikel terbaru. Jika koleksi artikel blog Anda sudah menembus angka tersebut, ubah nilainya menjadi max-results=1000 atau lebih.

Opini Saya: Estetika Navigasi Adalah Kunci Loyalitas Pembaca

Banyak pengelola blog menganggap halaman sitemap hanyalah syarat formalitas pelengkap pendaftaran Google AdSense. Pandangan ini keliru besar. Sitemap yang didesain secara premium dengan struktur Canva Style membuktikan kepada pengunjung bahwa kita serius mengelola arsitektur informasi situs kita.

Suntikan fitur internal scroll dan dukungan Dark Mode yang responsif menjamin pengalaman membaca yang konsisten. Ketika pembaca merasa nyaman menjelajahi arsip artikel lama kita tanpa terganggu tata letak yang berantakan, durasi kunjungan sesi mereka (Time on Site) otomatis meningkat. Langkah inilah yang membedakan blog personal biasa dengan portal media berkelas profesional.

💬 Selamat mencoba trik pemasangan Daftar Isi Pro ini di blog Viomagz kesayangan Anda! Jika menemui kendala terkait sinkronisasi variabel warna, silakan tulis pertanyaan di kolom komentar di bawah dan pantau terus pembaruan artikel menarik berikutnya di rifaisugiono.web.id!

Posting Komentar untuk "Canva Style! Trik Membuat Daftar Isi Pro di Viomagz, Otomatis & Support Dark Mode Luxury"

Tinggalkan Komentar Anda Disini:

Situs ini menggunakan cookie untuk menganalisis lalu lintas dan memastikan Anda mendapatkan pengalaman antarmuka terbaik. Pelajari Kebijakan Privasi kami.