Panduan Penggunaan Sitemap Han Haoyu Platform

Daftar Isi

Sebelum Mulai: Baca Ini Dulu

Panduan ini dibuat khusus untuk kamu yang sudah atau ingin memasang Sitemap HHC v4.3 di blog Blogger dan ingin paham betul setiap fitur yang ada di dalamnya — bukan sekadar pasang dan selesai, tapi benar-benar ngerti cara kerjanya dan bisa memaksimalkannya.

Setiap fitur di sini akan dijelaskan mulai dari apa itu, bagaimana kodenya, kenapa ada, cara pakainya, sampai manfaat konkret yang bisa kamu rasakan. Tidak ada yang di-skip, tidak ada yang setengah-setengah.

Perhatian Sebelum Mulai

Seluruh fitur di panduan ini adalah bagian dari satu kode sitemap yang sama. Kamu tidak perlu install fitur satu per satu — semuanya sudah tersedia begitu kode Sitemap HHC v4.3 dipasang di halaman Blogger. Yang perlu kamu lakukan hanya menyesuaikan blok konfigurasi di bagian atas kode.

Note Gambar: Sisipkan di sini screenshot tampilan keseluruhan Sitemap HHC v4.3 dari desktop — tunjukkan semua section: statistik, controls bar, label panel, dan grid kartu post.

Live Demo

Sebelum masuk ke panduan tiap fitur, silakan buka dulu live demo-nya untuk referensi visual selama membaca panduan ini.

Note Live Demo: Sisipkan embed atau link live demo sitemap di sini. Bisa berupa iframe dari halaman sitemap aktif atau tombol yang langsung mengarah ke halaman sitemap kamu.

Buka Live Demo Sitemap HHC v4.3

Blok Konfigurasi: Pusat Kendali Seluruh Fitur

Apa Itu

Blok konfigurasi adalah satu-satunya tempat kamu perlu mengedit kode sebelum sitemap bisa berjalan. Semua pengaturan — dari URL blog, jumlah post yang diambil, sampai tampilan tombol — dikendalikan dari sini. Tidak perlu masuk ke bagian CSS atau JavaScript utama sama sekali.

Kode

const konfigurasiSitemapbyHHC = {

  /* URL & Data */
  linkwebsite: "homepageurl",
  ambildatapostbloggerSitemapbyHHC: 0,
  chunkSizeSitemapbyHHC: 50,
  chunkDelayMsSitemapbyHHC: 300,

  /* Cache */
  cacheExpirySitemapbyHHC: 21600000,
  autoCacheRefreshSitemapbyHHC: true,

  /* Tab */
  tampilkanTabPostSitemapbyHHC: true,
  tampilkanTabHalamanSitemapbyHHC: true,

  /* Sembunyikan Label */
  sembunyikanLabelSitemapbyHHC: [],

  /* Tampilan */
  preloaderSitemapbyHHC: true,
  statisticSitemapbyHHC: true,
  showstatisticlabelSitemapbyHHC: ["News", "Course", "All Product"],
  defaultSortSitemapbyHHC: "published",
  jumlahKataDeskripsiSitemapbyHHC: 150,

  /* Link */
  bukaLinkPostSitemapbyHHC: "_blank",
  bukaLinkLabelSitemapbyHHC: "_self",
  tampilkanLinkPenulisSitemapbyHHC: true,
  bukaLinkPenulisSitemapbyHHC: "_blank",

  /* Tombol Salin Per Kartu */
  tampilkanTombolSalinSitemapbyHHC: true,
  formatSalinSitemapbyHHC: "chat",

  /* Tombol Salin Massal */
  tampilkanSalinHalamanIniSitemapbyHHC: true,
  tampilkanSalinSemuaPostSitemapbyHHC: true,

  /* Pagination per Grid */
  itemsPerPageGridSitemapbyHHC: {1:10, 2:20, 3:24, 4:32},

  /* Gambar Default */
  defaultImageSitemapbyHHC: "https://...",
};

Penjelasan Per Parameter

Parameter	Tipe	Default	Keterangan
`linkwebsite`	`string`	`"homepageurl"`	URL blog kamu tanpa slash di akhir. Contoh: `"https://namablog.blogspot.com"`. Kalau dibiarkan default, otomatis pakai `window.location.origin` — berguna kalau domain custom dan origin sudah sesuai
`ambildatapostbloggerSitemapbyHHC`	`number`	`0`	Batas jumlah post yang diambil dari API. `0` berarti ambil semua. Set misalnya `100` kalau blog punya ribuan post dan kamu mau batasi untuk kecepatan loading
`chunkSizeSitemapbyHHC`	`number`	`50`	Jumlah post per satu request ke Blogger API. Maksimum 150, disarankan 50. Nilai lebih besar = lebih cepat selesai tapi lebih berat per request
`chunkDelayMsSitemapbyHHC`	`number`	`300`	Jeda antar request dalam milidetik. Ini mencegah Blogger API error karena request beruntun yang terlalu cepat. Jangan set ke `0` jika blog punya lebih dari 200 post
`cacheExpirySitemapbyHHC`	`number`	`21600000`	Durasi cache dalam milidetik. 21.600.000 = 6 jam. Bisa dinaikkan ke 86.400.000 (24 jam) untuk blog yang jarang update
`autoCacheRefreshSitemapbyHHC`	`boolean`	`true`	Jika `true`, cache yang sudah expired akan otomatis diperbarui di background tanpa mengganggu tampilan. Pengunjung tidak akan sadar ada proses refresh
`tampilkanTabPostSitemapbyHHC`	`boolean`	`true`	Toggle tab "Postingan" di controls bar. Set ke `false` untuk menyembunyikan
`tampilkanTabHalamanSitemapbyHHC`	`boolean`	`true`	Toggle tab "Halaman" (pages statis) di controls bar. Kalau blog tidak punya halaman berarti, set ke `false` untuk UI lebih bersih
`sembunyikanLabelSitemapbyHHC`	`array`	`[]`	Array nama label yang post-nya tidak ditampilkan. Contoh: `["VIP", "Draft"]`. Total statistik API tetap akurat — hanya tampilan kartu yang disaring
`preloaderSitemapbyHHC`	`boolean`	`true`	Tampilkan overlay preloader fullscreen saat loading pertama. Jika `false`, gunakan shimmer skeleton cards sebagai gantinya
`statisticSitemapbyHHC`	`boolean`	`true`	Toggle seluruh section statistik. Set `false` untuk tampilan minimalis tanpa section stats
`showstatisticlabelSitemapbyHHC`	`array`	`["News", "Course", "All Product"]`	Label-label yang ditampilkan sebagai bar chart mini di section statistik. Isi dengan nama label penting di blog kamu. Huruf besar/kecil harus persis sama dengan label di Blogger
`defaultSortSitemapbyHHC`	`string`	`"published"`	Urutan default saat sitemap pertama dibuka. `published` = terbaru dulu, `oldest` = terlama dulu, `alpha` = alfabet A-Z
`jumlahKataDeskripsiSitemapbyHHC`	`number`	`150`	Jumlah kata maksimum untuk teks deskripsi di kartu post. Sistem ambil dari `p.summary` dulu, fallback ke konten HTML post
`bukaLinkPostSitemapbyHHC`	`string`	`"_blank"`	Target link saat judul kartu diklik. `_blank` = tab baru, `_self` = tab sama
`bukaLinkLabelSitemapbyHHC`	`string`	`"_self"`	Target link saat tag label di kartu diklik. Disarankan `_self` untuk navigasi blog yang lebih natural
`tampilkanLinkPenulisSitemapbyHHC`	`boolean`	`true`	Jika `true`, nama penulis di kartu post menjadi link yang bisa diklik menuju profil penulis
`bukaLinkPenulisSitemapbyHHC`	`string`	`"_blank"`	Target link profil penulis
`tampilkanTombolSalinSitemapbyHHC`	`boolean`	`true`	Toggle tombol salin (copy) kecil di pojok kanan atas setiap kartu post
`formatSalinSitemapbyHHC`	`string`	`"chat"`	Format output saat tombol salin diklik. Pilihan: `chat` (markdown WhatsApp/Telegram), `plain` (teks biasa), `json` (JSON object)
`tampilkanSalinHalamanIniSitemapbyHHC`	`boolean`	`true`	Toggle tombol bulk copy untuk post di halaman pagination yang sedang aktif
`tampilkanSalinSemuaPostSitemapbyHHC`	`boolean`	`true`	Toggle tombol bulk copy untuk seluruh post dari hasil filter aktif, lintas semua halaman pagination
`itemsPerPageGridSitemapbyHHC`	`object`	`{1:10, 2:20, 3:24, 4:32}`	Jumlah kartu per halaman untuk setiap ukuran grid. Key = jumlah kolom, Value = jumlah item
`defaultImageSitemapbyHHC`	`string`	URL gambar default	Gambar fallback untuk kartu post yang tidak punya thumbnail. Gunakan gambar 720px lebar, rasio 16:9

