Daftar Isi
Eh, Lo Nanya Sitemap Itu Apa? Sini Duduk Dulu ☕
Oke, jujur deh — kalau lo punya blog Blogger dan belum pernah pasang sitemap yang proper, rasanya kayak punya toko yang nggak ada papan namanya. Pengunjung nyasar. Google bingung. Dan lo sendiri nggak tau konten mana yang udah naik dan mana yang masih di-draft dari tahun kapan tau.
Nah, di sinilah Sitemap HHC v4.3 hadir — bukan cuma sebagai "daftar isi blog" yang membosankan kayak punya library kuno, tapi sebagai sebuah command center lengkap untuk seluruh konten blog lo. Dibuat dengan tangan sendiri (literally, baris demi baris) oleh Han Haoyu khusus untuk platform hanhaoyu.com, dan kini tersedia untuk seluruh pengguna Blogger yang mau blog-nya naik kelas.
Artikel ini adalah dokumentasi resmi + review jujur + tutorial lengkap dari fitur sitemap yang ada di website ini. Lo bakal nemuin penjelasan soal:
- Apa itu Sitemap HHC dan kenapa ia lahir ke dunia
- Fitur-fitur keren yang bikin dia beda dari sitemap biasa
- Panduan konfigurasi lengkap per baris kode
- Cara pakai yang mudah bahkan buat yang baru kenal Blogger
- Performa, SEO, dan UX design di balik layar
- Limitasi, use case, dan masa depan versi ini
Note untuk Gambar:
Sisipkan screenshot tampilan Sitemap HHC v4.3 di sini — tunjukkan tampilan desktop dengan grid 4 kolom, statistik, dan search bar aktif.
Jadi, kalau lo siap deep dive ke rabbit hole yang seru ini — scroll terus, brew your coffee, and let's get into it. 🚀
Apa Itu Sitemap HHC v4.3?
Sitemap HHC v4.3 adalah sebuah komponen antarmuka berbasis HTML + CSS + Vanilla JavaScript yang didesain khusus untuk blog berbasis Blogger (Blogspot). Tugasnya? Mengambil seluruh data post dan halaman dari Blogger Feeds API, lalu menampilkannya dalam format yang — izin istilah — luar biasa enak dilihat dan digunakan.
Bayangkan begini: blog lo punya 500 postingan. Gimana caranya pengunjung bisa nemuin artikel lama yang relevan? Gimana caranya mereka bisa filter berdasarkan label? Gimana lo sendiri bisa tau label mana yang paling banyak kontennya? Itulah masalah yang dipecahkan oleh sitemap ini.
Sitemap blog biasa biasanya hanya berupa daftar link membosankan — judul artikel, URL, dan tanggal. Tidak bisa dicari. Tidak bisa difilter. Tampilannya plain. Tidak ada statistik. Reload data setiap kali halaman dibuka. Ngantuk bacanya.
Pokoknya kayak baca koran tahun 90-an. Ada isinya, tapi tidak ada "wow"-nya.
Sitemap HHC v4.3 hadir dengan full-featured content explorer: pencarian real-time dengan token parser cerdas, statistik interaktif per label, grid layout yang bisa diubah (1-4 kolom), cache system buat performa, bulk copy per format (chat/plain/JSON), pagination mengambang, dark mode otomatis, dan banyak lagi.
Bukan sekadar "daftar isi" — ini adalah content management interface untuk pengunjung blog lo.
| Fitur | Sitemap Biasa | Sitemap HHC v4.3 |
|---|---|---|
| Pencarian konten | ❌ | ✅ Token-based |
| Filter label | ❌ | ✅ Panel interaktif |
| Statistik blog | ❌ | ✅ Real-time |
| Cache system | ❌ | ✅ 6 jam default |
| Bulk copy | ❌ | ✅ Chat/plain/JSON |
| Grid layout | ❌ | ✅ 1-4 kolom |
| Dark mode | ❌ | ✅ Otomatis |
| Pagination | Jarang | ✅ Floating |
| Thumbnail gambar | ❌ | ✅ Auto-extract |
| Info penulis | ❌ | ✅ Avatar + link |
Kenapa Sitemap Ini Dibuat? (The Origin Story)
Setiap tools yang lahir punya cerita. Dan cerita Sitemap HHC ini dimulai dari satu pertanyaan sederhana yang cukup mengganggu:
"Blog gue udah ratusan postingan — tapi kenapa pengunjung kayak nggak bisa nemuin apa yang mereka cari?"
Han Haoyu, suatu malam yang produktif
Plugin sitemap yang ada di luar sana kebanyakan punya masalah yang sama:
- Tampilannya outdated dan tidak mobile-friendly.
- Tidak ada fitur pencarian — padahal ini paling penting.
- Data di-reload terus dari API setiap halaman dibuka — lambat!
- Tidak ada statistik untuk memahami distribusi konten blog.
- Format salin kalau mau share postingan ke WhatsApp/Telegram masih manual.
- Tidak bisa menyembunyikan label tertentu (misalnya post VIP atau draft internal).
Jadi daripada nunggu orang lain bikin, ya bikin sendiri. Itu filosofinya. Dan versi 4.3 ini adalah hasil iterasi panjang dari v1, v2, v3 hingga akhirnya sampai di titik yang benar-benar production-ready dan feature-complete.
Fun Fact: Nama "HHC" itu singkatan dari Han Haoyu's Courses — branding original dari platform ini. Jadi tiap kali lo lihat suffix "HHC" di class name atau ID-nya, itu bukan random — itu tanda tangan sang kreator di dalam kodenya. Classy? We think so.
Overview Fitur: Ini Bukan Sitemap Biasa, Bro 💡
Sebelum masuk ke detail teknis, kita recap dulu semua fitur utama yang ada di Sitemap HHC v4.3. Siap-siap kagum.
🔍 Smart Search dengan Token Parser
Fitur pencarian di sini bukan sekadar "ketik dan filter". Ada token parser cerdas yang bisa memahami query kompleks seperti:
2024, Tutorial→ Filter post tahun 2024 dengan label "Tutorial"@HanHaoyu, CSS→ Cari post dari penulis HanHaoyu tentang CSS2023/2024, JavaScript→ Multi-tahun sekaligusdark mode→ Pencarian teks biasa di judul dan deskripsi
Setiap token dikodekan dengan warna berbeda: kuning untuk tahun, ungu untuk label, oranye untuk penulis, biru untuk teks bebas. Ini bukan hanya fungsional — ini juga sangat visual.
📊 Statistik Konten Real-Time
Section statistik menampilkan:
- Total Postingan — langsung dari API Blogger, bukan hitungan manual
- Total Halaman — termasuk halaman statis (About, Contact, dll)
- Total Label — berapa banyak kategori yang kamu punya
- Total Penulis — penting untuk blog multi-author
- Label Statistics — bar chart mini untuk label yang lo tentukan di konfigurasi
- Author Chips — avatar + nama + jumlah postingan per penulis
⚡ Cache System (LocalStorage)
Fetching ratusan post dari Blogger API itu lambat kalau dilakukan setiap kali halaman dibuka. Makanya ada cache system berbasis localStorage yang menyimpan data selama 6 jam (bisa dikonfigurasi).
Artinya: pengunjung pertama yang buka sitemap mungkin nunggu sebentar saat loading, tapi pengunjung berikutnya (atau kamu yang buka lagi) akan langsung melihat hasilnya instantaneously. Lengkap dengan penghitung usia cache real-time dalam format HH.MM.SS.
📋 Bulk Copy (Salin Massal)
Fitur yang jarang ada di sitemap manapun — lo bisa salin informasi post dalam bulk dengan 3 format berbeda:
chat— Format markdown Telegram/WhatsApp dengan bold, link, dan blockquote deskripsiplain— Format teks bersih untuk email atau dokumenjson— Format JSON lengkap untuk developer atau integrasi tools lain
Ada dua scope: Halaman Ini (hanya post di halaman pagination aktif) dan Salin Semua (seluruh hasil filter).
🎨 Responsive Grid Layout (1-4 Kolom)
Pengunjung bisa bebas pilih layout tampilan: 1, 2, 3, atau 4 kolom. Setiap grid punya jumlah item per halaman yang berbeda sesuai konfigurasi di itemsPerPageGridSitemapbyHHC. Di mobile, otomatis collapse ke 1 kolom. Grid 1 kolom bahkan punya layout horizontal (thumbnail di kiri, teks di kanan) buat konten-heavy experience.
🌙 Dark Mode Otomatis
Sitemap ini detect otomatis apakah tema Blogger lo menggunakan dark mode. Caranya dengan mengecek apakah class drK ada di elemen parent. Semua styling dark mode sudah dihandle via CSS — nggak perlu setup manual sama sekali.
🏷️ Label Panel & Hidden Labels
Ada panel label tersendiri yang bisa dibuka/tutup, menampilkan seluruh label blog beserta jumlah post, persentase dari total, dan progress bar visual. Klik label untuk filter post secara langsung.
Plus ada fitur sembunyikan label tertentu — post dengan label VIP, Premium, atau Draft tidak akan muncul di tampilan sitemap (tapi tetap dihitung di statistik total API).
Panduan Konfigurasi Lengkap: Setiap Baris Punya Arti
Ini adalah bagian yang paling krusial. Sebelum pasang sitemap ini di blog lo, lo wajib paham arti setiap baris konfigurasi. Karena salah isi satu baris aja, bisa bikin sitemap-nya error atau tidak sesuai ekspektasi.
Semua konfigurasi ada di satu blok <script> di bagian atas, dalam object bernama konfigurasiSitemapbyHHC.
URL & Data Fetching
linkwebsite: "homepageurl",
ambildatapostbloggerSitemapbyHHC: 0,
chunkSizeSitemapbyHHC: 50,
chunkDelayMsSitemapbyHHC: 300,| Parameter | Tipe | Default | Keterangan |
|---|---|---|---|
linkwebsite |
string |
"homepageurl" |
URL blog tanpa slash di akhir. Contoh: "https://hanhaoyu.com". Kalau dibiarkan default, otomatis pakai window.location.origin |
ambildatapostbloggerSitemapbyHHC |
number |
0 |
Batas maksimum post yang diambil. 0 berarti ambil semua. Berguna kalau blog punya ribuan post dan lo mau batasi untuk performa |
chunkSizeSitemapbyHHC |
number |
50 |
Jumlah post per request API. Maksimum 150. Nilai 50 adalah sweet spot antara kecepatan dan stabilitas |
chunkDelayMsSitemapbyHHC |
number |
300 |
Jeda antar request dalam milidetik. Berguna agar tidak membanjiri server Blogger dengan request beruntun yang bisa bikin rate limit |
Penting!
Jangan set chunkDelayMsSitemapbyHHC ke 0 kalau blog kamu punya lebih dari 200 post. Blogger API bisa error karena terlalu banyak request bersamaan. Minimal biarkan di 200 ms.
Cache System
cacheExpirySitemapbyHHC: 21600000,
autoCacheRefreshSitemapbyHHC: true,| Parameter | Tipe | Default | Keterangan |
|---|---|---|---|
cacheExpirySitemapbyHHC |
number |
21600000 |
Durasi cache dalam milidetik. 21.600.000 ms = 6 jam. Untuk blog yang jarang update, bisa dinaikkan ke 86.400.000 (24 jam). Untuk blog yang posting setiap jam, turunkan ke 3.600.000 (1 jam) |
autoCacheRefreshSitemapbyHHC |
boolean |
true |
Jika true, saat cache sudah expired, sistem akan otomatis refresh data di background tanpa preloader — pengunjung tidak terganggu sama sekali |
Tampilan Tab
tampilkanTabPostSitemapbyHHC: true,
tampilkanTabHalamanSitemapbyHHC: true,Dua toggle ini menentukan apakah tab Postingan dan/atau Halaman muncul di kontrol bar. Kalau blog lo tidak punya halaman statis yang berarti, set tampilkanTabHalamanSitemapbyHHC ke false untuk UI yang lebih bersih.
Sembunyikan Label Tertentu
sembunyikanLabelSitemapbyHHC: ["VIP", "Premium", "Draft"],Ini adalah fitur underrated yang sangat berguna. Post dengan label yang ada di array ini tidak akan muncul di tampilan kartu sitemap — tapi tetap dihitung di total statistik API. Jadi total postingan di cards statistik tetap akurat.
Use Case: Lo bisa pasang label "Premium" di post berbayar, dan pengunjung gratisan tidak akan lihat post itu di sitemap. Mereka tahu postingan itu eksis (dari jumlah total), tapi tidak tahu judulnya. Semacam teaser yang bikin penasaran.
Tampilan & UX
preloaderSitemapbyHHC: true,
statisticSitemapbyHHC: true,
showstatisticlabelSitemapbyHHC: ["News", "Course", "All Product"],
defaultSortSitemapbyHHC: "published",
jumlahKataDeskripsiSitemapbyHHC: 150,| Parameter | Keterangan |
|---|---|
preloaderSitemapbyHHC |
Saat true, layar penuh preloader dengan progress bar dan persentase akan muncul selama fetch data. Kalau ingin loading yang lebih subtle, set ke false — akan menggunakan shimmer skeleton cards sebagai gantinya |
statisticSitemapbyHHC |
Toggle tampilan keseluruhan section statistik. Set ke false untuk tampilan yang lebih minimalis |
showstatisticlabelSitemapbyHHC |
Array nama label yang akan ditampilkan di bar chart statistik label. Isi dengan label-label penting di blog kamu |
defaultSortSitemapbyHHC |
published = terbaru dulu, oldest = terlama dulu, alpha = urut alfabet A-Z |
jumlahKataDeskripsiSitemapbyHHC |
Jumlah kata maksimum untuk deskripsi di kartu post. Prioritas: paragraf <p class="summary">, fallback ke konten HTML post |
Konfigurasi Link
bukaLinkPostSitemapbyHHC: "_blank",
bukaLinkLabelSitemapbyHHC: "_self",
tampilkanLinkPenulisSitemapbyHHC: true,
bukaLinkPenulisSitemapbyHHC: "_blank",Empat parameter ini mengontrol bagaimana link dibuka. Best practice untuk UX:
- Link post ke
_blank— pengunjung tetap di halaman sitemap - Link label ke
_self— navigasi dalam blog lebih natural - Link penulis ke
_blank— kalau link profil eksternal
Tombol Salin & Bulk Copy
tampilkanTombolSalinSitemapbyHHC: true,
formatSalinSitemapbyHHC: "chat",
tampilkanSalinHalamanIniSitemapbyHHC: true,
tampilkanSalinSemuaPostSitemapbyHHC: true,| Format | Output | Best For |
|---|---|---|
chat |
Markdown format (bold, italic, link) | WhatsApp, Telegram |
plain |
Teks biasa dengan prefix label | Email, Notepad |
json |
JSON object lengkap | Developer, API integration |
Pagination Grid
itemsPerPageGridSitemapbyHHC: {
1:10,
2:20,
3:24,
4:32
},Object ini menentukan berapa item yang tampil per halaman untuk setiap ukuran grid. Nilai default sudah dioptimalkan — grid yang lebih rapat (4 kolom) menampilkan lebih banyak item karena tiap kartu lebih kecil dan mudah di-scan.
Gambar Default
defaultImageSitemapbyHHC: "https://...",Gambar ini tampil sebagai thumbnail kartu apabila post tidak memiliki gambar apapun. Pastikan gambarnya berukuran minimal 720px lebar dan ratio 16:9 untuk tampilan optimal.
Cara Kerja Internal: Di Balik Layar Sitemap Ini
Buat yang penasaran soal teknikal side-nya, bagian ini akan jelasin arsitektur dan flow kerja Sitemap HHC v4.3. Ini bukan sekedar "fetch dan tampilkan" — ada beberapa layer cerdas di dalamnya.
Sisipkan diagram flowchart di sini: Mulai dari "Buka Halaman Sitemap" → "Cek Cache" → (Ya) "Load dari localStorage" → "Render UI" → (Tidak) "Preloader ON" → "Fetch API Blogger" → "Parse Entries" → "Build Maps" → "Save Cache" → "Render UI"
1. Initialization Flow
-
Saat halaman dibuka, fungsi
init()dipanggil pertama kali.async function init() { render(); // Tampilkan skeleton/preloader dulu const cached = loadCache(); // Cek apakah ada cache valid if (cached) { // Langsung pakai data dari localStorage // Waktu render: instant ⚡ } else { // Fetch dari Blogger API // Waktu render: tergantung jumlah post } } - Kalau cache ditemukan dan belum expired → render langsung, tidak ada loading.
- Kalau tidak ada cache → preloader muncul, fetch dimulai dari Blogger Feeds API.
- Data di-fetch per chunk (default 50 post per request) untuk menghindari timeout.
- Setelah selesai → data disimpan ke localStorage, preloader disembunyikan, UI di-render.
2. Data Parsing
Fungsi parseEntry() mengkonversi raw JSON dari Blogger Feeds API menjadi objek yang bersih dan terstruktur:
function parseEntry(e) {
// Ekstrak title, URL, tanggal publish & update
// Ekstrak labels (array)
// Ekstrak author: nama, avatar URL, profil URL
// Deskripsi: prioritas p.summary, fallback ke konten HTML
// Thumbnail: cek media$thumbnail dulu, baru parse dari konten HTML
return item;
}Yang menarik dari parsing ini: sistem akan prioritaskan thumbnail dari metadata Blogger (media$thumbnail) sebelum parsing dari konten HTML. Ini lebih akurat dan cepat.
3. Token Search Parser
Sistem pencarian menggunakan parseSearchTokens() yang memisahkan query berdasarkan koma, lalu mengklasifikasikan setiap token:
// Input: "2024, Tutorial, @HanHaoyu, dark mode"
// Output:
{
years: [2024],
labelFilters: ["tutorial"],
authorFilters: ["hanhaoyu"],
textParts: ["dark mode"]
}Sistem ini juga mendukung multi-label dengan separator /: JavaScript/CSS akan filter post yang punya label JavaScript atau CSS.
4. Render Architecture (Partial Re-render)
Ini adalah salah satu keputusan arsitektur paling penting: tidak semua UI di-render ulang setiap ada perubahan state. Ada dua fungsi utama:
render()— Full render: merender semua komponen (stats, controls bar, label panel, posts area). Dipanggil saat ada perubahan major seperti ganti tab atau toggle panel.renderPostsOnly()— Partial render: hanya merender ulang grid post dan pagination. Dipanggil saat search, ganti sort, atau ganti halaman. Jauh lebih ringan dan responsif.
Impact: Pencarian real-time terasa instant karena hanya merender grid kartu, bukan seluruh halaman. Ini adalah teknik yang sama digunakan oleh framework modern seperti React.
Cara Pasang di Blog Blogger: Step-by-Step
Perhatian!
Sitemap HHC v4.3 hanya kompatibel dengan platform Blogger (Blogspot). Ini karena bergantung pada Blogger Feeds API (/feeds/posts/ dan /feeds/pages/). Tidak bisa dipasang di WordPress, Ghost, atau platform lain secara langsung tanpa modifikasi signifikan pada bagian fetching data.
-
Buat halaman baru di Blogger
Pergi ke Dashboard Blogger → Pages → New Page. Beri judul misalnya "Sitemap" atau "Daftar Isi".
Pastikan editor menggunakan mode HTML, bukan Compose. Klik ikon HTML di toolbar editor. -
Copy seluruh kode Sitemap HHC v4.3
Ambil kode lengkap dari halaman sitemap di hanhaoyu.com — mulai dari blok konfigurasi
<script>sampai script utama di bagian bawah. -
Edit bagian konfigurasi
Temukan baris ini dan sesuaikan:
linkwebsite: "homepageurl",Ganti
"homepageurl"dengan URL blog kamu. Contoh:"https://namablog.blogspot.com" -
Sesuaikan label statistik
showstatisticlabelSitemapbyHHC: ["News", "Course", "All Product"],Isi dengan nama-nama label yang ada di blog kamu. Pastikan penulisan huruf besar/kecilnya persis sama dengan label di Blogger.
-
Paste kode ke halaman dan Publish
Paste seluruh kode ke editor HTML halaman Blogger, lalu klik Publish. Buka halaman tersebut dan tunggu loading pertama (ini normal — data sedang di-fetch dan di-cache).
-
Test dan validasi
Buka halaman sitemap di browser. Pastikan:
- Preloader muncul dan progress bar berjalan
- Kartu post tampil dengan thumbnail, judul, dan deskripsi
- Statistik menampilkan angka yang sesuai
- Pencarian berfungsi (coba ketik nama label atau kata kunci)
- Refresh halaman kedua kalinya — harus instant (dari cache)
Note untuk Gambar/Video Tutorial:
Sisipkan video tutorial singkat (3-5 menit) di sini yang menunjukkan proses instalasi dari awal hingga sitemap berhasil tampil.
Use Case: Kapan Sitemap Ini Paling Berguna?
Nggak semua blog butuh sitemap secanggih ini. Tapi kalau blog lo masuk kategori berikut, ini adalah game changer:
📚 Blog Kursus / Tutorial (Course Blog)
Blog yang punya banyak seri tutorial dengan berbagai label (Beginner, Intermediate, Advanced, Project, dll). Fitur filter label dan pencarian token sangat membantu pengunjung menemukan konten yang relevan untuk level mereka.
Contoh query: JavaScript, Beginner, 2024 → Tampil semua tutorial JS level pemula di tahun 2024.
📰 Blog Berita / Portal Konten
Blog dengan update konten cepat dan banyak kategori. Statistik label membantu editor memantau distribusi konten, dan pengunjung bisa cari berita berdasarkan tahun atau topik spesifik.
Fitur label "News" juga otomatis mengaktifkan skema NewsArticle di beberapa template Blogger.
👥 Blog Multi-Author
Kalau blog kamu punya beberapa penulis, statistik author chips dan filter @namaAuthor sangat membantu pembaca menemukan konten dari penulis favorit mereka.
🛒 Blog Produk / Review
Blog review gadget, buku, atau produk dengan banyak kategori dan label. Fitur sembunyikanLabelSitemapbyHHC berguna untuk menyembunyikan post "premium" atau "affiliate only" dari sitemap publik.
💼 Blog Portfolio / Personal Branding
Untuk menampilkan semua karya atau artikel dalam satu halaman yang terorganisir rapi. Visitor bisa filter berdasarkan jenis karya (Design, Code, Writing) dan tahun. Kesan profesional naik drastis.
Performa & SEO: Nggak Cuma Cantik, Tapi Juga Ngebut 🏎️
Strategi Performa
Performa adalah salah satu prioritas utama dalam desain Sitemap HHC v4.3. Berikut strategi yang digunakan:
⚡ LocalStorage Cache
Data post disimpan di localStorage browser setelah fetch pertama. Request API Blogger hanya terjadi:
- Pertama kali halaman dibuka (belum ada cache)
- Saat cache sudah expired (default 6 jam)
- Saat pengguna klik tombol "Perbarui Cache"
Hasilnya: 0 network request untuk loading berikutnya. Data disajikan dari memori lokal dalam milidetik.
🔄 Chunked Fetching
Blog dengan 500+ post tidak bisa di-fetch sekaligus. Sitemap ini mem-fetch data secara bertahap (default 50 post per request) dengan jeda yang bisa dikonfigurasi. Ini menghindari:
- Timeout dari Blogger API
- Browser tab crash karena memory spike
- Error rate limiting dari server
🎭 Lazy Loading Gambar
Semua gambar thumbnail di kartu post menggunakan atribut loading="lazy". Gambar hanya dimuat saat mendekati viewport. Untuk blog dengan ratusan kartu di satu halaman, ini adalah penghematan bandwidth yang signifikan.
🧩 Partial Re-render
Seperti yang dijelaskan di bagian arsitektur — hanya komponen yang perlu di-update yang di-render ulang. Saat pencarian atau sort berubah, hanya grid kartu yang di-render ulang. Tidak ada DOM manipulation yang tidak perlu.
✨ CSS-only Animations
Semua animasi (card hover, preloader, shimmer skeleton, tab transition) dibuat dengan CSS murni, bukan JavaScript. Animasi CSS berjalan di GPU thread, tidak memblokir main thread, dan jauh lebih smooth dibanding JS-based animations.
SEO Considerations
Disclaimer Penting:
Sitemap HHC v4.3 adalah komponen client-side rendering — artinya Google Bot tidak bisa langsung membaca konten kartu post karena konten dibuat oleh JavaScript. Namun ada beberapa hal yang perlu dipahami:
| Aspek SEO | Status | Keterangan |
|---|---|---|
| Crawler accessibility | ⚠️ Partial | Google dapat merender JavaScript, tapi ada delay indexing. Bing dan crawler lain mungkin tidak bisa |
| Internal linking | ✅ Ada | Kartu post mengandung link <a href> yang crawler bisa ikuti setelah JS dieksekusi |
| Page title & meta | ✅ Bebas diatur | Halaman sitemap tetap punya title dan meta description sendiri yang bisa dioptimalkan |
| Canonical URL | ✅ Via template | Setiap kartu punya link ke URL canonical post masing-masing |
| XML Sitemap | ✅ Terpisah | Halaman HTML sitemap ini BERBEDA dari XML sitemap untuk crawler. Keduanya bisa dan sebaiknya ada |
*Untuk SEO teknis, tetap pertahankan file sitemap.xml di Blogger. Sitemap HHC adalah untuk pengunjung manusia, XML sitemap untuk mesin pencari. Keduanya punya peran berbeda dan saling melengkapi.
UX Design Choices
Beberapa keputusan desain yang secara khusus dibuat untuk meningkatkan user experience:
- Floating Pagination — Pagination tidak di bawah grid tapi mengambang di bagian bawah layar. Ini berarti pengunjung tidak perlu scroll jauh ke bawah hanya untuk ganti halaman.
- Glassmorphism UI — Seluruh card dan panel menggunakan backdrop-filter blur dengan semi-transparency. Efek ini tidak hanya estetis — ia memberikan konteks depth yang membantu orientasi pengguna.
- Shimmer Skeleton — Saat loading, tampil placeholder beranimasi yang mirip bentuk kartu aslinya. Ini memberikan persepsi bahwa loading lebih cepat dari yang sebenarnya (Perceived Performance).
- Toast Notification — Saat copy berhasil, muncul notifikasi kecil di bagian bawah layar dengan warna hijau. Feedback visual ini penting untuk konfirmasi aksi user.
- Responsive Mobile-First — Di layar <500px, grid otomatis collapse ke 1 kolom, layout kartu berubah vertikal, dan tombol bulk copy menyembunyikan label teksnya untuk hemat ruang.
Sitemap HHC vs Kompetitor: Fair Comparison 🥊
Karena klaim "ini yang terbaik" tanpa perbandingan itu namanya marketing bullshit, mari kita lakukan perbandingan jujur:
| Fitur | Sitemap HHC v4.3 | Sitemap Plugin Blogger Umum | Custom Sitemap Sederhana |
|---|---|---|---|
| Pencarian real-time | ✅ Token-based | ❌ | ⚠️ Basic |
| Filter multi-parameter | ✅ Label + Tahun + Author | ❌ | ❌ |
| Cache system | ✅ localStorage, configurable | ❌ | ❌ |
| Statistik blog | ✅ Lengkap dengan bar chart | ❌ | ❌ |
| Dark mode | ✅ Otomatis | ⚠️ Tergantung tema | ❌ |
| Thumbnail gambar | ✅ Auto-extract + fallback | ⚠️ Jarang | ❌ |
| Bulk copy | ✅ 3 format | ❌ | ❌ |
| Mobile responsive | ✅ Full | ⚠️ Partial | ⚠️ Tergantung |
| Konfigurasi mudah | ✅ 1 blok config | ⚠️ Tergantung | ✅ Sederhana |
| Sembunyikan label | ✅ | ❌ | ❌ |
| Info penulis + avatar | ✅ | ❌ | ❌ |
| Progress loading bar | ✅ | ❌ | ❌ |
Kalau lo mau perbandingan sederhananya: sitemap lain itu kayak GPS jaman dulu — cuma kasih tau lokasi. Sitemap HHC ini kayak Google Maps modern — ada navigasi, traffic real-time, search, rating tempat, dan bahkan bisa foto-fotoan.
— Analogi yang mungkin over-confident, tapi valid 😂
Changelog & Evolusi dari v1 ke v4.3
Sitemap HHC tidak lahir langsung sempurna. Ini adalah hasil iterasi panjang yang terus di-improve berdasarkan feedback nyata dari penggunaan di hanhaoyu.com:
v1.x — The Beginning (Proof of Concept)
Versi pertama adalah proof of concept yang sangat sederhana: fetch semua post dari API, tampilkan dalam daftar HTML dengan judul dan URL. Tidak ada pencarian, tidak ada thumbnail, tidak ada statistik. Tapi cukup untuk membuktikan bahwa konsepnya bisa berjalan.
v2.x — Visual Upgrade
Versi ini menambahkan tampilan kartu (cards) dengan thumbnail, deskripsi, dan label tags. Mulai ada basic search. Cache system pertama kali diperkenalkan (tapi masih sederhana). Dark mode pertama kali diimplementasikan.
v3.x — Feature Expansion
Penambahan besar-besaran: statistik blog, author chips, label panel, pagination. Token search parser diperkenalkan. Grid picker (1-4 kolom). Bulk copy pertama kali hadir di versi ini.
v4.3 — Current Stable (Production-Ready)
Versi saat ini. Penyempurnaan di semua area:
- Cache age ticker real-time — Pengunjung bisa lihat berapa lama cache sudah ada
- Auto cache refresh — Background refresh tanpa gangguan user
- Bulk copy format JSON — Format baru untuk developer
- Hidden labels — Fitur baru untuk konten premium/privat
- Shimmer skeleton — Loading experience yang lebih polished
- Partial re-render optimization — Performa pencarian yang jauh lebih baik
- Preloader popup design — Preloader dengan glassmorphism design baru
Limitasi & Hal yang Perlu Diketahui 🚧
Kejujuran adalah kebijakan terbaik. Ini adalah limitasi nyata dari Sitemap HHC v4.3 yang perlu lo ketahui sebelum pasang:
Sitemap HHC v4.3 hanya bisa digunakan di platform Blogger (Blogspot) secara native. Alasannya:
- Bergantung pada
Blogger Feeds APIyang hanya ada di Blogger - Format data JSON yang diparse adalah format khusus Blogger Atom feed
- Dark mode detection menggunakan class
drKyang ada di tema Blogger HHC
Untuk platform lain (WordPress, Ghost, dll), diperlukan modifikasi signifikan pada bagian fetching dan parsing data.
| Limitasi | Detail | Workaround |
|---|---|---|
| Blogger API limit | Blogger Feeds API bisa lambat untuk blog 1000+ post | Set ambildatapostbloggerSitemapbyHHC untuk membatasi jumlah post |
| SEO crawler | Konten di-render client-side, tidak semua crawler bisa baca | Tetap pertahankan sitemap.xml terpisah untuk SEO |
| localStorage limit | Browser biasanya limit localStorage ~5MB. Blog dengan 1000+ post berpotensi over limit | Set ambildatapostbloggerSitemapbyHHC untuk batasi data yang di-cache |
| Private blog | Blogger Feed API tidak bisa diakses oleh pengunjung yang belum login jika blog diset private | Pastikan blog settings → Feed → Allow Blog Feed di-set ke "Full" atau "Until Jump Break" |
| JavaScript required | Seluruh fungsionalitas membutuhkan JavaScript aktif di browser | Tidak ada fallback untuk browser tanpa JS — ini adalah tradeoff yang disadari |
| Platform terbatas | Tidak ada versi untuk WordPress, Ghost, atau platform lain | Belum ada rencana port ke platform lain dalam waktu dekat |
🎮 Live Demo Section
Penasaran seperti apa tampilannya? Lo bisa langsung coba sitemap yang aktif di halaman berikut:
Note untuk Section Demo:
Tambahkan beberapa screenshot GIF atau video pendek di sini yang menunjukkan: (1) fitur search dengan token filter, (2) switch grid 1-4 kolom, (3) label panel filter, (4) bulk copy ke WhatsApp. Ini akan sangat membantu pengunjung memahami UX sebelum mereka coba sendiri.
Penempatan Kode di Blogger
Sitemap HHC v4.3 dirancang sebagai single-file component — semua CSS, HTML, dan JavaScript ada dalam satu blok yang bisa di-paste ke satu halaman Blogger. Tidak ada file eksternal yang perlu dihubungkan (kecuali gambar default yang lo konfigurasi sendiri).
Struktur Internal File
<!-- ===== KONFIGURASI ===== -->
<script>
const konfigurasiSitemapbyHHC = { ... }
</script>
<!-- ===== CSS ===== -->
<style>
/* Semua styling: preloader, stats, controls, cards, pagination */
</style>
<!-- ===== HTML ROOT ===== -->
<div id="sitemapRootHHC"></div>
<div class="copyToastHHC" id="copyToastHHC"></div>
<!-- ===== JAVASCRIPT UTAMA ===== -->
<script>
(function(){
// Helpers, Cache, Parser, Fetch, Render functions
init(); // Entry point
})();
</script>Seluruh JavaScript dibungkus dalam IIFE (Immediately Invoked Function Expression) — (function(){...})(). Ini berarti tidak ada variable global yang bocor ke scope lain di halaman Blogger. Clean dan aman.
Nama Class & ID Convention
Semua class name dan ID menggunakan suffix HHC atau HHCv43. Ini adalah namespace strategy untuk menghindari konflik dengan CSS global dari tema Blogger. Misalnya: .wrapHHC, .statsHHC, #sitemapRootHHC.
Jadi kalau lo punya class .stats di tema, tidak akan bentrok dengan .statsHHC di sitemap ini.
Credit & Acknowledgment 🙏
Sitemap HHC v4.3 adalah karya original dari Han Haoyu, dikembangkan khusus untuk platform hanhaoyu.com.
Seluruh kode ditulis dari nol menggunakan HTML + CSS + Vanilla JavaScript tanpa ketergantungan pada library atau framework eksternal apapun. Tidak ada jQuery, tidak ada React, tidak ada Bootstrap — pure vanilla, baby.
Inspirasi desain mengambil dari prinsip glassmorphism modern, design system dari Tailwind CSS (untuk concept spacing), dan workflow UX dari aplikasi seperti Notion dan Linear.
Jika kamu menggunakan kode ini di blog kamu, menyebutkan sumber aslinya (hanhaoyu.com) sangat diapresiasi — tapi bukan kewajiban. Berbagi itu baik. 🤍
FAQ: Pertanyaan yang Sering Ditanyakan
Apakah Sitemap HHC v4.3 gratis digunakan?
Ya, kode Sitemap HHC v4.3 tersedia untuk digunakan secara gratis. Kamu bisa menggunakannya di blog Blogger kamu sendiri. Jika merasa terbantu, memberikan credit atau komentar di artikel ini adalah bentuk apresiasi yang sangat berarti.
Apakah bisa dipasang di WordPress atau Ghost?
Secara native, tidak. Sitemap HHC menggunakan Blogger Feeds API yang tidak ada di WordPress atau Ghost. Diperlukan modifikasi signifikan pada bagian fetching data untuk platform lain. Saat ini belum ada versi resmi untuk platform selain Blogger.
Kenapa loading pertama kali lama?
Loading pertama memerlukan waktu karena semua data post harus di-fetch dari Blogger API. Kecepatan bergantung pada jumlah post dan koneksi internet. Setelah loading pertama selesai, data disimpan di cache dan loading berikutnya akan sangat cepat (instant dari localStorage).
Apakah sitemap ini menggantikan sitemap XML untuk SEO?
Tidak. Sitemap HHC v4.3 adalah interface untuk pengunjung manusia — bukan untuk mesin pencari. Untuk SEO, kamu tetap perlu sitemap XML (tersedia otomatis di Blogger: blogkamu.com/sitemap.xml). Kedua jenis sitemap ini punya fungsi berbeda dan keduanya direkomendasikan untuk ada.
Apakah bisa menyembunyikan semua post kecuali label tertentu?
Fitur sembunyikanLabelSitemapbyHHC hanya untuk menyembunyikan post DENGAN label tertentu. Untuk menampilkan HANYA label tertentu, kamu bisa menggunakan fitur filter label di panel UI, atau set selLabel di state secara default — yang memerlukan modifikasi kode kecil.
Apakah ada rencana versi v5?
Ada beberapa fitur yang sedang dipertimbangkan untuk versi berikutnya, termasuk: view mode list (selain grid), sort by jumlah komentar, custom color theme via konfigurasi, dan kemungkinan integrasi dengan Google Sheets untuk konten yang lebih fleksibel. Pantau terus update di hanhaoyu.com!
Data thumbnail diambil dari mana?
Sitemap HHC menggunakan sistem priority untuk thumbnail: pertama cek media$thumbnail dari Blogger metadata (ini paling akurat), jika tidak ada maka parse tag <img> pertama dari konten HTML post, dan jika tidak ada keduanya maka gunakan gambar default dari konfigurasi.
Penutup: Saatnya Blog Lo Naik Level 🚀
Blog yang bagus bukan cuma soal kontennya — tapi juga soal bagaimana konten itu bisa ditemukan, dinikmati, dan dishare. Sitemap HHC v4.3 adalah jawaban untuk itu semua dalam konteks platform Blogger.
Dari statistik real-time yang bikin lo makin paham distribusi konten sendiri, token search yang bikin pengunjung nggak perlu scroll ratusan post buat nemuin artikel spesifik, sampai bulk copy yang bikin sharing postingan ke WhatsApp jadi semudah dua kali klik — semua itu bukan sekedar fitur, tapi pengalaman yang lebih baik untuk semua orang yang interaksi dengan blog lo.
Dan yang paling penting: ini dibuat oleh satu orang, untuk satu masalah nyata, dengan dedikasi yang beneran. Bukan produk korporat dengan marketing budget gila-gilaan — ini adalah passion project yang kebetulan sangat berguna.
Ringkasan Singkat:
Sitemap HHC v4.3 = Smart Search + Statistik Real-time + Cache System + Bulk Copy + Grid Layout + Dark Mode + Floating Pagination + Hidden Labels + Author Info — semua dalam satu file, satu konfigurasi, khusus untuk Blogger. Gratis. Open untuk digunakan.
Apa Langkah Selanjutnya?
- Coba Live Demo — Buka halaman sitemap di hanhaoyu.com dan eksplorasi semua fiturnya secara langsung.
- Ambil Kodenya — Copy kode sitemap dan pasang di halaman Blogger kamu. Ikuti panduan instalasi di atas.
- Konfigurasi Sesuai Blog — Sesuaikan parameter di blok konfigurasi dengan URL, label, dan preferensi blog kamu.
- Share ke Komunitas — Kalau berguna, bagikan ke sesama blogger! Semakin banyak yang tahu, semakin banyak feedback yang bisa memperbaiki fitur ini ke depannya.
- Tinggalkan Komentar — Ada bug? Fitur request? Atau sekedar mau bilang terima kasih? Kolom komentar ada di bawah. Serius, feedback dari kamu sangat berarti. 👇
Copyright (c):
Han Haoyu Platform — hanhaoyu.com
