Fitur Web Story Ala Ala Instagram + WhatsApp + Telegram by Han Haoyu Platform

Daftar Isi

WebStory by Han Haoyu — Admin Documentation

Kamu udah capek sama widget story yang itu-itu aja? Yang tampilannya generik, loadingnya lambat, nggak bisa dikustomisasi, dan nggak ada fitur keren sama sekali? Well, WebStory by Han Haoyu hadir buat ngubah semua itu. Ini bukan sekadar widget story biasa — ini adalah sebuah full-featured interactive story engine yang dibangun dari nol, 100% vanilla JavaScript, tanpa framework berat, tanpa dependency eksternal, dan siap dipakai langsung di blog maupun platform website apapun berbasis cms blogger.

Artikel ini adalah admin documentation resmi dari WebStory by HHC. Di sini kamu bakal dapetin penjelasan setiap baris konfigurasi, cara pasang, cara setup stories dari nol sampai advanced, dan semua trik tersembunyi yang bikin web story kamu jadi next level. Buckle up — ini bakal panjang tapi worth it banget.

Untuk Siapa Artikel Ini? Artikel ini ditujukan untuk admin/developer yang mau mengintegrasikan WebStory by HHC ke dalam blog atau website mereka. Kalau kamu lagi cari cara pakai sebagai visitor/reader, check artikel user guide-nya ya!

Apa Itu WebStory by HHC?

WebStory by HHC adalah sebuah interactive story widget buatan Han Haoyu yang terinspirasi dari Instagram Stories, Google Web Stories, Telegram Stories dan WhatsApp Stories — tapi jauh lebih powerful, lebih fleksibel, dan di-design khusus untuk ekosistem Blogger. Fitur-fiturnya meliputi:

Multi-story support — bisa punya banyak story circle sekaligus di satu halaman.
9 tipe page yang berbeda: cover, quote, feature, stats, image, video, CTA, blog feed, music player, horizontal slider, grid, dan end screen.
Auto blog feed integration — story otomatis pull artikel terbaru dari Blogger feed JSON.
Built-in music player — playlist lengkap dengan progress bar, speed control, dan download button.
Horizontal drag slider — touch-friendly, mouse-drag support, dengan dot navigation.
IndexedDB caching — data story di-cache di browser, load lebih cepat dari session berikutnya.
Background music per slide — setiap slide bisa punya audio background sendiri.
Sponsored story — ada tipe story khusus untuk konten bersponsor dengan badge otomatis.
End screen dengan cross-story navigation — setelah story selesai, auto-suggest story berikutnya.
Keyboard & touch support — navigasi pakai arrow key, swipe touch, klik kiri/kanan.

WebStory by HHC bukan cuma widget. Ini adalah sebuah arsitektur story engine yang dibangun dengan filosofi: ringan, cepat, powerful, dan tanpa batasan.
Han Haoyu — Creator

Struktur Kode & Arsitektur

Sebelum masuk ke konfigurasi, penting banget kamu paham arsitektur besar dari kode WebStory ini. Secara garis besar, kode dibagi menjadi beberapa blok utama:

WebStory by HHC terdiri dari 6 blok utama dalam satu file JavaScript:

CONFIGURATION — semua setting global ada di sini.
STORIES DATA — array berisi semua story yang akan ditampilkan.
ICONS — SVG icon library internal.
IndexedDB CACHE — sistem caching berbasis browser storage.
UTILITIES — fungsi helper kecil-kecil.
STATE — object yang menyimpan state aktif story.

Blok CFGWebStorybyHHC — semua konfigurasi global yang kamu butuhkan.

Blok STORIESWebStorybyHHC — array of story objects, ini yang paling banyak kamu edit.

Blok SWebStorybyHHC — state machine yang tracking posisi slide, audio, animasi.

Blok EWebStorybyHHC — mapping semua DOM element yang digunakan.

Object Konfigurasi Global

Ini adalah jantung dari semua pengaturan global. Kamu hanya perlu edit satu object ini untuk mengubah behavior keseluruhan WebStory.