Cara Penggunaan

Buka kode Sitemap HHC v4.3 di editor HTML Blogger.
Temukan blok ini di bagian paling atas kode:
```
const konfigurasiSitemapbyHHC = { ... };
```

Edit hanya nilai-nilainya — jangan ubah nama parameter atau struktur object-nya.

// Contoh pengaturan untuk blog kamu
linkwebsite: "https://namablog.blogspot.com",
showstatisticlabelSitemapbyHHC: ["Tutorial", "Review", "Tips"],
defaultSortSitemapbyHHC: "published",
cacheExpirySitemapbyHHC: 43200000, // 12 jam

Simpan dan publish halaman. Tidak perlu menyentuh bagian CSS atau JavaScript sama sekali.

Manfaat & Kebaruan

Sistem konfigurasi terpusat ini adalah salah satu keputusan arsitektur paling penting di Sitemap HHC. Kebanyakan sitemap Blogger yang ada di luar sana mengharuskan pengguna untuk masuk ke bagian script atau CSS untuk mengubah behavior — yang beresiko merusak kode jika tidak hati-hati.

Dengan satu object konfigurasi di bagian atas, kamu bisa mengubah hampir semua perilaku sitemap tanpa menyentuh logika internal. Ini juga mempermudah update versi di masa depan — cukup ganti bagian script utamanya, konfigurasi tidak perlu diulang.

Preloader: Loading Experience yang Tidak Bikin Frustrasi

Apa Itu

Preloader adalah overlay fullscreen yang muncul saat sitemap sedang mengambil data dari Blogger API untuk pertama kali. Bukan overlay buta yang bikin pengguna bingung sedang apa — ini preloader informatif yang menampilkan progress aktual berapa post sudah dimuat.

Note Gambar: Sisipkan screenshot tampilan preloader — tunjukkan area percentage, progress bar, dan teks counter "X / Y postingan dimuat".

Kode yang Relevan

// Di konfigurasi
preloaderSitemapbyHHC: true,

// Fungsi internal
function mkPreloader(title) { ... }   // Membuat elemen preloader
function setProgress(pct, txt) { ... } // Update nilai persentase dan teks
function hidePreloader() { ... }       // Sembunyikan dengan fade-out

Penjelasan Cara Kerja

Preloader bekerja dalam tiga tahap:

Munculnya — Saat init() dipanggil dan tidak ada cache, preloader langsung dibuat dan di-append ke document.body dengan animasi pop-in. Ini terjadi sebelum fetch API dimulai.
Progres real-time — Setiap kali satu chunk post selesai di-fetch, fungsi setProgress() dipanggil dengan nilai persentase baru dan teks deskriptif seperti "127 / 300 postingan dimuat...". Progress bar dan angka persentase langsung terupdate.
Menghilangnya — Setelah semua data selesai, preloader fade-out dengan transisi CSS 0.6 detik, lalu elemen-nya dihapus dari DOM sepenuhnya. Tidak ada jejak di memory.

Cara Penggunaan

Set nilai ini di konfigurasi:

preloaderSitemapbyHHC: true,

Saat loading pertama, pengguna akan melihat overlay fullscreen dengan progress bar animasi dan counter jumlah post yang dimuat. Cocok untuk blog dengan ratusan post karena memberikan feedback visual yang jelas bahwa proses sedang berjalan.

Set nilai ini di konfigurasi:

preloaderSitemapbyHHC: false,

Preloader tidak muncul. Sebagai gantinya, grid akan menampilkan shimmer skeleton cards — placeholder beranimasi yang berbentuk seperti kartu post asli. Lebih subtle, cocok untuk blog dengan sedikit post yang loadingnya cepat.

Manfaat & Kebaruan

Preloader ini berbeda dari overlay loading biasa karena dua hal: pertama, ia menampilkan progres yang nyata bukan sekadar spinner yang tidak informatif. Kedua, desainnya menggunakan glassmorphism dengan backdrop-filter blur yang terasa modern dan tidak mengganggu seperti overlay solid hitam yang umum dipakai.

Dari sisi UX, pengguna yang tahu bahwa "data sedang dimuat 60%" jauh lebih sabar dibandingkan pengguna yang hanya melihat spinner tanpa informasi apapun.

Statistik Konten: Dashboard Blog dalam Satu Pandang

Apa Itu

Section statistik adalah panel di bagian atas sitemap yang menampilkan ringkasan komprehensif tentang konten blog — total post, total halaman, jumlah label, jumlah penulis, distribusi per label pilihan, dan chip per penulis beserta avatarnya.

Note Gambar: Sisipkan screenshot section statistik lengkap — tunjukkan cards total, label bar chart, dan author chips dengan avatar.

Kode yang Relevan

// Di konfigurasi
statisticSitemapbyHHC: true,
showstatisticlabelSitemapbyHHC: ["News", "Course", "All Product"],

// Fungsi internal
function buildMaps(posts) {
  // Membangun object labels: { "Tutorial": 42, "Review": 18, ... }
  // Membangun object authors: { "HanHaoyu": { count: 120, img: "..." } }
  return { labels, authors };
}

Penjelasan Cara Kerja

Statistik dihitung setelah seluruh data post selesai di-fetch atau dimuat dari cache. Fungsi buildMaps() iterasi semua post dan membangun dua buah objek:

Object labels — key adalah nama label, value adalah jumlah post yang punya label itu
Object authors — key adalah nama penulis, value adalah objek berisi count, URL avatar, dan URL profil

Dari dua objek ini, seluruh section statistik di-render: cards angka, bar chart label, dan chips penulis.

Cara Penggunaan

Pastikan statisticSitemapbyHHC bernilai true.
Isi array showstatisticlabelSitemapbyHHC dengan nama label yang paling penting di blog kamu:
```
showstatisticlabelSitemapbyHHC: ["Tutorial", "Review", "News", "Project"],
```
Perhatian: Nama label di array ini harus persis sama dengan nama label yang ada di Blogger — termasuk huruf besar dan kecilnya. "Tutorial" dan "tutorial" dianggap berbeda.
Untuk memperbarui data statistik secara manual, klik tombol "Perbarui Cache" di pojok kanan atas section statistik. Ini akan menghapus cache lama dan fetch ulang semua data.

Komponen dalam Section Statistik

Cards Angka (Total Post, Halaman, Label, Penulis)

Empat cards pertama menampilkan angka total: Total Postingan, Total Halaman, Total Label, dan Total Penulis. Angka Total Postingan dan Total Halaman diambil langsung dari Blogger API (openSearch$totalResults) — bukan dihitung dari post yang sudah difilter. Jadi angkanya selalu akurat meskipun ada label yang disembunyikan.

Label Bar Chart

Untuk setiap label yang ada di array showstatisticlabelSitemapbyHHC, sitemap menampilkan chip dengan nama label, jumlah post, persentase terhadap total post, dan progress bar visual. Bar chart dianimasikan saat section statistik muncul — bar naik dari 0% ke nilai aktual dengan transisi CSS smooth.

Author Chips

Setiap penulis yang pernah publish post di blog ditampilkan sebagai chip dengan avatar bulat, nama, dan jumlah postingan. Avatar diambil dari data profil Google penulis. Kalau avatar tidak tersedia, chip menampilkan inisial huruf pertama nama penulis. Kalau tampilkanLinkPenulisSitemapbyHHC aktif, chip bisa diklik untuk buka profil penulis.

Cache Age Ticker Real-time

Di sebelah tombol "Perbarui Cache" ada penghitung usia cache dalam format HH.MM.SS yang bergerak setiap detik. Ini memberitahu pengguna kapan data terakhir diperbarui — transparansi informasi yang jarang ada di sitemap lain.

Manfaat & Kebaruan

Buat blogger sendiri, section statistik ini berguna banget untuk memantau apakah distribusi konten sudah sesuai rencana. Kalau label "Tutorial" punya 5x lebih banyak post dari label "Review", itu sinyal untuk menyeimbangkan konten ke depannya.

Buat pengunjung, statistik ini memberikan gambaran cepat tentang skala dan fokus blog sebelum mereka mulai explore — membangun credibility secara visual.

Cache System: Loading Sekali, Cepat Selamanya

Apa Itu

Cache system adalah mekanisme penyimpanan data post ke localStorage browser setelah fetch pertama berhasil. Tujuannya satu: agar sitemap tidak perlu fetch ulang data dari Blogger API setiap kali halaman dibuka.

Kode yang Relevan

// Di konfigurasi
cacheExpirySitemapbyHHC: 21600000,
autoCacheRefreshSitemapbyHHC: true,

// Key localStorage yang digunakan
const CK  = "smHHCv43data"; // Key untuk data post & pages
const CTK = "smHHCv43ts";   // Key untuk timestamp cache

// Fungsi cache
function saveCache()  { ... } // Simpan data ke localStorage
function loadCache()  { ... } // Baca dan validasi cache
function clearCache() { ... } // Hapus cache

Penjelasan Cara Kerja

Alur kerja cache sistem dari awal sampai akhir:

// 1. init() dipanggil
const cached = loadCache();

// 2. Tidak ada cache — mulai fetch
if (!cached) {
  // Tampilkan preloader
  // Fetch semua post dari API (bisa makan waktu)
  // Parse dan simpan ke ST.posts & ST.pages
  saveCache(); // Simpan ke localStorage
  render();    // Render UI
}

// 1. init() dipanggil
const cached = loadCache();

// 2. Cache ditemukan dan belum expired
if (cached) {
  ST.posts = cached.posts;
  ST.pages = cached.pages;
  ST.loaded = true;
  
  render(); // Render langsung — instant!
  
  // Optional: auto refresh di background
  if (autoCacheRefreshSitemapbyHHC && cacheExpired) {
    setTimeout(() => silentRefresh(), 2000);
  }
}

Data yang Disimpan di Cache

Setiap post dan halaman disimpan dalam format yang sudah di-parse dan siap pakai, termasuk: judul, URL, tanggal publish, tanggal update, labels, nama penulis, URL avatar, URL profil, jumlah komentar, deskripsi, dan URL thumbnail.

Tanggal disimpan sebagai ISO string dan dikonversi kembali ke objek Date saat dibaca — sehingga sorting berdasarkan tanggal tetap akurat.

Cara Penggunaan

Tidak perlu setup manual — cache otomatis bekerja selama kode sitemap aktif. Data langsung tersimpan setelah fetch pertama berhasil.

Sesuaikan durasi cache sesuai frekuensi update blog:

// Blog update harian
cacheExpirySitemapbyHHC: 86400000,  // 24 jam

// Blog update beberapa kali sehari
cacheExpirySitemapbyHHC: 3600000,   // 1 jam

// Blog yang jarang update
cacheExpirySitemapbyHHC: 604800000, // 7 hari

Perbarui cache manual kapanpun dengan klik tombol "Perbarui Cache" di section statistik. Ini berguna ketika baru saja publish post baru dan ingin sitemap langsung menampilkannya.
Auto refresh — dengan autoCacheRefreshSitemapbyHHC: true, saat cache sudah expired, refresh akan terjadi diam-diam di background. Pengguna tidak melihat loading apapun — UI tetap responsif menggunakan data cache lama sambil data baru di-fetch.

Manfaat & Kebaruan

Mayoritas sitemap Blogger yang ada mengambil data dari API setiap kali halaman dibuka. Untuk blog dengan 300 post misalnya, ini berarti 6-7 request API setiap satu page view — lambat dan boros bandwidth.

Dengan cache system ini, 300 request API itu hanya terjadi sekali setiap 6 jam (atau durasi yang dikonfigurasi). Semua request berikutnya langsung dari memori lokal dalam hitungan milidetik — tidak peduli seberapa banyak postingan blog kamu.

Smart Search: Bukan Sekadar Kolom Cari

Apa Itu

Fitur pencarian di Sitemap HHC menggunakan sistem token parser yang bisa memahami query kompleks — bukan hanya teks biasa. Satu kolom pencarian bisa sekaligus filter berdasarkan tahun, label, nama penulis, dan kata kunci bebas, bahkan dikombinasikan.

Note Gambar: Sisipkan screenshot search bar dengan token chips aktif — contoh query "2024, Tutorial, @HanHaoyu" dengan chips berwarna berbeda di bawah input.

Kode yang Relevan