var CFGWebStorybyHHC = {

  // ── BRAND ──────────────────────────────────────────────────
  brand: {
    logo: 'https://contoh.com/logo.jpg',
    name: 'Han Haoyu'
  },

  // ── TIMING ─────────────────────────────────────────────────
  defaultDuration: 6000,
  animMs:          420,
  toastMs:         2400,

  // ── TEXT ───────────────────────────────────────────────────
  loadingText: 'Memuat...',
  shareFormat: '*{title}*\n_{date}_\n\n{excerpt}\n\n{url}',

  // ── BLOG FEED ──────────────────────────────────────────────
  blog: {
    feedUrl:       'https://www.namablog.com/feeds/posts/default',
    maxPosts:      10,
    authorName:    'Han Haoyu',
    authorAvatar:  'https://contoh.com/avatar.jpg',
    excerptWords:  150,
    coverTitle:    'Artikel Terbaru',
    coverSubtitle: 'Tulisan terbaru dari Han Haoyu',
    outroTitle:    'Selengkapnya',
    outroDesc:     'Kunjungi website untuk membaca lebih banyak.',
    outroUrl:      'https://www.namablog.com',
    outroBtn:      'Kunjungi Website'
  },

  // ── MUSIC FEED ─────────────────────────────────────────────
  music: {
    feedUrl:       'https://www.namablog.com/feeds/posts/default/-/music',
    maxPosts:      8,
    coverTitle:    'Playlist',
    coverSubtitle: 'Koleksi musik pilihan',
    outroUrl:      'https://www.namablog.com/search/label/music',
    outroBtn:      'Dengarkan Lebih Lanjut'
  }

};

Tips!
Property blog.feedUrl mendukung filter label Blogger secara langsung. Format: /feeds/posts/default/-/NAMA_LABEL. Contoh: /feeds/posts/default/-/tutorial akan fetch hanya post berlabel "tutorial".

Brand Configuration

Property brand di dalam CFGWebStorybyHHC adalah fallback brand global yang dipakai kalau story individual tidak mendefinisikan brand-nya sendiri. Setiap story juga bisa override brand ini secara per-story.

Property	Tipe	Default	Keterangan
`brand.logo`	`string`	`""`	URL gambar logo yang tampil di header story. Disarankan rasio 1:1, ukuran minimal 64×64px.
`brand.name`	`string`	`""`	Nama brand yang tampil di samping logo. Kalau lebih dari 18 karakter, otomatis jadi marquee (scroll) effect.
`defaultDuration`	`number`	`6000`	Durasi auto-advance default dalam milidetik. Dipakai hanya kalau slide tidak punya property `duration` sendiri.
`animMs`	`number`	`420`	Durasi animasi transisi slide dalam ms. Jangan terlalu tinggi atau akan terasa laggy.
`shareFormat`	`string`	Multi-line	Template teks share. Mendukung variabel: `{title}`, `{date}`, `{excerpt}`, `{url}`. Format Markdown-friendly.

Array Stories — Pusat Kendali

Inilah bagian yang paling sering kamu otak-atik. STORIESWebStorybyHHC adalah array of story objects. Setiap object dalam array ini mewakili satu story circle yang tampil di halaman. Urutan dalam array = urutan tampil di UI.

var STORIESWebStorybyHHC = [
  {
    // ── CIRCLE CONFIG ────────────────────────────────────────
    circle: {
      img:      'https://contoh.com/circle.gif',
      name:     'Demo',
      badge:    'LIVE',
      badgeType:'lv',
      ringType: 'lv'
    },

    // ── BRAND OVERRIDE ───────────────────────────────────────
    brand: {
      logo: 'https://contoh.com/logo.jpg',
      name: 'Nama Brand Story Ini'
    },

    // ── OPTIONAL FLAGS ───────────────────────────────────────
    isSponsored: false,
    isBlogFeed:  false,
    isMusicFeed: false,

    // ── PAGES ARRAY ──────────────────────────────────────────
    pages: [
      // ... array of page objects
    ]
  }
];

Circle Configuration — Detail

Property	Tipe	Keterangan
`circle.img`	`string`	URL gambar circle. Bisa berupa GIF animasi untuk efek eye-catching. Rasio 1:1 optimal.
`circle.name`	`string`	Label nama kecil di bawah circle. Keep it short — maksimal ~10 karakter biar tidak terpotong.
`circle.badge`	`string`	Teks badge kecil. Bisa `LIVE`, `NEW`, `AD`, `Music`, atau teks apapun.
`circle.badgeType`	`string`	Style visual badge: `lv` (animasi pulse merah untuk LIVE), `sp` (emas untuk sponsored), `nw` (biru untuk new), `mu` (ungu untuk musik), `bl` (hijau default).
`circle.ringType`	`string`	Style ring/border animasi di sekeliling circle. Nilai sama dengan `badgeType`.

Penting Soal ringType! Nilai badgeType dan ringType sebaiknya konsisten. Kalau badge-nya lv, ring-nya juga lv biar visual cohesive. Tapi kamu bisa juga mix-match untuk efek unik.

Semua Tipe Page — 9 Layout Siap Pakai

Ini bagian paling exciting. WebStory by HHC punya 9 tipe page yang bisa kamu kombinasikan bebas. Setiap tipe punya visual dan behavior yang berbeda. Let's go satu per satu.

1. Tipe cover — Slide Pembuka Utama

Slide cover adalah slide pertama yang biasanya jadi wajah dari story kamu. Tampilannya full-screen dengan title besar, subtitle, dan chips/tag.

{
  type: 'cover',
  bg: 'https://contoh.com/bg.gif',
  title: 'Menjelajahi Dunia\nTeknologi',
  subtitle: 'oleh Tim Han Haoyu',
  chips: [
    { t: 'Teknologi', hi: 1 },
    { t: 'Koding' },
    { t: 'Keamanan' }
  ],
  music: 'https://contoh.com/music.mp3',
  duration: 6000
}

Tips!
Property music bisa diisi URL MP3 apapun yang publicly accessible. Audio akan loop dan bisa di-mute oleh user lewat tombol musik.

2. Tipe quote — Slide Kutipan Elegan

Slide quote menampilkan kutipan besar dengan tanda kutip dekoratif dan nama penulis. Cocok untuk pull quote, testimonial, atau kata-kata inspiratif.

{
  type: 'quote',
  bg: 'https://contoh.com/bg.jpg',
  title: 'Filosofi Kami',
  quote: 'Teknologi hadir untuk memudahkan, bukan mempersulit kehidupan manusia.',
  quoteAuthor: 'Han Haoyu',
  duration: 7000
}

3. Tipe feature — Slide Daftar Fitur/Keunggulan

Slide feature menampilkan grid icon + judul + deskripsi. Perfect untuk menunjukkan keunggulan, fitur produk, atau poin-poin penting.

{
  type: 'feature',
  bg: 'https://contoh.com/bg.jpg',
  title: 'Yang Kami Tawarkan',
  features: [
    {
      icon: 'article',
      title: 'Artikel Teknologi',
      desc: 'Berita dan update terbaru dunia teknologi'
    },
    { icon: 'code', title: 'Tutorial Koding', desc: 'Belajar dari nol sampai mahir' },
    { icon: 'shield', title: 'Keamanan Digital', desc: 'Tips lindungi privasi online kamu' }
  ],
  duration: 8000
}

Daftar Icon Tersedia:
article, code, device, shield, star, zap, share, ext, dl, play, pause, globe, home, check

4. Tipe stats — Slide Pencapaian & Angka

Slide stats menampilkan grid foto dan animated counter untuk angka pencapaian. Angka di-animate dari 0 ke target dengan easing yang smooth.

{
  type: 'stats',
  bg: 'https://contoh.com/bg.jpg',
  title: 'Pencapaian Kami',
  images: [
    'https://contoh.com/img1.jpg',
    'https://contoh.com/img2.jpg',
    'https://contoh.com/img3.jpg',
    'https://contoh.com/img4.jpg'  // maksimal 4 gambar
  ],
  stats: [
    { num: 500, label: 'Artikel Teknologi' },
    { num: 100, label: 'Ribu Pembaca' }
  ],
  duration: 7000
}

5. Tipe image — Slide Gambar + Teks

Slide image menampilkan gambar utama fullscreen dengan teks overlay, plus bisa tambah grid gambar kecil di bawahnya.

{
  type: 'image',
  bg: 'https://contoh.com/main.jpg',
  title: 'Tentang Han Haoyu',
  text: 'Deskripsi panjang yang akan tampil sebagai teks overlay di bagian bawah gambar.',
  images: [
    'https://contoh.com/main.jpg',    // gambar pertama = main background
    'https://contoh.com/thumb1.jpg',  // gambar 2-4 = grid kecil di bawah
    'https://contoh.com/thumb2.jpg'
  ],
  duration: 9000
}

6. Tipe video — Slide Video Autoplay