// Fungsi utama token parser
function parseSearchTokens(raw) {
  // Pisah query berdasarkan koma
  const tokens = raw.split(",").map(t => t.trim()).filter(Boolean);
  
  // Klasifikasikan setiap token
  for (const tok of tokens) {
    if (/^(\d{4})(\/\d{4})*$/.test(tok))  // Deteksi tahun: "2024" atau "2023/2024"
      years.push(...)
    
    if (tok.startsWith("@"))              // Deteksi penulis: "@HanHaoyu"
      authorFilters.push(...)
    
    if (parts.length > 1)                 // Deteksi multi-label: "CSS/JavaScript"
      labelFilters.push(...)
    
    // Cocokkan dengan daftar label dan author yang ada
    if (allLabelsLower.includes(tl)) labelFilters.push(tl)
    else if (allAuthorsLower.includes(tl)) authorFilters.push(tl)
    else textParts.push(tl)              // Fallback: pencarian teks bebas
  }
  
  return { years, labelFilters, authorFilters, textParts };
}

Penjelasan Token Types

Token Type	Chip Color	Contoh Input	Fungsi
Tahun	Hijau	`2024`	Filter post yang published tahun 2024
Multi-tahun	Hijau	`2023/2024`	Filter post di tahun 2023 atau 2024
Label	Ungu	`Tutorial`	Filter post dengan label "Tutorial"
Multi-label	Ungu	`CSS/JavaScript`	Filter post dengan label CSS atau JavaScript
Penulis	Oranye	`@HanHaoyu`	Filter post dari penulis "HanHaoyu"
Teks bebas	Biru	`dark mode`	Cari teks di judul dan deskripsi post

Cara Penggunaan

Ketik query di kolom pencarian. Pisahkan beberapa filter dengan koma. Sistem langsung memfilter kartu post saat kamu mengetik (debounced 200ms untuk performa).

Contoh Query Sederhana

Tutorial

Menampilkan semua post dengan label "Tutorial" atau yang judulnya mengandung kata "Tutorial".

Contoh Query Kombinasi

2024, Tutorial

Menampilkan post di tahun 2024 yang juga punya label "Tutorial". Kedua kondisi harus terpenuhi.

Contoh Query Kompleks

2023/2024, JavaScript/CSS, @HanHaoyu

Menampilkan post dari penulis HanHaoyu, di tahun 2023 atau 2024, dengan label JavaScript atau CSS.

Contoh Pencarian Teks Bebas

cloudflare worker

Mencari post yang judulnya atau deskripsinya mengandung kata "cloudflare worker". Kata kunci diwarnai kuning (highlight) di hasil pencarian.

Untuk menghapus pencarian, klik ikon X di sisi kanan kolom pencarian, atau hapus manual teks di input.

Manfaat & Kebaruan

Token parser ini adalah fitur yang paling membedakan Sitemap HHC dari sitemap Blogger lainnya. Kebanyakan sitemap hanya punya pencarian teks biasa yang mencocokkan karakter satu per satu. Sistem token ini memungkinkan pencarian yang jauh lebih presisi dan ekspresif dalam satu kolom yang sama.

Dan karena seluruh filtering terjadi client-side dari data yang sudah di-cache, tidak ada request API baru saat pencarian — semuanya instan, tidak peduli seberapa kompleks query-nya.

Label Panel: Navigasi Konten Berdasarkan Kategori

Apa Itu

Label panel adalah section yang bisa dibuka-tutup, menampilkan seluruh label yang ada di blog beserta jumlah post, persentase terhadap total, dan progress bar visual. Setiap label bisa diklik untuk langsung memfilter kartu post.

Note Gambar: Sisipkan screenshot label panel dalam tampilan Grid View — tunjukkan susunan label chips dengan bar progress dan angka.

Kode yang Relevan

// Toggle label panel
ST.labelsOpen = !ST.labelsOpen;
render(); // Re-render untuk tampilkan/sembunyikan panel

// Saat label diklik
a.addEventListener("click", e => {
  e.preventDefault();
  ST.selLabel = name;   // Simpan label yang dipilih
  ST.view = "posts";    // Pastikan tab Postingan aktif
  ST.page = 1;          // Reset ke halaman pertama
  ST.labelsOpen = false; // Tutup panel
  ST.q = "";            // Clear search query
  render();
});

Penjelasan Cara Kerja

Label panel dirender dari object ST.labels yang sudah dibangun saat data post selesai diproses. Label diurutkan dari yang paling banyak postnya ke yang paling sedikit. Setiap item label menampilkan:

Nama label
Jumlah post dengan label itu
Persentase dari total post (count / totalPosts * 100)
Progress bar yang lebar-nya proporsional dengan persentase tersebut

Bar progress dianimasikan dengan CSS transition — saat panel terbuka, semua bar mulai dari 0% dan naik ke nilai aktual secara bersamaan.

Cara Penggunaan

Klik tombol "Label (X)" di controls bar untuk membuka panel. X adalah jumlah total label unik yang ada di blog.
Di pojok kanan panel ada toggle Grid / List untuk mengubah tampilan label dari grid chip menjadi daftar vertikal. Tampilan list lebih nyaman untuk blog dengan banyak label panjang.
Klik nama label manapun untuk langsung filter post berdasarkan label itu. Panel otomatis tertutup dan kartu post terupdate.
Label yang sedang aktif muncul sebagai chip berwarna ungu di bawah controls bar. Klik chip itu untuk menghapus filter label.

Catatan Label panel filter dan token search berjalan terpisah. Saat kamu mengaktifkan filter label via panel, token search otomatis dikosongkan — dan sebaliknya. Ini mencegah konflik filter yang membingungkan.

Manfaat & Kebaruan

Panel label yang informatif dengan progress bar visual bukan hanya berguna untuk pengunjung — ini juga tools self-monitoring yang bagus untuk blogger sendiri. Sekilas pandang, kamu langsung tahu label mana yang over-represented dan mana yang kurang konten.

Grid Layout Picker: Tampilan yang Bisa Disesuaikan

Apa Itu

Grid picker memungkinkan pengunjung memilih tampilan kartu post dalam 1, 2, 3, atau 4 kolom. Setiap ukuran grid juga punya jumlah item per halaman yang berbeda, dikonfigurasi dari blok konfigurasi.

Note Gambar: Sisipkan 4 screenshot berdampingan yang menunjukkan tampilan grid 1, 2, 3, dan 4 kolom.

Kode yang Relevan

// Di konfigurasi
itemsPerPageGridSitemapbyHHC: {1:10, 2:20, 3:24, 4:32},

// Grid picker di controls bar
[1,2,3,4].forEach(g => {
  btn.addEventListener("click", () => {
    ST.grid = g;    // Update state grid
    ST.page = 1;    // Reset ke halaman pertama
    renderPostsOnly();      // Render ulang hanya grid
    _updateGridPicker();    // Update tombol aktif
  });
});

// CSS class yang di-apply ke grid container
// g1HHC, g2HHC, g3HHC, g4HHC

Behavior Per Ukuran Grid