Slide video memutar video HTML5 secara autoplay, loop, dengan poster image. Ada tombol mute/unmute otomatis.

{
  type: 'video',
  bg: 'https://contoh.com/poster.jpg',  // gambar poster sebelum video load
  video: 'https://contoh.com/video.mp4',
  title: 'Judul Video (Opsional)',
  desc: 'Deskripsi singkat video.',
  // duration: 0  ← tidak perlu, video tidak auto-advance
}

Soal Autoplay! Browser modern memblokir autoplay dengan audio. Kode otomatis men-mute video kalau autoplay gagal, dan menampilkan tombol unmute untuk user. Jadi jangan khawatir — ini sudah di-handle dengan baik.

7. Tipe cta — Slide Call To Action

Slide CTA adalah slide penutup/ajakan dengan tombol aksi utama. Cocok untuk outro story atau promosi.

{
  type: 'cta',
  bg: 'https://contoh.com/bg.jpg',
  title: 'Yuk Bergabung!',
  desc: 'Kunjungi blog kami untuk konten teknologi terbaru. Gratis dan update harian.',
  chips: [
    { t: 'Gratis', hi: 1 },
    { t: 'Update Harian' }
  ],
  cta: {
    text: 'Kunjungi Sekarang',
    url:  'https://www.namablog.com',
    gold: false
  },
  duration: 8000
}

8. Tipe hslider — Horizontal Drag Slider

Slide hslider adalah galeri horizontal yang bisa di-swipe/drag. Ada dot navigation, tombol prev/next, dan setiap item bisa punya link.

{
  type: 'hslider',
  title: 'Koleksi Produk',
  slides: [
    {
      img:   'https://contoh.com/produk1.jpg',
      title: 'Produk A',
      link:  'https://contoh.com/produk-a'
    },
    { img: 'https://contoh.com/produk2.jpg', title: 'Produk B', link: '#' },
    { img: 'https://contoh.com/produk3.jpg', title: 'Produk C', link: '#' }
  ],
  showBadge: false,
  duration: 12000
}

Interaksi Drag!
Slider mendukung mouse drag (desktop) dan touch swipe (mobile) secara bersamaan. Threshold drag adalah 40px — swipe lebih dari itu akan pindah ke item berikutnya.

9. Tipe grid — Grid Gambar Fullscreen

Slide grid menampilkan grid gambar fullscreen yang bisa di-konfigurasi jumlah kolomnya. Setiap item bisa punya link.

{
  type: 'grid',
  cols: 2,
  title: 'Galeri Produk',
  items: [
    { img: 'https://contoh.com/item1.jpg', title: 'Item 1', link: '#' },
    { img: 'https://contoh.com/item2.jpg', title: 'Item 2', link: '#' },
    { img: 'https://contoh.com/item3.jpg', title: 'Item 3', link: '#' },
    { img: 'https://contoh.com/item4.jpg', title: 'Item 4', link: '#' }
  ],
  showBadge: false,
  duration: 8000
}

Story Mode: Blog Feed Otomatis

Ini salah satu fitur paling killer dari WebStory HHC. Kamu bisa membuat story yang otomatis pull artikel terbaru dari Blogger feed — tanpa harus manually input satu per satu. Cukup set isBlogFeed: true dan semua jalan otomatis.

{
  circle: {
    img:      'https://contoh.com/blog-circle.gif',
    name:     'Blog',
    badge:    'NEW',
    badgeType:'nw',
    ringType: 'bl'
  },
  brand: { logo: 'https://contoh.com/logo.jpg', name: 'Nama Blog' },
  isBlogFeed: true
  // pages[] TIDAK DIPERLUKAN — otomatis di-generate dari feed
}

Saat story ini dibuka, sistem akan:

Cek IndexedDB cache — kalau ada cache segar (kurang dari 10 menit), pakai cache langsung (ultra fast load).
Kalau cache expired atau tidak ada, fetch Blogger JSON feed via JSONP callback.
Generate otomatis slide: 1 cover slide + N artikel slide + 1 outro/CTA slide.
Simpan ke IndexedDB untuk sesi berikutnya.
Kalau cache ada tapi sudah >1 menit, background refresh dilakukan diam-diam tanpa mengganggu UX.

Struktur Slide yang Di-generate Otomatis