Grid	Kolom	Item per Halaman	Layout Kartu	Cocok Untuk
1	1 kolom	10 (default)	Horizontal — thumbnail kiri, teks kanan	Baca deskripsi panjang, mirip feed blog
2	2 kolom	20 (default)	Vertikal — thumbnail atas, teks bawah	Balance antara visual dan teks
3	3 kolom	24 (default)	Vertikal	Browsing yang lebih cepat
4	4 kolom	32 (default)	Vertikal — teks lebih kompak	Scan banyak konten sekaligus

Responsive Behavior

Di layar mobile (lebar <500px), semua ukuran grid otomatis collapse ke 1 kolom. Di layar tablet (500–900px), grid 3 dan 4 kolom otomatis jadi 2 kolom. Ini ditangani murni oleh CSS media query — tidak ada JavaScript yang terlibat untuk responsive behavior.

Cara Penggunaan

Klik salah satu dari empat ikon grid di pojok kanan controls bar untuk switch tampilan. Perubahan langsung terlihat tanpa reload halaman. Pilihan grid tidak tersimpan di cache — setiap session dimulai dengan grid default berdasarkan lebar layar.

Manfaat & Kebaruan

Memberikan kontrol tampilan ke pengunjung adalah sesuatu yang jarang ada di sitemap manapun. Pengunjung yang ingin quick-scan bisa pilih grid 4, yang ingin baca deskripsi panjang bisa pilih grid 1. Ini menghormati preferensi pengguna yang berbeda-beda.

Sorting: Urut Post Sesuai Kebutuhan

Apa Itu

Fitur sorting memungkinkan pengunjung mengurutkan post berdasarkan tiga metode: terbaru, terlama, atau alfabet. Sorting bisa dikombinasikan dengan filter pencarian dan label secara bersamaan.

Kode yang Relevan

// Di konfigurasi
defaultSortSitemapbyHHC: "published",

// Fungsi getFiltered()
if (ST.sort === "alpha")   return s.sort((a, b) => a.title.localeCompare(b.title, "id"));
if (ST.sort === "oldest")  return s.sort((a, b) => a.published - b.published);
return s.sort((a, b) => b.published - a.published); // Default: terbaru

Pilihan Sorting

Nilai	Label di UI	Keterangan
`published`	Terbaru	Post yang paling baru dipublish muncul paling atas. Default dan paling umum digunakan
`oldest`	Terlama	Post paling lama muncul paling atas. Berguna untuk konten berseri yang harus dibaca dari awal
`alpha`	A-Z	Urut berdasarkan judul alfabet, locale Indonesia (`id`). Berguna untuk konten referensi atau glosarium

Cara Penggunaan

Klik salah satu dari tiga pill button di controls bar: "Terbaru", "Terlama", atau "A-Z". Perubahan langsung terjadi dan pagination direset ke halaman pertama. Untuk mengubah urutan default saat sitemap pertama dibuka, edit parameter ini di konfigurasi:

defaultSortSitemapbyHHC: "alpha",

Manfaat & Kebaruan

Untuk blog kursus atau tutorial berseri, opsi "Terlama" sangat berguna — pengunjung baru yang ingin mulai dari nol bisa langsung set ke mode ini dan baca dari artikel pertama yang pernah ditulis. Tanpa fitur ini, mereka harus scroll sampai halaman terakhir pagination.

Tab Postingan & Halaman

Apa Itu

Sitemap HHC memisahkan tampilan Postingan (post reguler blog) dan Halaman (static pages seperti About, Contact, Portfolio) ke dalam dua tab yang bisa di-switch. Masing-masing tab punya data, filter, dan pagination sendiri.

Kode yang Relevan

// Di konfigurasi
tampilkanTabPostSitemapbyHHC: true,
tampilkanTabHalamanSitemapbyHHC: true,

// State aktif
ST.view = "posts" | "pages"

// Pengambilan data
const [posts, pages] = await Promise.all([
  fetchAllPosts(),  // Dari /feeds/posts/default
  fetchAllPages()   // Dari /feeds/pages/default
]);

Cara Penggunaan

Klik tab "Postingan" atau "Halaman" di bagian kiri controls bar untuk switch view. State pencarian, label aktif, dan sort akan di-reset saat berpindah tab.

Setting default — kedua tab muncul di controls bar. Pengunjung bisa switch antara post dan halaman statis.

tampilkanTabPostSitemapbyHHC: true,
tampilkanTabHalamanSitemapbyHHC: true,

Sembunyikan tab Halaman — sitemap hanya menampilkan postingan blog. Cocok untuk blog yang tidak punya banyak halaman statis berarti.

tampilkanTabPostSitemapbyHHC: true,
tampilkanTabHalamanSitemapbyHHC: false,

Karena hanya ada satu tab, tab selector tidak akan muncul di controls bar — UI jadi lebih bersih.

Sembunyikan tab Post — sitemap hanya menampilkan halaman statis. Use case ini jarang, tapi bisa berguna untuk halaman khusus yang ingin menampilkan daftar halaman saja.

tampilkanTabPostSitemapbyHHC: false,
tampilkanTabHalamanSitemapbyHHC: true,

Manfaat & Kebaruan

Pemisahan post dan pages ini penting karena keduanya memiliki karakteristik yang sangat berbeda. Postingan biasanya banyak dan butuh fitur pencarian, filter label, dan sorting. Halaman statis biasanya sedikit dan tidak punya label. Dengan memisahkan keduanya, pengalaman browsing di tiap tab bisa dioptimalkan sesuai karakteristik kontennya.

Kartu Post: Semua Informasi yang Kamu Butuhkan

Apa Itu

Setiap postingan blog ditampilkan sebagai kartu (card) dengan informasi lengkap: thumbnail, nama penulis, avatar, judul, deskripsi, tanggal publish, tanggal update (jika berbeda lebih dari 1 hari), jumlah komentar, label, dan tombol salin.

Note Gambar: Sisipkan screenshot satu kartu post lengkap dengan semua elemen ditandai (labeled) — thumbnail, avatar, author, judul, deskripsi, tanggal, label tags, tombol salin.

Kode yang Relevan

function mkCard(p, q) {
  // p = data post, q = query search aktif untuk highlight
  
  // 1. Thumbnail dengan overlay gradient
  // 2. Avatar + nama penulis (dengan link jika aktif)
  // 3. Judul (link ke post) + tombol salin
  // 4. Deskripsi (dengan highlight jika ada query)
  // 5. Divider
  // 6. Tanggal publish, tanggal update, jumlah komentar
  // 7. Label tags (horizontal scroll jika banyak)
  
  return card; // Elemen DOM lengkap
}

Penjelasan Komponen Kartu

Thumbnail Otomatis

Sistem mencari thumbnail dengan prioritas ini:

Cek media$thumbnail di metadata Blogger (paling akurat, langsung dari Blogger)
Parse tag <img> pertama dari konten HTML post
Gunakan defaultImageSitemapbyHHC sebagai fallback

Semua URL thumbnail yang ditemukan dari media$thumbnail otomatis di-resize ke /s720/ untuk balance antara kualitas dan kecepatan loading.

Deskripsi dengan Fallback