Slide	Tipe	Sumber Data
Slide 1	`cover`	Thumbnail artikel pertama + `blog.coverTitle/coverSubtitle`
Slide 2...N+1	`blog`	Data tiap artikel: thumbnail, judul, excerpt, author, tanggal, link
Slide terakhir	`cta`	`blog.outroTitle/outroDesc/outroUrl/outroBtn`

Slide tipe blog (internal) punya 3 visual style yang dirotasi otomatis (s1, s2, s3) supaya tidak monoton. Style s1 adalah blurred background, s2 adalah split view dengan gambar di atas, dan s3 adalah card dengan border hijau.

Story Mode: Music Player Terintegrasi

WebStory HHC punya built-in full music player yang bisa kamu embed langsung dalam story. Ini bukan sekadar play audio — ini adalah music player lengkap dengan progress bar interaktif, speed control, download button, dan navigasi antar track.

{
  circle: {
    img:      'https://contoh.com/music-circle.gif',
    name:     'Musik',
    badge:    'Music',
    badgeType:'mu',
    ringType: 'mu'
  },
  brand: { logo: 'https://contoh.com/logo.jpg', name: 'Channel Musik' },
  isMusicFeed: true,

  // Daftar track langsung di-define di sini
  tracks: [
    {
      title:    'Song One',
      artist:   'Artist A',
      thumb:    'https://contoh.com/thumb1.jpg',
      src:      'https://contoh.com/song1.mp3',
      link:     'https://contoh.com/post-lagu-1',
      duration: '3:24'
    },
    {
      title: 'Song Two', artist: 'Artist B',
      thumb: 'https://contoh.com/thumb2.jpg',
      src:   'https://contoh.com/song2.mp3',
      link:  '#', duration: '4:11'
    }
  ]
}

Fitur Music Player yang Tersedia

✔ Progress bar interaktif — klik/drag untuk seek ke posisi tertentu dalam lagu.
✔ Speed control — 0.75x, 1x, 1.25x, 1.5x playback speed.
✔ Auto-advance antar track — setelah satu lagu selesai, lanjut ke lagu berikutnya otomatis.
✔ Download button — download file audio langsung dari dalam story.
✔ Link to post — tombol untuk membuka postingan terkait lagu.
✔ Equalizer animation — indikator visual animasi saat lagu sedang diputar.
✔ Auto-play saat slide aktif — saat user swipe ke slide player, lagu langsung mulai.

Tentang duration di track:
Property duration pada setiap track adalah string display only (contoh: '3:24') untuk ditampilkan di UI sebelum audio load. Durasi aktual akan otomatis di-update dari metadata audio saat diputar.

Story Mode: Sponsored Content

WebStory HHC punya support bawaan untuk konten bersponsor. Saat isSponsored: true di-set, semua slide dalam story tersebut otomatis mendapat badge "Bersponsor" dengan ikon bintang di pojok atas.

{
  circle: {
    img:      'https://brand.com/circle.gif',
    name:     'Sponsored',
    badge:    'AD',
    badgeType:'sp',  // gold badge
    ringType: 'sp'
  },
  brand: {
    logo: 'https://brand.com/logo.png',
    name: 'Nama Brand Sponsor'
  },
  isSponsored: true,
  pages: [
    // pages normal seperti biasa
    // setiap slide otomatis dapat spBadge tanpa perlu showBadge: true per slide
    { type: 'cover', bg: '...', title: 'Produk Unggulan 2025', ... },
    { type: 'hslider', title: 'Koleksi Produk', slides: [...], ... },
    { type: 'cta', ..., cta: { text: 'Beli Sekarang', url: '...', gold: true } }
  ]
}

Alternatifnya, kamu juga bisa set showBadge: true per slide individual kalau hanya ingin badge di slide tertentu saja — tanpa perlu isSponsored: true di level story.

Transparency FYI Badge "Bersponsor" adalah bentuk disclosure otomatis yang membantu transparansi konten berbayar kepada pembaca. Recommended practice untuk menjaga trust audiens kamu!

Sistem IndexedDB Cache — Kenapa Ini Genius

Salah satu hal yang bikin WebStory HHC jauh lebih cepat dari solusi story lainnya adalah sistem caching berbasis IndexedDB. Ini adalah database yang hidup langsung di browser user, bukan di server kamu.

Alur Kerja Cache

Story statis (dengan pages[] manual) di-cache setelah pertama kali di-render. Cache key: sHHC{index}. Cache tidak expire karena konten tidak berubah.

Kalau kamu update kode story, cache lama masih ada di browser user. Solusinya: ganti nama database (ws_v5_hhc) ke versi baru misalnya ws_v6_hhc agar cache di-reset.

Blog feed story di-cache dengan TTL 10 menit. Artinya:

Sesi 1: fetch dari internet, simpan ke cache.
Sesi 2 (kurang dari 10 menit): load dari cache = instant.
Background refresh: kalau cache >1 menit, update diam-diam.

Untuk force invalidasi cache, ubah versi database di fungsi dbOpenWebStorybyHHC:

var r = indexedDB.open('ws_v6_hhc', 1);

Sistem Navigasi — Multi-Input Support

WebStory HHC mendukung 5 cara navigasi sekaligus, semua sudah built-in tanpa perlu konfigurasi tambahan:

Input	Aksi	Keterangan
`→` Arrow Right	Next slide	Keyboard navigation untuk desktop
`←` Arrow Left	Prev slide	Keyboard navigation untuk desktop
`Esc`	Tutup story	Close overlay
Klik kiri area story	Next slide	Area klik kanan layar = next, area kiri = prev
Swipe kiri/kanan	Next/prev slide	Touch swipe dengan threshold 44px

Cross-Story Navigation

Saat user mencapai slide terakhir dari sebuah story, ada dua skenario:

Ada story berikutnya → otomatis pindah ke story berikutnya (berdasarkan urutan array).
Ini story terakhir → tampilkan End Screen dengan opsi: ulangi story, atau kembali ke beranda.

Smart End Screen!
End Screen di-generate secara dinamis saat dibutuhkan — bukan slide statis. Ia otomatis tahu apakah ada story berikutnya atau tidak, dan menyesuaikan teks + tombol yang ditampilkan.

Progress Bar & Timing System

Progress bar di atas story bukan sekadar dekorasi — ia adalah segmented timer yang sinkron dengan durasi tiap slide.

Behavior per Tipe Slide

Kondisi	Behavior Progress Bar
Slide dengan `duration > 0`	Fill animation dari 0% ke 100% selama durasi yang ditentukan, lalu auto-advance.
Slide video / `duration: 0`	Bar aktif di 50% sebagai indicator — tidak auto-advance, user harus swipe manual.
Slide music player	Bar tidak bergerak (duration: 0), karena advance dikontrol oleh interaksi musik.
Slide sudah lewat	Bar penuh 100% (status selesai).
Slide belum dikunjungi	Bar kosong 0%.

Pause on Hover

Di desktop, saat mouse hover di atas area story, timer otomatis di-pause. Saat mouse leave, timer lanjut dari awal durasi. Ini sudah built-in dan tidak perlu konfigurasi.

Cara Instalasi & Implementasi

Oke, sekarang bagian yang paling ditunggu-tunggu — cara pasang WebStory HHC di blog kamu. Cukup ikuti langkah-langkah berikut:

Siapkan HTML Structure — Pastikan blog/website kamu sudah punya HTML wrapper untuk WebStory. Tambahkan elemen-elemen berikut sebelum </body>:

<!-- Story Circles Container -->
<div id="wsCWebStorybyHHC"></div>

<!-- Story Overlay -->
<div id="wsOWebStorybyHHC">
  <div id="wsBWebStorybyHHC">
    <!-- Progress Bar -->
    <div id="wsPGWebStorybyHHC"></div>
    <!-- Story Pages Wrapper -->
    <div id="wsPWWebStorybyHHC"></div>
    <!-- Navigasi, Kontrol, dsb -->
    <!-- (ikut struktur HTML lengkap dari tema) -->
  </div>
</div>

Penting!
ID element sudah hardcoded di kode JS (EWebStorybyHHC object). Jangan ganti nama ID-nya atau semua fungsi akan break.

Edit Konfigurasi — Buka file JS dan edit bagian CFGWebStorybyHHC sesuai data blog kamu:

brand: {
  logo: 'https://www.NAMABLOG.com/path/ke/logo.jpg',
  name: 'Nama Blog Kamu'
},
blog: {
  feedUrl: 'https://www.NAMABLOG.com/feeds/posts/default',
  // ... sesuaikan semua field
}