Deskripsi di kartu menggunakan prioritas: pertama cek summary.$t dari Blogger API (ini biasanya isi dari paragraf pertama setelah jump break), lalu fallback ke konten HTML post yang di-strip dari semua tag HTML. Panjang deskripsi dibatasi oleh parameter jumlahKataDeskripsiSitemapbyHHC.

Highlight Kata Kunci

Saat pencarian teks aktif, kata kunci yang ditemukan di judul dan deskripsi otomatis di-highlight dengan background kuning. Ini dilakukan oleh fungsi hl(text, q) yang menggunakan regex replace untuk membungkus kata kunci dengan tag <mark class="hlHHC">.

Label Tags Horizontal Scroll

Jika satu post punya banyak label, tag-tag itu ditampilkan dalam satu baris yang bisa di-scroll secara horizontal. Scrollbar disembunyikan via CSS tapi fungsionalitasnya tetap ada. Ini menjaga tinggi kartu tetap konsisten.

Tanggal Update Kondisional

Tanggal update hanya ditampilkan jika perbedaan antara published dan updated lebih dari 86.400.000 ms (1 hari). Ini menghindari tampilan tanggal ganda yang sama persis — yang terjadi jika Blogger mencatat waktu publish dan update dalam waktu berdekatan.

Manfaat & Kebaruan

Kartu post yang informatif mengurangi kebutuhan pengunjung untuk klik dan buka artikel hanya untuk cek relevansinya. Dengan melihat thumbnail, deskripsi, label, dan tanggal sekaligus dalam satu kartu, pengunjung bisa memutuskan lebih cepat apakah artikel itu yang mereka cari.

Tombol Salin Per Kartu: Share Info Post dengan Satu Klik

Apa Itu

Setiap kartu post punya tombol salin kecil di pojok kanan atas area judul. Satu klik akan menyalin informasi lengkap post tersebut ke clipboard dalam format yang sudah dikonfigurasi.

Note Gambar: Sisipkan screenshot perbandingan output tiga format: chat (markdown), plain (teks biasa), dan JSON.

Kode yang Relevan

// Di konfigurasi
formatSalinSitemapbyHHC: "chat", // Pilih format output

function formatCopyText(p) {
  const fmt2 = CFG.formatSalinSitemapbyHHC;
  
  if (fmt2 === "json") {
    return JSON.stringify({
      judul, penulis, url, website, tanggal_publish,
      tanggal_update, label: [{nama, url}], jumlah_komentar, deskripsi
    }, null, 2);
  }
  
  if (fmt2 === "plain") {
    return [
      "Judul: ...", "Penulis: ...", "URL: ...",
      "Diterbitkan: ...", "Label:\n  ...", "Deskripsi:\n..."
    ].join("\n");
  }
  
  // Format "chat" — Telegram/WhatsApp markdown
  return [
    "*Judul Post*", "", "*Penulis:* ...",
    "*URL:* ...", "*Label:* [Label](url)",
    "", "*Deskripsi:*", "> baris deskripsi..."
  ].join("\n");
}

Contoh Output Per Format

*Cara Install Cloudflare Worker di Blogger*