Konfigurasi Stories Array — Edit STORIESWebStorybyHHC sesuai story yang ingin kamu tampilkan. Minimal satu story object harus ada.
Upload & Test — Upload kode, buka halaman, dan cek apakah circle story muncul. Klik circle dan pastikan story membuka dengan benar.
Cek Console Browser — Buka DevTools > Console dan pastikan tidak ada error JavaScript. Error paling umum biasanya karena ID element yang salah atau URL feed yang tidak accessible.

Checklist Sebelum Deploy

URL logo dan avatar sudah benar dan bisa diakses publik.
blog.feedUrl sudah dites manual di browser — pastikan return JSON valid.
Semua URL music.src di track bisa diputar (tidak ada CORS issue).
Versi IndexedDB di-set sesuai (ubah kalau ada perubahan besar pada story data).
Test di mobile dan desktop.
Test keyboard navigation (← → Esc).

Troubleshooting — Common Issues

Story tidak muncul sama sekali

Cek console browser — ada error JS?
Pastikan semua ID element HTML ada di halaman.
Pastikan script JS sudah di-load setelah DOM ready.

Blog feed tidak load / story kosong

Test URL feed langsung di browser: https://blog.com/feeds/posts/default?alt=json&max-results=1
Pastikan blog Blogger kamu tidak di-set private.
Cek apakah ada CORS issue (biasanya tidak untuk JSONP).
Clear IndexedDB: DevTools > Application > IndexedDB > Delete database.

Video tidak autoplay

Ini normal behavior browser. Kode sudah otomatis handle dengan fallback ke muted autoplay + tombol unmute. Pastikan video URL valid dan accessible (tidak ada CORS blocking).

Music tidak bisa diputar

Cek apakah server audio mendukung CORS atau tidak. Beberapa hosting blokir cross-origin audio request. Gunakan hosting yang CORS-friendly (CDN publik, Google Drive direct link, dsb).

Telegram Bot File URL!
URL api.telegram.org/file/... seringkali tidak reliable untuk audio karena ada rate limiting dan expiry. Gunakan hosting audio yang lebih stabil untuk produksi.

Cache tidak terupdate / konten lama terus tampil

Ganti versi database IndexedDB di kode:

// Ganti 'ws_v5_hhc' ke 'ws_v6_hhc' (atau versi berapapun)
var r = indexedDB.open('ws_v6_hhc', 1);

Advanced Tips & Best Practices

Optimasi Gambar untuk Story

Story adalah konten full-screen — ukuran gambar sangat berpengaruh ke performance. Berikut rekomendasi:

Elemen	Rasio	Ukuran Recommended
Background slide	9:16 (portrait)	720×1280px max
Circle image	1:1 (square)	100×100px cukup
Brand logo	1:1	64×64px
Music thumbnail	1:1	200×200px
Stats images grid	1:1	200×200px per image

Tips Copywriting untuk Story

✔ Title di cover: maksimal 2 baris, gunakan \n untuk line break yang kamu kontrol.
✔ Quote: under 150 karakter paling powerful. Jangan terlalu panjang.
✔ Feature desc: 5-8 kata per feature. Singkat, padat, langsung to the point.
✔ CTA: satu pesan, satu aksi. Jangan banyak opsi di satu CTA slide.
✔ Stats: angka yang memorable — round number seperti 500, 1000 lebih impactful dari 487.

Story yang bagus bukan cuma yang visual-nya keren — tapi yang bisa bikin orang berhenti scroll dan beneran baca sampai selesai.
Han Haoyu

Urutan Story yang Optimal

Berdasarkan pengalaman, urutan story circle yang paling engaging:

Story LIVE/terbaru — taruh paling kiri karena mata natural baca dari kiri.
Blog feed story — konten dinamis, selalu fresh.
Sponsored story — di tengah atau setelah konten organik.
Music story — biasanya di akhir karena sifatnya lebih leisure.

API Reference — Fungsi Global

Beberapa fungsi di-expose ke window object untuk dipakai sebagai inline handler:

wsHSlideWebStorybyHHC: .wsHSlideWebStorybyHHC(uid, total, dir) ⇒ void; Navigasi slider horizontal satu step. dir: 1 (next) atau -1 (prev).
wsHSlideToWebStorybyHHC: .wsHSlideToWebStorybyHHC(uid, total, idx) ⇒ void; Langsung loncat ke index tertentu dalam horizontal slider.
wsMPWebStorybyHHC: .wsMPWebStorybyHHC(action, trackIdx) ⇒ void; Kontrol music player. action: 'toggle' | 'prev' | 'next'.
wsMPSpeedWebStorybyHHC: .wsMPSpeedWebStorybyHHC(btn, speed) ⇒ void; Ubah playback speed audio. speed: 0.75 | 1 | 1.25 | 1.5.
wsNextStoryWebStorybyHHC: .wsNextStoryWebStorybyHHC() ⇒ void; Pindah ke story berikutnya (dari end screen).
wsRestartStoryWebStorybyHHC: .wsRestartStoryWebStorybyHHC() ⇒ void; Restart story saat ini dari slide pertama (dari end screen).

Penutup — You're Ready!

Selamat — kamu udah baca dokumentasi WebStory by HHC yang paling lengkap dan komprehensif yang pernah ada! Sekarang kamu punya semua yang kamu butuhkan untuk:

Setup dan konfigurasi WebStory dari nol.
Membuat berbagai tipe story sesuai kebutuhan konten.
Mengintegrasikan blog feed otomatis.
Membangun music player story yang keren.
Optimize performance dengan caching.
Troubleshoot masalah yang mungkin muncul.

Kalau kamu punya pertanyaan, feedback, atau request fitur — langsung kunjungi www.hanhaoyu.com dan tinggalkan komentar. Han Haoyu selalu baca dan respond setiap komentar. Happy building! 🚀

Prefetch Manager

HAN HAOYU

Fitur Web Story Ala Ala Instagram + WhatsApp + Telegram by Han Haoyu Platform

Apa Itu WebStory by HHC?

Struktur Kode & Arsitektur

Object Konfigurasi Global

Brand Configuration

Array Stories — Pusat Kendali

Circle Configuration — Detail

Semua Tipe Page — 9 Layout Siap Pakai

Story Mode: Blog Feed Otomatis

Struktur Slide yang Di-generate Otomatis

Story Mode: Music Player Terintegrasi

Fitur Music Player yang Tersedia

Story Mode: Sponsored Content

Sistem IndexedDB Cache — Kenapa Ini Genius

Alur Kerja Cache

Sistem Navigasi — Multi-Input Support

Cross-Story Navigation

Progress Bar & Timing System

Behavior per Tipe Slide

Pause on Hover

Cara Instalasi & Implementasi

Checklist Sebelum Deploy

Troubleshooting — Common Issues

Advanced Tips & Best Practices

Optimasi Gambar untuk Story

Tips Copywriting untuk Story

Urutan Story yang Optimal

API Reference — Fungsi Global

Penutup — You're Ready!

About the author

Posting Komentar

Gabung dalam percakapan

Gabung dalam percakapan

Bio Link Han Haoyu (Muhammad Hayyu Hani Nuril) | Bio Link Sosial Media hanhaoyu.com

Menggunakan WordPress untuk Membuat Blog untuk Bisnis Anda

Membuat dan Mendesain Produk Digital menggunakan Aplikasi Canva

Cara membuat Cookies menggunakan Vanilla Javascript

136 Komponen Base Template hanhaoyu.com

Prefetch Manager

Switch Account (email)

Fitur Web Story Ala Ala Instagram + WhatsApp + Telegram by Han Haoyu Platform

Apa Itu WebStory by HHC?

Struktur Kode & Arsitektur

Object Konfigurasi Global

Brand Configuration

Array Stories — Pusat Kendali

Circle Configuration — Detail

Semua Tipe Page — 9 Layout Siap Pakai

Story Mode: Blog Feed Otomatis

Struktur Slide yang Di-generate Otomatis

Story Mode: Music Player Terintegrasi

Fitur Music Player yang Tersedia

Story Mode: Sponsored Content

Sistem IndexedDB Cache — Kenapa Ini Genius

Alur Kerja Cache

Sistem Navigasi — Multi-Input Support

Cross-Story Navigation

Progress Bar & Timing System

Behavior per Tipe Slide

Pause on Hover

Cara Instalasi & Implementasi

Checklist Sebelum Deploy

Troubleshooting — Common Issues

Advanced Tips & Best Practices

Optimasi Gambar untuk Story

Tips Copywriting untuk Story

Urutan Story yang Optimal

API Reference — Fungsi Global

Penutup — You're Ready!

About the author

Posting Komentar

Gabung dalam percakapan

Gabung dalam percakapan