*Penulis:* Han Haoyu
*URL:* https://hanhaoyu.com/p/cloudflare-worker.html
*Diterbitkan:* 15 Jan 2024
*Label:* [Tutorial](https://hanhaoyu.com/search/label/Tutorial), [Blogger](https://hanhaoyu.com/search/label/Blogger)
*Komentar:* 12

*Deskripsi:*
> Panduan lengkap instalasi Cloudflare Worker untuk blog Blogger,
> mulai dari setup akun hingga deploy worker pertama kamu...

Judul: Cara Install Cloudflare Worker di Blogger
Penulis: Han Haoyu
URL: https://hanhaoyu.com/p/cloudflare-worker.html
Diterbitkan: 15 Jan 2024
Label:
  Tutorial (https://hanhaoyu.com/search/label/Tutorial)
  Blogger (https://hanhaoyu.com/search/label/Blogger)
Komentar: 12

Deskripsi:
Panduan lengkap instalasi Cloudflare Worker untuk blog Blogger...

{
  "judul": "Cara Install Cloudflare Worker di Blogger",
  "penulis": "Han Haoyu",
  "url": "https://hanhaoyu.com/p/cloudflare-worker.html",
  "website": "https://hanhaoyu.com",
  "tanggal_publish": "15 Jan 2024",
  "tanggal_update": "20 Jan 2024",
  "label": [
    { "nama": "Tutorial", "url": "https://hanhaoyu.com/search/label/Tutorial" },
    { "nama": "Blogger", "url": "https://hanhaoyu.com/search/label/Blogger" }
  ],
  "jumlah_komentar": 12,
  "deskripsi": "Panduan lengkap instalasi Cloudflare Worker..."
}

Cara Penggunaan

Hover ke kartu post yang ingin disalin, lalu klik ikon copy di pojok kanan atas area judul. Toast notification hijau akan muncul sebentar di bagian bawah layar sebagai konfirmasi. Tombol berubah menjadi ikon centang selama beberapa detik, lalu kembali ke ikon copy.

Manfaat & Kebaruan

Fitur ini sangat berguna untuk content curator, admin komunitas, atau siapapun yang sering share link artikel ke grup WhatsApp atau Telegram. Daripada copy judul manual, buka link, copy deskripsi, ketik labelnya — semua informasi siap dalam satu klik dengan format yang sudah rapi.

Bulk Copy: Salin Banyak Post Sekaligus

Apa Itu

Bulk copy memungkinkan penyalinan informasi banyak post sekaligus — baik post yang ada di halaman pagination aktif saja, maupun seluruh post dari hasil filter. Output berformat daftar bernomor yang siap di-paste ke dokumen, channel Telegram, atau tools lainnya.

Kode yang Relevan

// Di konfigurasi
tampilkanSalinHalamanIniSitemapbyHHC: true,
tampilkanSalinSemuaPostSitemapbyHHC: true,

function formatBulkCopy(items, scope) {
  const header = `*Daftar Postingan — ${BASE}*\n_Disalin: ${now}_ | _Total: ${items.length}_\n`;
  const divider = "===".repeat(10);
  
  const lines = items.map((p, i) => [
    `*${i+1}. ${p.title}*`,
    `${p.url}`,
    `_${fmt(p.published)}_ | ${labels}`
  ].join("\n"));
  
  return `${header}\n${divider}\n${lines.join("\n"+divider+"\n")}\n${divider}`;
}

Perbedaan "Halaman Ini" vs "Salin Semua"

Tombol	Scope	Kapan Digunakan
Halaman Ini	Post di halaman pagination aktif saja (misalnya 24 dari 300 post)	Ketika hanya butuh sebagian post yang sedang ditampilkan
Salin Semua	Seluruh post dari hasil filter aktif, semua halaman pagination	Ketika butuh semua post — baik yang difilter maupun tidak

Catatan: Tombol "Salin Semua" akan menyalin seluruh hasil filter, bukan semua post blog. Jadi kalau search sedang aktif dengan filter "Tutorial, 2024", hanya post Tutorial 2024 yang ikut tersalin — bukan semua 300 post.

Cara Penggunaan

Aktifkan filter yang diinginkan terlebih dahulu (opsional).
Klik tombol berlabel "Halaman Ini" untuk salin post di halaman aktif, atau klik "Salin Semua" untuk seluruh hasil filter.
Toast notification akan muncul dengan konfirmasi berapa post berhasil disalin.
Paste hasil salinan ke dokumen, grup chat, atau tools apapun yang kamu butuhkan.

Manfaat & Kebaruan

Fitur ini secara khusus berguna untuk blogger yang mengelola newsletter, admin channel Telegram, atau siapapun yang butuh membuat rekap konten blog secara rutin. Yang biasanya makan waktu berjam-jam (buka satu per satu, copy judul dan URL) bisa diselesaikan dalam hitungan detik.

Floating Pagination: Navigasi yang Tidak Menyiksa

Apa Itu

Pagination di Sitemap HHC tidak diletakkan di bawah grid kartu seperti biasanya — melainkan mengambang (floating) di bagian bawah layar. Artinya, tombol navigasi halaman selalu terlihat dan bisa diklik kapanpun, tanpa perlu scroll ke bawah dulu.

Note Gambar: Sisipkan screenshot pagination floating yang menempel di bagian bawah viewport, dengan background blur glassmorphism.

Kode yang Relevan

// Pagination dirender ke document.body, bukan ke dalam grid
document.body.appendChild(pgWrap);

// Tombol navigasi yang dibuat
mkPB(prevSvg, isFirstPage, false, () => {
  ST.page--;
  renderPostsOnly();
  scrollToTop(); // Scroll ke atas area sitemap
});

// Smart page number display
// Selalu tampilkan: halaman pertama, 2 halaman di kiri-kanan aktif,
// halaman terakhir, dengan "..." untuk gap
let ps = Math.max(1, ST.page - 2);
let pe = Math.min(totalPgs, ps + maxShow - 1);

Cara Kerja Pagination

Pagination menggunakan algoritma "smart range" yang selalu menampilkan maksimum 5 nomor halaman sekaligus — halaman aktif di tengah dengan 2 halaman di kiri dan kanannya. Halaman pertama dan terakhir selalu ditampilkan. Gap antara range dan tepi menggunakan elipsis ....

Contoh navigasi untuk 10 halaman saat di halaman 5:

« 1 ... 3 4 [5] 6 7 ... 10 »

Saat ganti halaman, fungsi scrollToTop() otomatis men-scroll browser ke bagian atas area sitemap — sehingga pengunjung langsung melihat kartu-kartu baru tanpa harus scroll manual.

Manfaat & Kebaruan

Pagination konvensional di bawah konten mengharuskan pengunjung scroll sampai bawah halaman untuk pindah halaman, lalu scroll ke atas lagi untuk mulai baca dari awal. Dengan floating pagination, proses itu jadi dua klik saja — klik nomor halaman, selesai. Scroll otomatis ditangani oleh sistem.

Dark Mode Otomatis

Apa Itu

Sitemap HHC secara otomatis mengikuti dark mode dari tema Blogger yang digunakan. Tidak ada toggle manual, tidak ada setting tambahan — sitemap mendeteksi apakah dark mode aktif dan langsung mengaplikasikan semua styling dark yang sudah disiapkan.

Kode yang Relevan

/* Semua variasi dark mode menggunakan selector .drK */

.drK .statsHHC {
  background: rgba(18, 20, 38, .78);
  border-color: rgba(255, 255, 255, .09);
}

.drK .pcardHHC {
  background: rgba(18, 20, 38, .75);
  border-color: rgba(255, 255, 255, .09);
}

/* Dan seterusnya untuk setiap komponen */

Penjelasan Cara Kerja

Seluruh styling dark mode menggunakan descendant selector .drK. Ini berarti CSS dark mode hanya aktif kalau ada elemen dengan class drK di DOM yang merupakan ancestor dari elemen sitemap.

Pada tema Blogger HHC, class drK otomatis ditambahkan ke <html> atau <body> saat dark mode aktif. Karena sitemap berada di dalam body, seluruh selector .drK .elemenSitemap langsung aktif.

Cara Penggunaan

Untuk pengguna tema Blogger HHC — tidak perlu melakukan apapun. Dark mode sitemap mengikuti setting dark mode tema secara otomatis.

Untuk pengguna tema Blogger lain — pastikan tema kamu menambahkan class drK ke elemen root saat dark mode aktif. Kalau tema menggunakan nama class berbeda (misalnya dark-mode atau night), perlu sedikit modifikasi pada CSS sitemap untuk mengganti selector .drK dengan nama class yang sesuai.

Manfaat & Kebaruan

Banyak sitemap yang hanya tersedia dalam satu mode dan tampak "out of place" di tema dark. Dengan dark mode yang terintegrasi dan otomatis, sitemap ini terasa seperti bagian organik dari tema — bukan widget yang ditempel dari luar.

Hidden Labels: Konten Tersembunyi yang Cerdas

Apa Itu

Fitur hidden labels memungkinkan kamu menyembunyikan post dengan label tertentu dari tampilan kartu sitemap — tanpa menghapusnya dari blog, dan tanpa mengubah angka statistik total postingan.

Kode yang Relevan

// Di konfigurasi
sembunyikanLabelSitemapbyHHC: ["VIP", "Premium", "Draft"],

// Konversi ke lowercase untuk perbandingan case-insensitive
const HIDDEN_LABELS = (CFG.sembunyikanLabelSitemapbyHHC || []).map(l => l.toLowerCase());

// Fungsi cek apakah post disembunyikan
function isHidden(p) {
  if (!HIDDEN_LABELS.length) return false;
  return p.labels.some(l => HIDDEN_LABELS.includes(l.toLowerCase()));
}

// Diaplikasikan di awal getFiltered()
let s = arr.filter(p => !isHidden(p));

Yang Perlu Dipahami

Perhatian

Hidden labels hanya menyembunyikan post dari tampilan kartu sitemap. Post tersebut:

Masih dapat diakses lewat URL langsung
Masih dihitung dalam statistik total postingan (angka dari API)
Masih muncul di pencarian Google
Masih bisa ditemukan melalui halaman label di Blogger

Ini bukan fitur keamanan — ini fitur kurasi tampilan. Untuk proteksi akses konten yang sesungguhnya, gunakan fitur membership atau paywall yang terpisah.

Cara Penggunaan

// Sembunyikan post dengan label tertentu
sembunyikanLabelSitemapbyHHC: ["VIP", "Draft", "Internal"],

// Array kosong = tidak ada yang disembunyikan (default)
sembunyikanLabelSitemapbyHHC: [],

Nama label di array tidak case-sensitive — "vip" dan "VIP" dan "Vip" akan menyembunyikan post yang sama.

Manfaat & Kebaruan

Use case yang paling umum: blog dengan konten freemium. Post "reguler" tampil di sitemap, post "VIP" disembunyikan dari sitemap tapi pengunjung premium yang tahu URL langsung tetap bisa akses. Ini menciptakan nuansa "ada konten eksklusif" tanpa harus membangun sistem gating yang rumit.

Shimmer Skeleton: Loading yang Tidak Membosankan

Apa Itu

Shimmer skeleton adalah placeholder animasi yang muncul di area grid post saat data sedang dimuat — baik saat fetch pertama (jika preloader dinonaktifkan) maupun saat switch halaman yang cepat. Bentuknya menyerupai kartu post asli sehingga pengunjung sudah punya bayangan layout sebelum konten muncul.

Kode yang Relevan

function mkShimmer(n) {
  let h = "";
  for (let i = 0; i < n; i++)
    h += `
      <div class="shimCardHHC">
        <div class="shimHHC shimImgHHC" style="animation-delay:${i*.07}s"></div>
        <div class="shimBodyHHC">
          <div class="shimHHC shimLineHHC" style="width:50%"></div>
          <div class="shimHHC shimLineHHC" style="width:85%"></div>
          <div class="shimHHC shimLineHHC" style="width:70%"></div>
          <div class="shimHHC shimLineHHC" style="width:38%"></div>
        </div>
      </div>`;
  return h;
}

Cara Kerja Animasi Shimmer

Efek shimmer dibuat murni dengan CSS menggunakan background gradient yang bergerak dari kanan ke kiri secara loop:

.shimHHC {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.025) 50%,
    rgba(0,0,0,.06) 75%
  );
  background-size: 200% 100%;
  animation: shimMoveHHC 1.5s infinite;
}

@keyframes shimMoveHHC {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

Setiap kartu shimmer punya animation-delay yang berbeda — kartu kedua delay 0.07 detik, kartu ketiga 0.14 detik, dan seterusnya. Efeknya: shimmer terlihat bergelombang dari atas ke bawah, bukan semua bergerak bersamaan. Lebih organik dan enak dilihat.

Kapan Shimmer Muncul

Saat preloaderSitemapbyHHC: false dan data belum ada
Saat state ST.loaded = false dan ST.fetching = true

Manfaat & Kebaruan

Penelitian UX menunjukkan bahwa pengguna mempersepsi waktu loading sebagai lebih cepat ketika ada konten placeholder yang berbentuk seperti konten asli, dibandingkan spinner kosong. Ini yang disebut "perceived performance" — kecepatan yang dirasakan, bukan kecepatan aktual. Shimmer skeleton adalah implementasi langsung dari prinsip ini.

Toast Notification: Feedback Visual yang Tidak Ganggu

Apa Itu

Toast notification adalah pesan kecil yang muncul sebentar di bagian bawah layar sebagai konfirmasi setelah aksi copy berhasil dilakukan. Muncul otomatis, lalu menghilang sendiri tanpa perlu interaksi dari pengguna.

Kode yang Relevan

function showToast(msg) {
  const t = document.getElementById("copyToastHHC");
  t.textContent = msg || "Disalin!";
  t.classList.add("showHHC");    // Trigger animasi masuk
  setTimeout(() => t.classList.remove("showHHC"), 2200); // Auto hilang
}

Kapan Toast Muncul

Aksi	Pesan Toast
Klik tombol salin kartu post	"Info postingan berhasil disalin!"
Klik bulk copy "Halaman Ini"	"X postingan halaman ini disalin!"
Klik bulk copy "Salin Semua"	"Semua X postingan berhasil disalin!"
Bulk copy — tidak ada post	"Tidak ada postingan di halaman ini" / "Tidak ada postingan untuk disalin"

Manfaat & Kebaruan

Toast notification menyelesaikan "feedback loop" dari aksi pengguna. Tanpa konfirmasi visual, pengguna tidak tahu apakah aksi copy-nya berhasil atau tidak — yang berujung pada klik berulang yang membingungkan. Toast yang simple dan tidak mengganggu (muncul di bawah, hilang sendiri) menyelesaikan masalah ini dengan elegan.

Penutup Panduan

Sampai di sini, kamu sudah tahu cara kerja dan cara pakai setiap fitur yang ada di Sitemap HHC v4.3 — dari konfigurasi dasar sampai nuansa teknis di balik layar. Panduan ini akan terus diperbarui seiring ada fitur baru atau perubahan di versi berikutnya.

Kalau ada pertanyaan soal fitur yang belum terjawab di panduan ini, atau kamu menemukan bug yang perlu dilaporkan, tinggalkan komentar di bawah. Setiap feedback yang masuk sangat membantu pengembangan ke depannya.

Panduan penggunaan ini adalah dokumentasi resmi Sitemap HHC v4.3 yang dibuat dan dikelola oleh Han Haoyu di hanhaoyu.com. Untuk pertanyaan, saran, atau laporan bug, gunakan kolom komentar di bawah.

Buka Sitemap HHC v4.3

Prefetch Manager

Switch Account (email)

Panduan Penggunaan Sitemap Han Haoyu Platform

Sebelum Mulai: Baca Ini Dulu

Live Demo

Blok Konfigurasi: Pusat Kendali Seluruh Fitur

Apa Itu

Kode

Penjelasan Per Parameter

Cara Penggunaan

Manfaat & Kebaruan

Preloader: Loading Experience yang Tidak Bikin Frustrasi

Apa Itu

Kode yang Relevan

Penjelasan Cara Kerja

Cara Penggunaan

Manfaat & Kebaruan

Statistik Konten: Dashboard Blog dalam Satu Pandang

Apa Itu

Kode yang Relevan

Penjelasan Cara Kerja

Cara Penggunaan

Komponen dalam Section Statistik

Manfaat & Kebaruan

Cache System: Loading Sekali, Cepat Selamanya

Apa Itu

Kode yang Relevan

Penjelasan Cara Kerja

Data yang Disimpan di Cache

Cara Penggunaan

Manfaat & Kebaruan

Smart Search: Bukan Sekadar Kolom Cari

Apa Itu

Kode yang Relevan

Penjelasan Token Types

Cara Penggunaan

Manfaat & Kebaruan

Label Panel: Navigasi Konten Berdasarkan Kategori

Apa Itu

Kode yang Relevan

Penjelasan Cara Kerja

Cara Penggunaan

Manfaat & Kebaruan

Grid Layout Picker: Tampilan yang Bisa Disesuaikan

Apa Itu

Kode yang Relevan

Behavior Per Ukuran Grid

Responsive Behavior

Cara Penggunaan

Manfaat & Kebaruan

Sorting: Urut Post Sesuai Kebutuhan

Apa Itu

Kode yang Relevan

Pilihan Sorting

Cara Penggunaan

Manfaat & Kebaruan

Tab Postingan & Halaman

Apa Itu

Kode yang Relevan

Cara Penggunaan

Manfaat & Kebaruan

Kartu Post: Semua Informasi yang Kamu Butuhkan

Apa Itu

Kode yang Relevan

Penjelasan Komponen Kartu

Manfaat & Kebaruan

Tombol Salin Per Kartu: Share Info Post dengan Satu Klik

Apa Itu

Kode yang Relevan

Contoh Output Per Format

Cara Penggunaan

Manfaat & Kebaruan

Bulk Copy: Salin Banyak Post Sekaligus

Apa Itu

Kode yang Relevan

Perbedaan "Halaman Ini" vs "Salin Semua"

Cara Penggunaan

Manfaat & Kebaruan

Floating Pagination: Navigasi yang Tidak Menyiksa

Apa Itu