The Ultimate Component Library: Panduan All-in-One Fitur Hanhaoyu.com (bagian 2)

Daftar Isi

---

Kamu Sudah Sampai di Bagian 2 — Selamat Datang di Level Berikutnya!

Kalau di Bagian 1 kita udah ngupas tuntas 30 komponen fondasi Han Haoyu Platform — dari SEO snippet sampai pola heading dokumentasi — maka di Bagian 2 ini kita masuk ke wilayah yang jauh lebih menarik.

Ini adalah komponen-komponen yang bikin perbedaan antara "blog biasa" dengan "platform konten yang serius". Accordion yang bisa dilipat-buka, multi-tab code block yang bikin perbandingan kode jadi elegan, sistem gambar grid dan scroll gallery yang bikin artikel tutorial jadi eye-candy, sampai alert box dengan segala variannya yang bikin peringatan dan info penting nggak bisa diabaikan.

Total ada 30 komponen baru yang kita bedah di bagian ini — Komponen 31 sampai 60. Setiap komponen dilengkapi dengan intro kontekstual yang nggak basa-basi, demo kode yang bisa langsung di-copy-paste, dan tentu saja referensi silang ke komponen-komponen lain yang relevan.

Oh iya, satu hal lagi — artikel ini sendiri ditulis menggunakan komponen-komponen dari platform ini. Jadi sambil baca, kamu juga lagi ngeliat langsung bagaimana setiap komponen bekerja dalam konteks artikel nyata. Meta? Iya. Tapi itulah yang bikin dokumentasi ini beda.

Pastikan Udah Baca Bagian 1!
Beberapa komponen di Bagian 2 ini merujuk ke komponen yang sudah dibahas di Bagian 1 (misalnya blok kode, tabel, dan heading). Kalau ada yang nggak familiar, silakan cek Encyclopedia of Components Bagian 1 dulu sebagai fondasi.

---

Script IIFE / Self-Invoking Function

JavaScript yang Langsung Jalan Tanpa Dipanggil

Ada kalanya kamu punya JavaScript yang harus langsung dieksekusi begitu browser membacanya — tanpa menunggu dipanggil fungsinya, tanpa event listener, langsung jalan. Inilah kegunaan IIFE atau Immediately Invoked Function Expression. Di Han Haoyu Platform, pola ini sering dipakai untuk inisialisasi fitur otomatis seperti lightbox, image handler, atau komponen interaktif lainnya.

Yang bikin pola ini powerful: kamu bisa passing konfigurasi lewat parameter options, jadi satu blok script bisa dikustomisasi tanpa mengubah logika internalnya. Ubah selectornya, ubah class-nya, ubah behavior-nya — cukup dari bagian options di bagian bawah.

Demo Langsung

(function (options) {
  // Semua logika ada di sini
  // Akses konfigurasi via: options.selectors, options.ignoreClass, dll
}).call(this, {
  selectors: "#postBody img",
  ignoreClass: "noLb",
  classes: {
    imageWrapper: "NamaClassWrapper",
    lightboxWrapper: "NamaClassLightbox"
  }
});

Versi lengkap dalam konteks tag script di dalam HTML post:

<script>
(function (options) {
  // Cari semua elemen yang cocok dengan selector
  const elements = document.querySelectorAll(options.selectors);

  elements.forEach(function(el) {
    // Lewati elemen dengan ignoreClass
    if (el.classList.contains(options.ignoreClass)) return;

    // Bungkus elemen dengan wrapper class
    const wrapper = document.createElement('div');
    wrapper.className = options.classes.imageWrapper;
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
  });

}).call(this, {
  selectors: "#postBody img",
  ignoreClass: "noLb",
  classes: {
    imageWrapper: "imgWrapper",
    lightboxWrapper: "lbWrapper"
  }
});
</script>

Pola struktur IIFE yang digunakan di Han Haoyu Platform:

Bagian	Penjelasan
(function(options){ ... })	Definisi function anonim — tanda kurung luar bikin dia langsung bisa di-invoke
.call(this, { ... })	Invoke langsung dengan konteks this dan passing object konfigurasi
options.selectors	CSS selector target elemen yang akan diproses
options.ignoreClass	Class yang dikecualikan dari pemrosesan — elemen dengan class ini dilewati
options.classes	Object berisi nama-nama class yang akan di-inject ke elemen hasil proses

Relevansi Silang

• Komponen 21 (Script Type Module): Alternatif untuk JS modern yang butuh import/export — Module adalah pilihan jika perlu ES Module, IIFE untuk script yang harus backward-compatible.
• Komponen 56 (Gambar dengan Lightbox Dinonaktifkan): Atribut data-lightbox='false' dan class noLb di Komponen 80 adalah target dari ignoreClass dalam IIFE lightbox handler ini.
• Komponen 125–130 (Custom Code Placement): Script IIFE yang bersifat global sebaiknya diletakkan di zona khusus sebelum </body> via Edit HTML template, bukan di setiap post satu-satu.

---

Heading H2 dengan Label Prefix (data-before)

Heading yang Punya Badge Sendiri

Dokumentasi API atau artikel yang berisi banyak "metode", "cara", atau "langkah bernomor" sering punya masalah ini: judul-judulnya kelihatan mirip satu sama lain. "Cara pertama", "Cara kedua" — tanpa visual differentiator yang jelas, navigasinya jadi berat di mata.

Solusinya ada di atribut data-before pada heading H2. Dengan ini, kamu bisa tambahkan label atau badge yang muncul sebelum teks heading utama — memberikan konteks langsung dan memudahkan navigasi secara visual. Ini juga yang bikin artikel Han Haoyu Platform punya "look" dokumentasi yang konsisten dan professional.

Demo Langsung

<!-- Penomoran metode -->
<h2 data-before='Metode 1: '>Instalasi via NPM</h2>
<h2 data-before='Metode 2: '>Instalasi Manual via ZIP</h2>
<h2 data-before='Metode 3: '>Instalasi via CDN</h2>

<!-- Label kategori -->
<h2 data-before='Deprecated: '>Cara Lama yang Sudah Tidak Direkomendasikan</h2>
<h2 data-before='New in v3.0: '>Fitur Terbaru yang Baru Saja Dirilis</h2>

<!-- Label tipe konten -->
<h2 data-before='⚙️ Konfigurasi: '>Setup Awal yang Wajib Dilakukan</h2>
<h2 data-before='🔥 Pro Tips: '>Trik Tersembunyi yang Jarang Diketahui</h2>

Perhatikan tanda spasi setelah teks prefix — misalnya 'Metode 1: ' bukan 'Metode 1:'. Spasi itu penting supaya ada jarak antara label dan teks heading utama saat di-render. Kecil tapi bikin perbedaan besar.

Relevansi Silang

• Komponen 16 (Heading H3 & H4): data-before juga tersedia di H4 (Komponen 49) — untuk penomoran sub-sub-bagian dalam satu H2 section.
• Komponen 30 (Pola Heading Dokumentasi): Kombinasikan data-before di H2 dengan H3 dan H4 biasa untuk struktur dokumentasi multi-metode yang sangat terorganisir.
• Komponen 49 (H4 dengan data-before): Versi yang sama tapi untuk level H4 — untuk penomoran di tingkat yang lebih dalam.
• Komponen 23 (TOC Otomatis): TOC akan membaca teks heading termasuk konten dari data-before — pastikan label prefix kamu ringkas dan deskriptif.

---

Blok Kode dengan Label File (data-source)

Kode yang Tahu Dari Mana Asalnya

Tutorial teknis yang baik selalu menjawab satu pertanyaan implisit dari reader: "kode ini ditaruh di file mana?". Tanpa jawaban itu, reader sering bingung — apakah kode ini masuk ke config.js? Ke index.html? Atau ke file baru yang harus dibuat?

Atribut data-source menjawab pertanyaan itu secara visual — nama file muncul sebagai label di atas blok kode, persis seperti IDE atau code editor profesional.

Demo Langsung

<!-- Tampilkan nama file di atas blok kode -->
<pre data-source='worker.js'><code>addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  return new Response('Hello, World!');
}</code></pre>

<!-- Dengan path lengkap -->
<pre data-source='src/components/Button.jsx'><code class='language-js'>export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}</code></pre>

<!-- Kombinasi data-source + data-comment (nama file + label bahasa) -->
<pre data-source='_config.yml' data-comment='.yaml'><code>baseurl: "https://hanhaoyu.com"
title: "Han Haoyu Platform"
description: "Documentation & Components"</code></pre>

Kombinasi Terbaik: Gabungkan data-source dengan data-comment dan class='language-xxx' untuk tampilan blok kode yang paling profesional: nama file di header, label bahasa di pojok, dan syntax highlighting otomatis. Ini adalah "triple combo" yang selalu dipakai di artikel-artikel tutorial Han Haoyu Platform.

Relevansi Silang

• Komponen 06 (Blok Kode Dasar): data-source adalah satu dari tiga modifier utama blok kode — yang lain adalah data-comment dan data-lines.
• Komponen 43 (Syntax Highlighting): Pasangkan selalu dengan class='language-xxx' di dalam code untuk highlighting otomatis.
• Komponen 68 (data-comment): Atribut pelengkap yang menampilkan label di pojok kanan atas blok kode — berbeda dari data-source yang ada di kiri/header.

---

Teks Bergaris Bawah (Underline)

Penekanan yang Berbeda dari Bold dan Italic

Di antara opsi penekanan teks — bold, italic, dan underline — masing-masing punya "nuansa" yang berbeda. Bold untuk informasi paling penting. Italic untuk istilah teknis, judul, atau penekanan ringan. Dan underline? Underline punya efek visual yang paling "menggugah perhatian" untuk kata-kata atau frasa yang perlu reader perhatikan tanpa harus menebalkan teks.

Di Han Haoyu Platform, underline diimplementasikan dengan tag <u> — elemen HTML yang tepat untuk konten yang secara semantik "perlu digarisbawahi" (bukan sekadar link, karena link punya stilingnya sendiri).

Demo Langsung

<!-- Underline di dalam paragraf biasa -->
<p>Teks biasa, <u>teks yang perlu digarisbawahi</u>, lanjut teks biasa.</p>

<!-- Kombinasi dengan bold -->
<p>Pastikan kamu <b><u>tidak melewatkan langkah ini</u></b> — konsekuensinya signifikan.</p>

<!-- Di dalam alert warning -->
<div class='alert warning outline'><b>Perhatian!</b>
  Gunakan <u>hanya satu kali</u> per session. Penggunaan berulang bisa menyebabkan konflik data.
</div>

<!-- Di dalam heading -->
<h2>Siapa Saja <u>Developer yang Cocok</u> Pakai Platform Ini?</h2>

Hindari memakai underline untuk link — browser sudah punya styling default untuk <a> yang kadang juga underline. Memakai <u> untuk non-link bisa membingungkan reader yang mengira itu adalah hyperlink yang bisa diklik.

Relevansi Silang

• Komponen 27 (Strong): Underline dan strong keduanya adalah opsi penekanan — pilih berdasarkan konteks: strong untuk penekanan semantik kuat, underline untuk visual differentiation tanpa hierarki.
• Komponen 37 (Italic): Ketiga opsi — bold, italic, underline — bisa dikombinasikan secara fleksibel, tapi jangan terlalu banyak sekaligus atau teks jadi susah dibaca.
• Komponen 46 (Alert Warning): Underline sering dipakai di dalam alert box untuk memperkuat penekanan di bagian terpenting dari peringatan.

---

Tabel Tanpa Class Sticky (Bordered + Stripped Saja)

Tabel Simpel untuk Data yang Nggak Perlu Fitur Ekstra

Tidak semua data butuh header sticky yang mengambang saat kamu scroll. Kadang kamu cuma butuh tabel bersih — baris dan kolom — tanpa fitur ekstra yang menambah kompleksitas visual. Untuk kasus-kasus seperti ini, versi tabel bordered stripped tanpa sticky adalah pilihan tepat.

Plus, kamu juga bisa menambahkan catatan atau keterangan di bawah tabel menggunakan kombinasi span berwarna — cara elegan untuk memberi konteks tambahan tanpa merusak layout tabel.

Demo Langsung

Tabel Simpel Bordered + Stripped

<div class='table bordered stripped'>
  <table>
    <thead>
      <tr>
        <th>Environment</th>
        <th>Service Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>development</code></td>
        <td><code>api-dev</code></td>
        <td><code>active</code></td>
      </tr>
      <tr>
        <td><code>staging</code></td>
        <td><code>api-staging</code></td>
        <td><code>active</code></td>
      </tr>
      <tr>
        <td><code>production</code></td>
        <td><code>api-prod</code></td>
        <td><mark class='block red' data-before='Restricted Access'>restricted</mark></td>
      </tr>
    </tbody>
  </table>
</div>
<span style='color:var(--synxRed);'>*</span> Environment production hanya bisa diakses oleh tim DevOps dengan izin khusus.

Hasilnya punya keterangan bintang merah yang otomatis match dengan warna tema platform — karena menggunakan CSS variable --synxRed bukan hardcoded hex color.

Relevansi Silang

• Komponen 25 (Tabel dengan Sticky): Gunakan sticky ketika tabelnya punya banyak baris dan scroll horizontal panjang. Tanpa sticky untuk tabel pendek yang langsung terlihat semua.
• Komponen 40 (Teks Warna Custom): span dengan color:var(--synxRed) untuk keterangan tabel adalah pola dari Komponen 40 yang diaplikasikan secara spesifik.
• Komponen 39 (Mark di Tabel): Mark dengan class warna bisa dikombinasikan di dalam sel tabel untuk highlight nilai yang perlu perhatian khusus.

---

Ordered List Biasa (ol tanpa class steps)

Daftar Bernomor yang Bukan Tutorial

Penting untuk dibedakan: ol class='steps' (Komponen 10) adalah untuk langkah-langkah instruksional — prosedur yang harus diikuti secara berurutan. Sedangkan ol biasa tanpa class apapun adalah untuk daftar opsi, pilihan, atau item bernomor yang nggak harus diikuti sebagai prosedur.

Bedanya bukan cuma semantik — styling-nya pun berbeda. ol.steps punya padding, spacing, dan visual treatment yang lebih menonjol untuk memudahkan navigasi tutorial. ol biasa lebih compact dan cocok untuk daftar informasi.

Demo Langsung

<!-- Daftar opsi atau pilihan bernomor -->
<ol>
  <li><b>Free Plan</b>: Akses ke semua fitur dasar tanpa biaya, dengan batasan 100 request per hari.</li>
  <li><b>Pro Plan</b>: Unlimited request, priority support, dan akses ke fitur beta eksklusif.</li>
  <li><b>Enterprise Plan</b>: Custom SLA, dedicated server, dan onboarding session dengan tim Han Haoyu.</li>
</ol>

<!-- Daftar urutan berdasarkan prioritas (bukan instruksi) -->
<ol>
  <li><b>Performance</b>: Kecepatan load halaman adalah prioritas nomor satu.</li>
  <li><b>Accessibility</b>: Semua konten harus bisa diakses oleh semua pengguna.</li>
  <li><b>Aesthetics</b>: Visual yang bagus penting, tapi bukan yang utama.</li>
</ol>

Panduan cepat untuk memilih antara ol biasa vs ol.steps:

Pertanyaan	Pakai ol.steps	Pakai ol biasa
Apakah urutannya wajib diikuti?	✓ Ya	✗ Tidak
Apakah ini instruksi langkah demi langkah?	✓ Ya	✗ Tidak
Apakah ada kode / note nested di dalamnya?	✓ Ya	✗ Tidak
Apakah ini daftar opsi, fitur, atau perbandingan?	✗ Tidak	✓ Ya

Relevansi Silang

• Komponen 10 (ol.steps): Ketika konten berubah jadi instruksional dengan kode dan note nested — upgrade dari ol biasa ke ol.steps.
• Komponen 45 (ul.steps): Untuk daftar non-instruksional tapi butuh visual styling lebih dari ul biasa — pilihan di antara ol biasa dan ol.steps.
• Komponen 112 (ul biasa dengan mixed formatting): Variasi ul biasa dengan ✔ simbol dan mix bold/italic — style yang lebih bebas untuk konten non-formal.

---

Teks Italic

Penekanan Halus yang Punya Banyak Fungsi

Italic adalah si multifungsi di antara semua opsi pemformatan teks. Dalam satu artikel, italic bisa dipakai untuk: nama produk atau fitur, istilah teknis yang baru diperkenalkan, judul buku atau film, frasa bahasa asing, atau sekadar penekanan suara yang berbeda dari teks sekitarnya — kayak kalau kamu ngomong dengan nada sedikit berbeda.

Demo Langsung

<!-- Menekankan nama fitur atau produk -->
<p>Klik <b>Deploy</b> karena kita baru bisa edit kode setelah deploy worker <i>Hello World!</i> dulu.</p>

<!-- Istilah teknis baru -->
<p>Han Haoyu Platform menggunakan pendekatan <i>component-first documentation</i> yang memastikan setiap fitur terdokumentasi dengan standar yang konsisten.</p>

<!-- Penekanan naratif -->
<p>Kamu bisa saja skip bagian ini — tapi <i>jangan</i>. Ini bagian yang paling sering jadi sumber masalah.</p>

<!-- Di dalam heading -->
<h3><i>Roadmap Hidup Mahasiswa</i> yang Aku Susun Sendiri</h3>

<!-- Tag em untuk penekanan semantik (lebih tepat secara HTML5) -->
<p>Nilai yang dikembalikan <em>mungkin</em> berbeda tergantung dari versi API yang digunakan.</p>

Secara teknis HTML5, ada dua tag untuk teks miring: <i> untuk italic visual (tanpa makna semantik tambahan) dan <em> untuk emphasis semantik (screen reader akan membacanya dengan penekanan berbeda). Dalam praktiknya di Han Haoyu Platform, keduanya digunakan sesuai konteks — tapi untuk dokumentasi yang diakses lewat browser visual, keduanya memberikan hasil tampilan yang sama.

Relevansi Silang

• Komponen 27 (Strong): Italic dan strong adalah dua ujung dari spektrum penekanan — italic untuk nuansa halus, strong untuk penekanan kuat dan kritis.
• Komponen 34 (Underline): Tiga opsi penekanan — italic, bold, underline — bisa dikombinasikan tapi jangan berlebihan dalam satu kalimat.
• Komponen 53 (Drop Cap & pIndent): Italic sering muncul bersamaan dengan gaya penulisan lebih naratif yang juga menggunakan drop cap dan pIndent.

---

Navigasi Antar Bagian dengan Simbol Panah Teks

Breadcrumb Inline yang Kasih Konteks Navigasi

Dalam tutorial yang mengarahkan user untuk pergi ke menu tertentu di sebuah aplikasi atau dashboard, menulis "Pergi ke Settings lalu klik Advanced lalu pilih API Keys" itu kurang jelas — dan kurang visual. Menggunakan simbol panah > sebagai pemisah path navigasi jauh lebih intuitif dan ringkas.

Demo Langsung

<!-- Navigasi menu aplikasi -->
<p>Buka <b>Settings</b> &gt; <b>Advanced</b> &gt; <b>API Keys</b>.</p>

<!-- Navigasi Blogger -->
<p>Masuk ke dashboard Blogger, lalu ke <b>Theme</b> &gt; <b>Edit HTML</b>.</p>

<!-- Navigasi dengan konteks lebih panjang -->
<p>Di Cloudflare dashboard, navigasi ke <b>Workers & Pages</b> &gt; <b>Workers</b> &gt; <b>nama-worker-kamu</b> &gt; <b>Settings</b> &gt; <b>Variables</b>.</p>

<!-- Navigasi ke tab atau section -->
<p>Ke bagian <b>Rules</b> &gt; <b>Overview</b>.</p>

Entity HTML yang dipakai adalah > yang merender sebagai karakter >. Dikombinasikan dengan teks bold di sekitarnya, hasilnya menjadi breadcrumb navigasi yang bersih:

Contoh render: Settings > Advanced > API Keys

Relevansi Silang

• Komponen 28 (Tanda Panah Unicode ⇒): Berbeda konteksnya — ⇒ untuk return value API, > untuk breadcrumb navigasi. Jangan ketukar!
• Komponen 10 (ol.steps): Navigasi breadcrumb sering muncul di dalam langkah-langkah tutorial sebagai petunjuk "pergi ke mana" sebelum melakukan sesuatu.

---

Mark di Dalam Tabel

Highlight yang Bukan Hanya untuk Blok Kode

Banyak yang tahu mark bisa dipakai di dalam blok kode (Komponen 07). Tapi tidak semua sadar bahwa mark juga bekerja dengan sangat baik di dalam sel tabel — untuk highlight domain yang perlu diganti, nilai yang perlu diperhatikan, atau cell yang statusnya berbeda dari yang lain.

Demo Langsung

<!-- Mark di dalam sel tabel dengan kode -->
<div class='table bordered stripped'>
  <table>
    <thead>
      <tr>
        <th>Route Pattern</th>
        <th>Target</th>
        <th>Keterangan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code><mark>www.namadomain.com</mark>/*</code></td>
        <td><code>worker-production</code></td>
        <td>Ganti domain sesuai kepunyaan kamu</td>
      </tr>
      <tr>
        <td><code><mark>api.namadomain.com</mark>/v1/*</code></td>
        <td><code>worker-api</code></td>
        <td>Subdomain API — sesuaikan juga</td>
      </tr>
    </tbody>
  </table>
</div>

Dengan ini, reader langsung tau: teks yang di-highlight adalah bagian yang harus mereka ganti atau perhatikan — bahkan di dalam konteks tabel yang padat informasi.

Catatan Penting Tentang Mark di Tabel! Berbeda dengan mark di dalam blok kode yang sering pakai data-before, mark di dalam tabel biasanya cukup mark standar tanpa label — karena sel di sebelahnya (kolom "Keterangan") sudah memberikan konteks yang cukup. Jadi nggak perlu berlebihan dengan tooltip tambahan.

Relevansi Silang

• Komponen 07 (Mark di Kode): Prinsip yang sama — mark sebagai visual indicator "ini yang perlu diperhatikan/diganti" — tapi diterapkan di konteks tabel, bukan blok kode.
• Komponen 47 (Mark dengan Class Warna): Di dalam tabel, mark dengan class warna (block red, purple) bisa dipakai untuk status atau kategori yang perlu visual differentiator kuat.
• Komponen 25 & 35 (Tabel): Mark di tabel selalu di dalam salah satu dari kedua tipe tabel ini.

---

Teks Warna Custom dengan CSS Variable

Warna yang Sinkron dengan Tema, Bukan Hardcoded

Ini adalah salah satu detail teknis kecil yang bikin perbedaan besar dalam jangka panjang. Kalau kamu mau teks berwarna merah untuk penanda penting, kamu bisa tulis color: #FF0000 — dan itu akan bekerja. Tapi ada masalahnya: kalau tema berubah atau platform pindah ke dark mode, warna hardcoded itu tidak akan ikut menyesuaikan.

Solusinya adalah menggunakan CSS custom variable yang sudah didefinisikan di tema Han Haoyu Platform — sehingga warna otomatis menyesuaikan dengan skema warna tema yang aktif.

Demo Langsung

<!-- Teks merah menggunakan variable tema -->
<span style='color:var(--synxRed);'>*Teks berwarna merah sesuai tema</span>

<!-- Untuk keterangan footnote di bawah tabel -->
<span style='color:var(--synxRed);'>*</span> Nilai ini akan berubah di versi berikutnya.

<!-- Penanda wajib di form atau instruksi -->
<p>Field yang ditandai <span style='color:var(--synxRed);'>*</span> adalah wajib diisi.</p>

<!-- Kombinasi dengan teks lain -->
<p><span style='color:var(--synxRed);'>Perhatian:</span> Fitur ini masih dalam tahap beta dan bisa berubah tanpa pemberitahuan.</p>

Penggunaan paling umum dari teks warna ini di Han Haoyu Platform adalah sebagai tanda bintang * merah untuk footnote di bawah tabel — seperti yang sudah kita lihat di Komponen 35.

Relevansi Silang

• Komponen 35 (Tabel Simpel): Keterangan bintang merah di bawah tabel adalah aplikasi langsung dari komponen ini.
• Komponen 47 (Mark dengan Class Warna): Alternatif yang lebih structured — mark dengan class red lebih cocok di dalam kode/tabel, span color-variable lebih cocok di dalam teks paragraf.

---

Alert Box / Info Box

Pesan Penting yang Nggak Bisa Di-scroll Begitu Saja

Alert box adalah versi "note box yang lebih besar, lebih mencolok, dan lebih sulit diabaikan". Kalau note box cocok untuk catatan inline di tengah paragraf, alert box adalah standalone — dia berdiri sendiri, punya latar belakang warna dan border yang mencolok, dan secara visual "memaksa" reader untuk berhenti dan membacanya.

Perbedaan utama dengan note box: alert box menggunakan class alert, punya lebih banyak varian warna dan style, dan umumnya tampil sebagai blok penuh bukan inline paragraph.

Demo Langsung

Alert Info Outline (Paling Sering Dipakai)

<p class='alert info outline'><b>Informasi Penting</b>
  Teks penjelasan info penting kamu di sini. Bisa pakai <b>teks tebal</b> di dalamnya untuk memperkuat bagian tertentu.
</p>

<!-- Versi div (lebih semantik untuk konten blok) -->
<div class='alert info outline'><b>Tahukah Kamu?</b>
  Han Haoyu Platform mendukung hingga 9 tab dalam satu grup multi-tab code block. Berguna banget untuk tutorial yang perlu cover banyak platform sekaligus!
</div>

Semua Varian Alert Box

<!-- Varian Solid (background penuh) -->
<div class='alert'>Alert default</div>
<div class='alert info'>Alert info solid</div>
<div class='alert warning'>Alert warning solid</div>
<div class='alert success'>Alert success solid</div>
<div class='alert error'>Alert error solid</div>

<!-- Varian Outline (border saja, background transparan) -->
<div class='alert outline'>Alert default outline</div>
<div class='alert info outline'>Alert info outline</div>
<div class='alert warning outline'>Alert warning outline</div>
<div class='alert success outline'>Alert success outline</div>
<div class='alert error outline'>Alert error outline</div>

Varian	Kapan Dipakai
alert info	Informasi berguna atau tips yang perlu dilihat — tidak mengancam
alert warning	Peringatan — bisa jalan tanpa ini, tapi ada risiko
alert success	Konfirmasi positif — "kalau muncul ini, kamu berhasil"
alert error	Error atau kondisi kritis — sesuatu yang wajib diperbaiki
+ outline	Versi lebih subtle dengan border saja — kurang agresif secara visual

Relevansi Silang

• Komponen 08 (Note Box): Note box untuk catatan inline, alert box untuk pesan standalone yang butuh perhatian penuh.
• Komponen 46 (Alert Warning): Spesifikasi lengkap alert warning — berbeda dari alert info yang ada di komponen ini.
• Komponen 66 (Semua Varian Alert): Referensi komplet semua kombinasi varian alert yang tersedia.
• Komponen 113 (Alert Error sebagai Informasi): Penggunaan kreatif alert error sebagai box "Informasi!" — tidak selalu harus untuk error teknis.

---

Multi-Tab Code Block (Tab Switcher Sebelum/Sesudah)

Perbandingan Kode yang Elegan Tanpa Harus Scroll Naik-Turun

Ini salah satu fitur paling "wow" di Han Haoyu Platform — dan juga yang paling sering bikin orang nanya "ini gimana buatnya?". Multi-tab code block memungkinkan kamu menampilkan beberapa versi kode dalam satu tempat yang sama, dengan tombol tab untuk berpindah di antaranya. Tanpa reload, tanpa scroll, langsung switch.

Penggunaan paling klasik: menampilkan kode "Sebelum" dan "Sesudah" perubahan. Tapi bisa juga dipakai untuk: kode di berbagai bahasa, konfigurasi untuk berbagai platform, atau step-by-step yang ditampilkan satu per satu.

Demo Langsung

Struktur Dasar (2 Tab: Sebelum & Sesudah)

<div class='pre tabs'>

  <!-- Radio button untuk logika active tab (CSS-only, no JS!) -->
  <input id='preT1-1' type='radio' name='preTab' checked=''/>
  <input id='preT1-2' type='radio' name='preTab'/>

  <!-- Label tab yang terlihat user -->
  <div>
    <label for='preT1-1' data-text='Sebelum'></label>
    <label for='preT1-2' data-text='Sesudah'></label>
  </div>

  <!-- Konten tab 1 -->
  <pre class='preC1-1'><code class='language-xml'>/* Kode lama yang belum dioptimasi */
.container {
  width: 960px;
  margin: 0 auto;
}</code></pre>

  <!-- Konten tab 2 -->
  <pre class='preC1-2'><code class='language-xml'>/* Kode baru dengan responsive design */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}</code></pre>

</div>

Cara kerja sistem tab ini murni CSS — bukan JavaScript. Radio input yang tersembunyi digunakan sebagai state toggle, dan CSS :checked selector yang handle tampilan tab aktif.

Aturan Penamaan ID yang Wajib Diikuti!
Pola penamaan ID dan class konten harus konsisten: jika nama group tab adalah preTab1, maka input ID-nya preT1-1, preT1-2, dan class kontennya preC1-1, preC1-2. Angka tengah (1) harus sama antara input, label, dan konten dalam satu grup. Lihat Komponen 48 untuk cara handle banyak grup dalam satu halaman.

Relevansi Silang

• Komponen 48 (Multi-Tab dengan Name Berbeda): Ketika ada lebih dari satu grup tab dalam satu halaman — setiap grup WAJIB punya atribut name yang unik agar tidak saling interfere.
• Komponen 43 (Syntax Highlighting): Selalu pakai class='language-xxx' di dalam code di dalam multi-tab — highlighting tetap bekerja normal.
• Komponen 135 (Multi-Tab Before/After Pattern): Pola dokumentasi perubahan kode yang menggunakan multi-tab dengan label "Before" dan "After" — detail implementasinya.
• Komponen 136 (Steps + Pre Tabs Nested): Multi-tab bisa di-nested di dalam langkah tutorial untuk menampilkan kode per-platform dalam tutorial multi-step.

---

Blok Kode dengan Syntax Highlighting

Kode Berwarna yang Bikin Mata Senang dan Otak Cepat Paham

Syntax highlighting bukan sekadar estetika — ini adalah UX yang krusial untuk keterbacaan kode. Dengan warna berbeda untuk keyword, string, komentar, dan operator, reader bisa scan kode jauh lebih cepat dan langsung fokus ke bagian yang relevan. Han Haoyu Platform mendukung syntax highlighting via class language-xxx pada elemen code.

Demo Langsung

<!-- HTML / XML -->
<pre><code class='language-xml'>
<div class="container">
  <h1>Hello, World!</h1>
  <p class="intro">Selamat datang di Han Haoyu Platform.</p>
</div>
</code></pre>

<!-- JavaScript -->
<pre><code class='language-js'>
const greet = (name) => {
  return `Halo, ${name}! Selamat datang.`;
};

console.log(greet('Han Haoyu'));
// Output: Halo, Han Haoyu! Selamat datang.
</code></pre>

<!-- CSS -->
<pre><code class='language-css'>
.hero-section {
  display: flex;
  align-items: center;
  background: var(--primary-gradient);
  min-height: 100vh;
  padding: 2rem;
}
</code></pre>

<!-- JSON -->
<pre><code class='language-json'>
{
  "name": "han-haoyu-components",
  "version": "3.0.1",
  "description": "Component library for Han Haoyu Platform",
  "main": "index.js"
}
</code></pre>

Relevansi Silang

• Komponen 06 (Blok Kode Dasar): Syntax highlighting adalah "layer atas" dari blok kode dasar — keduanya selalu bersamaan.
• Komponen 33 (data-source): Triple combo terbaik: data-source (nama file) + data-comment (label bahasa) + class='language-xxx' (highlighting).
• Komponen 42 (Multi-Tab): Highlighting tetap bekerja di dalam tab — cukup tambahkan class di tag code di dalam tiap panel tab.

---

Mark Kosong (Placeholder Tanpa Nilai Default)

Field Kosong yang Berteriak "ISI AKU!"

Ada situasi di mana kamu mau tunjukkan ke reader bahwa ada sebuah nilai yang wajib mereka isi — tapi nggak ada nilai default yang bisa dijadikan placeholder. Bukan tanda tanya, bukan lorem ipsum, tapi benar-benar kosong dengan keterangan "ini harus diisi".

Itulah fungsi mark kosong. Dia adalah tag <mark> tanpa konten apapun di dalamnya, tapi punya data-before yang menjelaskan apa yang seharusnya ada di sana. Hasilnya di tampilan: sebuah area highlight kosong dengan label tooltip — visual yang sangat jelas mengatakan "taruh nilaimu di sini".

Demo Langsung

<!-- Measurement ID yang harus diisi user -->
<pre><code>gtag('config', '<mark data-before='Isi Google Analytics Measurement ID (format: G-XXXXXXXXXX)'></mark>');</code></pre>

<!-- API Key yang belum ada nilainya -->
<pre><code>Authorization: Bearer <mark data-before='Paste API Token dari dashboard kamu di sini'></mark></code></pre>

<!-- Project ID dalam konfigurasi -->
<pre data-source='firebase-config.js' data-comment='.js'><code class='language-js'>const firebaseConfig = {
  apiKey: "<mark data-before='API Key dari Firebase Console'></mark>",
  authDomain: "<mark data-before='Format: project-id.firebaseapp.com'></mark>",
  projectId: "<mark data-before='Project ID dari Firebase Console'></mark>"
};</code></pre>

Perbedaan Mark Kosong vs Mark Berisi: Gunakan mark kosong (tanpa konten) ketika reader benar-benar harus mengisi nilainya sendiri dan tidak ada contoh yang bisa diberikan. Gunakan mark berisi ketika ada nilai contoh yang bisa ditunjukkan — reader tinggal mengganti nilainya saja.

Relevansi Silang

• Komponen 07 (Mark di Kode): Mark kosong adalah variasi dari mark standar — prinsip penggunaannya sama, hanya kontennya yang kosong.
• Komponen 47 (Mark dengan Class Warna): Mark kosong juga bisa dikombinasikan dengan class warna: <mark class='block red' data-before='WAJIB diisi!'></mark> untuk penekanan lebih kuat.

---

Unordered List dengan Class Steps (ul.steps)

Bullet List yang Kelihatan Lebih Terstruktur dari Biasanya

Di antara ul biasa dan ol.steps, ada ul.steps yang mengisi "celah di tengah". Dia bukan daftar bernomor (bukan instruksi berurutan), tapi punya visual treatment yang lebih polished dari ul biasa — cocok untuk daftar yang tidak berurutan tapi butuh presentasi yang lebih structured dan profesional.

Demo Langsung

<!-- Checklist prasyarat (tidak harus berurutan) -->
<ul class='steps'>
  <li>Sudah punya akun Blogger yang aktif dan terverifikasi.</li>
  <li>Template Han Haoyu Platform sudah terpasang di blog.</li>
  <li>Memiliki akses <b>Edit HTML</b> pada template Blogger.</li>
  <li>Familiar dengan dasar-dasar HTML — setidaknya tau cara copy-paste kode.</li>
</ul>

<!-- Daftar fitur atau keunggulan -->
<ul class='steps'>
  <li>Sistem TOC otomatis yang membaca semua heading di artikel.</li>
  <li>Multi-tab code block dengan pure CSS — tanpa JavaScript tambahan.</li>
  <li>Download Box yang bisa di-customize dengan <code>data-*</code> attribute apapun.</li>
  <li>Accordion FAQ yang sudah terintegrasi schema microdata untuk SEO.</li>
</ul>

Relevansi Silang

• Komponen 10 (ol.steps): Untuk versi bernomor yang butuh urutan ketat — steps berurutan pakai ini.
• Komponen 36 (ol biasa): Untuk daftar bernomor yang informatif (opsi, perbandingan) — bukan instruksi.
• Komponen 112 (ul biasa): Versi paling bebas tanpa class apapun — untuk daftar informal atau konten yang lebih casual.

---

Alert Box Warning

Peringatan yang Serius — Beda dari Sekedar Info

Kalau alert info (alert info) adalah "hey, ada hal menarik yang perlu kamu tahu", maka alert warning adalah "hey, ini serius — kalau kamu abaikan ini bisa bermasalah". Perbedaannya bukan cuma warna — tapi juga konteks psikologis yang berbeda bagi reader.

Gunakan warning dengan bijak. Terlalu sering pakai warning bikin reader kebal — dan yang benar-benar kritis jadi tenggelam. Riservasi warning untuk situasi di mana ada risiko nyata: data loss, keamanan, atau tindakan yang tidak bisa di-undo.

Demo Langsung

<!-- Warning outline (lebih subtle) -->
<div class='alert warning outline'><b>Warning!</b>
  Teks peringatan kamu di sini. Bisa pakai <u>teks bergaris bawah</u> untuk penekanan pada bagian terpenting.
</div>

<!-- Warning solid (lebih mencolok, untuk risiko tinggi) -->
<div class='alert warning'><b>⚠ Peringatan Kritis!</b>
  Proses berikutnya akan <u>menghapus semua data yang ada</u> dan tidak bisa dikembalikan. Pastikan backup sudah dibuat sebelum melanjutkan!
</div>

<!-- Warning di dalam langkah tutorial -->
<ol class='steps'>
  <li>Buka file <code>database.json</code> di editor.</li>
  <li>
    Hapus semua entry yang ada di dalam array <code>users</code>.
    <div class='alert warning outline'><b>Backup Dulu!</b>
      Sebelum hapus, pastikan sudah copy isi file ini ke tempat lain. Langkah ini tidak ada undo-nya.
    </div>
  </li>
  <li>Simpan file dan restart server.</li>
</ol>

Relevansi Silang

• Komponen 09 (Note Warning): Note warning (note wr) adalah versi lebih compact dan inline dari alert warning. Pilih sesuai ukuran pesan dan tingkat urgensinya.
• Komponen 41 (Alert Info): Pasangan kontrasnya — info untuk hal positif/berguna, warning untuk hal berisiko.
• Komponen 34 (Underline): Seperti terlihat di demo, underline sering dipakai di dalam warning untuk penekanan double pada bagian paling kritis dari peringatan.

---

Mark dengan Class Warna

Highlight Berwarna — Setiap Warna Punya Maknanya Sendiri

Mark standar punya satu warna default. Tapi Han Haoyu Platform menyediakan beberapa varian warna mark yang masing-masing punya "makna" visual tersendiri — memungkinkan kamu membangun sistem kode warna yang konsisten di seluruh artikel.

Demo Langsung

<!-- Mark warna ungu — untuk nilai opsional atau informatif -->
<mark class='purple' data-before='Opsional: bisa diubah sesuai kebutuhan'>nilai-opsional</mark>

<!-- Mark block merah — untuk nilai kritis yang WAJIB diubah -->
<mark class='block red' data-before='WAJIB: ganti dengan nilai asli!'>nilai-wajib-diganti</mark>

<!-- Mark block biasa — untuk emphasis lebih kuat dari mark standar -->
<mark class='block' data-before='Perhatikan nilai ini'>nilai-penting</mark>

<!-- Contoh penggunaan dalam kode konfigurasi nyata -->
<pre data-source='cloudflare-worker.js' data-comment='.js'><code class='language-js'>const CONFIG = {
  // Wajib diubah — ganti dengan domain kamu
  domain: "<mark class='block red' data-before='Domain kamu — tanpa https://'>namadomain.com</mark>",

  // Opsional — bisa dibiarkan default
  timeout: <mark class='purple' data-before='Timeout dalam milidetik (default: 5000)'>5000</mark>,

  // Perhatikan format penulisannya
  version: "<mark class='block' data-before='Format: vX.X.X'>v3.0.0</mark>"
};</code></pre>

Class	Visual	Dipakai untuk
mark standar	Highlight default (kuning/accent tema)	Nilai yang perlu diperhatikan, ada contoh yang bisa diganti
mark.purple	Highlight ungu	Nilai opsional — boleh dibiarkan default
mark.block.red	Block merah mencolok	Nilai kritis — wajib diganti atau kode error
mark.block	Block accent tanpa warna spesifik	Emphasis lebih kuat dari mark standar

Relevansi Silang

• Komponen 07 (Mark Dasar): Komponen 47 adalah extensi dari mark standar — semua prinsip dasar yang sama berlaku.
• Komponen 44 (Mark Kosong): Mark kosong juga bisa dikombinasikan dengan class warna untuk placeholder yang lebih mencolok.
• Komponen 70 (Mark dengan data-after): Selain data-before, semua varian mark ini juga bisa pakai data-after untuk label yang muncul setelah nilai.

---

Multi-Tab dengan Name Berbeda

Banyak Grup Tab di Satu Halaman — Tanpa Chaos

Ini lanjutan langsung dari Komponen 42. Ketika satu halaman punya lebih dari satu grup multi-tab code block, masalahnya adalah: sistem radio button HTML bekerja berdasarkan atribut name — semua input dengan name yang sama dianggap satu grup. Kalau semua grup tab pakai name yang sama, mereka akan saling terhubung dan mengacaukan satu sama lain.

Solusinya sederhana: setiap grup tab WAJIB punya name yang unik. Konvensinya di Han Haoyu Platform adalah penomoran bertahap: preTab, preTab2, preTab3, dan seterusnya.

Demo Langsung

<!-- GRUP 1: Tab "Code" dan "Example" -->
<div class='pre tabs'>
  <input id='preT2-1' type='radio' name='preTab2' checked/>
  <input id='preT2-2' type='radio' name='preTab2'/>
  <div>
    <label for='preT2-1' data-text='Code'></label>
    <label for='preT2-2' data-text='Example'></label>
  </div>
  <pre class='preC2-1'><code>/* Kode template */
<div class='alert info'>{{ pesan }}</div></code></pre>
  <pre class='preC2-2'><code>/* Contoh hasil render */
<div class='alert info'>Instalasi berhasil!</div></code></pre>
</div>

<!-- GRUP 2: Tab "npm" dan "yarn" dan "pnpm" -->
<div class='pre tabs'>
  <input id='preT3-1' type='radio' name='preTab3' checked/>
  <input id='preT3-2' type='radio' name='preTab3'/>
  <input id='preT3-3' type='radio' name='preTab3'/>
  <div>
    <label for='preT3-1' data-text='npm'></label>
    <label for='preT3-2' data-text='yarn'></label>
    <label for='preT3-3' data-text='pnpm'></label>
  </div>
  <pre class='preC3-1'><code>npm install han-haoyu-lib</code></pre>
  <pre class='preC3-2'><code>yarn add han-haoyu-lib</code></pre>
  <pre class='preC3-3'><code>pnpm add han-haoyu-lib</code></pre>
</div>

Aturan Mutlak Penamaan Multi-Grup!
Setiap grup tab HARUS punya name berbeda. Dan ID dari setiap input HARUS mencerminkan group-nya. Contoh: grup dengan name='preTab3' pakai ID preT3-1, preT3-2, dst. Class kontennya preC3-1, preC3-2, dst. Nomor tengah (3) harus konsisten di semua elemen satu grup.

Relevansi Silang

• Komponen 42 (Multi-Tab Dasar): Pelajari struktur dasarnya dulu sebelum masuk ke multi-grup ini.
• Komponen 102 (Tab hingga 9 Tab): Variasi dengan jumlah tab yang lebih banyak — prinsip naming tetap sama.
• Komponen 103 (Dua Grup Tab Berbeda): Contoh konkret implementasi dua grup tab dalam satu halaman.

---

Heading H4 dengan data-before (Prefix Penomoran)

Sub-Sub Bagian yang Bernomor Otomatis — Secara Visual

Kalau Komponen 32 membahas data-before di H2, maka versi H4-nya dipakai untuk hal yang berbeda: memberi nomor urut visual pada sub-sub-bagian yang ada banyaknya dalam satu section. Misalnya: kamu punya H2 "Panduan Konfigurasi", lalu H3 "Konfigurasi Database", dan di dalamnya ada beberapa H4 untuk setiap opsi. Dengan data-before di H4, kamu bisa kasih numbering otomatis tanpa harus menulis "1. " di teks heading-nya secara manual.

Demo Langsung

<h2>Panduan Konfigurasi Database</h2>

<h3>Opsi Koneksi yang Tersedia</h3>

<!-- H4 dengan penomoran via data-before -->
<h4 data-before='1. '>Koneksi via Connection String</h4>
<p>Cara paling sederhana — cukup satu baris URL yang berisi semua informasi koneksi.</p>
<pre><code>DATABASE_URL="postgresql://user:password@localhost:5432/dbname"</code></pre>

<h4 data-before='2. '>Koneksi via Individual Parameters</h4>
<p>Lebih verbose tapi lebih mudah di-manage untuk environment yang berbeda.</p>
<pre><code>DB_HOST="localhost"
DB_PORT="5432"
DB_USER="username"
DB_PASS="password"
DB_NAME="dbname"</code></pre>

<h4 data-before='3. '>Koneksi via Config File</h4>
<p>Untuk konfigurasi yang kompleks atau membutuhkan banyak opsi tambahan.</p>

Relevansi Silang

• Komponen 32 (H2 dengan data-before): Versi yang sama di level H2 — untuk penomoran atau labeling section utama.
• Komponen 30 (Pola Heading Dokumentasi): H4 dengan data-before adalah komponen opsional yang memperkaya pola dokumentasi lengkap.
• Komponen 23 (TOC Otomatis): Prefix dari data-before akan ikut tampil di TOC — pastikan singkat dan informatif.

---

Accordion / Collapsible

Konten Panjang yang Bisa Dilipat — Game Changer untuk UX Artikel

Ini salah satu komponen yang paling transformatif untuk artikel panjang. Bayangkan kamu punya tutorial dengan 20 langkah, atau FAQ dengan 15 pertanyaan — tanpa accordion, reader harus scroll panjang dan susah menemukan bagian yang mereka cari. Dengan accordion, semua konten tersedia tapi compact — reader expand hanya yang mereka butuhkan.

Dan yang bikin accordion di Han Haoyu Platform spesial: ini juga pure CSS, tidak butuh JavaScript tambahan. Ini dibangun menggunakan elemen <details> dan <summary> native HTML5.

Demo Langsung

Accordion Standar (Grup dengan showH)

<div class='showH'>
  <details class='ac'>
    <summary>Pertanyaan atau judul accordion pertama?</summary>
    <div>
      <p>Jawaban atau konten accordion pertama di sini. Bisa berisi <b>bold</b>, <code>kode inline</code>, bahkan blok kode panjang.</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Pertanyaan atau judul accordion kedua?</summary>
    <div>
      <p>Jawaban accordion kedua. Konten di sini hanya terlihat setelah user klik judul accordion.</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Bagaimana cara mengkustomisasi tampilan accordion?</summary>
    <div>
      <p>Accordion bisa dikustomisasi via CSS. Untuk konten yang lebih kompleks, kamu bisa nested elemen apapun di dalam div content — termasuk steps, tabel, bahkan accordion lain.</p>
      <pre><code class='language-css'>.ac summary { font-weight: bold; }</code></pre>
    </div>
  </details>
</div>

Accordion Alt (Style Berbeda)

<details class='ac alt'>
  <summary>Judul Accordion dengan Style Alternatif</summary>
  <div>
    <p>Konten accordion dengan tampilan berbeda dari versi standar. Gunakan ini untuk variasi visual atau untuk membedakan accordion dalam konteks yang berbeda.</p>
  </div>
</details>

Accordion dengan Content Kompleks Nested

<div class='showH'>
  <details class='ac'>
    <summary>Langkah-langkah Instalasi Lengkap</summary>
    <div>
      <ol class='steps'>
        <li>Buka terminal di direktori project.</li>
        <li>
          Jalankan perintah instalasi:
          <pre><code>npm install han-haoyu-platform</code></pre>
        </li>
        <li>Restart development server kamu.</li>
      </ol>
    </div>
  </details>
</div>

Relevansi Silang

• Komponen 23 (TOC): TOC menggunakan sistem details yang sama tapi dengan class sp toc.
• Komponen 71 (Spoiler): Spoiler adalah versi single-item dari accordion — satu details tanpa wrapper showH.
• Komponen 73 (Accordion FAQ + Schema): Untuk accordion FAQ yang butuh SEO rich result, tambahkan schema microdata.
• Komponen 104 & 105 (Nested Steps & Mix ac/alt): Pola accordion lanjutan — nesting steps di dalamnya dan mixing style.

---

Komentar HTML Berlabel

Penanda Bagian yang Rapi dan Mudah Dicari

Kode HTML yang panjang — terutama dalam template Blogger — bisa jadi sangat susah dinavigasi. Mencari bagian tertentu sambil scroll ratusan baris adalah mimpi buruk. Komentar HTML berlabel hadir sebagai "bookmark" dalam kode — memudahkan kamu (dan siapapun yang membaca kodenya setelah itu) menemukan bagian yang dicari dengan cepat.

Demo Langsung

<!-- Komentar standar berlabel di Han Haoyu Platform -->
<!--[ Nama Bagian / Komponen ]-->

<!-- Contoh nyata dalam template -->
<!--[ Header Navigation ]-->
<nav class="main-nav">
  <!-- navigasi di sini -->
</nav>

<!--[ Article Content Wrapper ]-->
<div id="postBody">
  <!-- konten artikel di sini -->
</div>

<!--[ Footer Section ]-->
<footer>
  <!-- footer di sini -->
</footer>

<!-- Untuk sub-bagian dalam satu komponen -->
<!--[ Download Box : Timer Logic ]-->
<!--[ Download Box : Button Handler ]-->
<!--[ Download Box : UI Render ]-->

Format komentar yang digunakan di Han Haoyu Platform adalah <!--[ Nama Bagian ]--> dengan tanda kurung kotak sebagai delimiter visual. Ini memudahkan pencarian dengan Ctrl+F karena pola [ dan ] jarang muncul di kode biasa — jadi hasil pencarian langsung spesifik.

Relevansi Silang

• Komponen 125 (b:comment Blogger): Variasi komentar khusus untuk template XML Blogger — menggunakan tag <b:comment> yang dikenali parser Blogger.
• Komponen 31 (Script IIFE): IIFE yang panjang dan kompleks sangat dibantu dengan komentar berlabel yang membagi script jadi section-section logis.

---

Include Tag Blogger (SVG dari Tema)

Panggil Ikon Tersimpan di Tema Tanpa Copy-Paste Path SVG

Kalau Komponen 11 membahas cara embed SVG langsung di HTML artikel (inline), ada cara yang jauh lebih bersih ketika ikon yang kamu butuhkan sudah terdaftar di file tema: menggunakan tag b:include milik Blogger. Satu baris, ikon langsung muncul.

Demo Langsung

<!-- Memanggil ikon yang tersimpan di tema -->
<b:include name='svg.nama-icon'/>

<!-- Contoh nyata untuk ikon-ikon umum -->
<b:include name='svg.search'/>
<b:include name='svg.menu'/>
<b:include name='svg.close'/>
<b:include name='svg.arrow-down'/>
<b:include name='svg.download'/>

Cara kerja tag ini: Blogger akan mencari definisi komponen bernama svg.nama-icon di dalam template XML, lalu inject SVG-nya langsung di posisi tag b:include. Hasilnya identik dengan SVG inline manual — tapi tanpa kode panjang di artikel.

Hanya Berlaku di Template Context! Tag <b:include> hanya bisa dipakai di dalam template XML Blogger (Edit HTML), bukan di dalam konten artikel biasa. Kalau kamu paste ini di editor artikel, Blogger akan error atau mengabaikannya. Untuk ikon di artikel, gunakan SVG inline langsung (Komponen 11).

Relevansi Silang

• Komponen 11 (SVG Inline): Alternatif langsung di artikel — pakai ini kalau ikon belum terdaftar di tema atau kamu nulis di konten artikel.
• Komponen 14 & 63 (Button dengan Icon): <i class='icon xxx'> adalah cara ketiga untuk ikon — lebih ringkas tapi hanya untuk ikon yang sudah memiliki CSS class di stylesheet tema.

---

Paragraf dengan Class Khusus (pIndent & Drop Cap)

Gaya Penulisan Naratif yang Lebih Kaya — Bukan Sekadar Paragraf Biasa

Han Haoyu Platform bukan cuma platform teknis — artikel yang ditulis di sana bisa punya nuansa yang kaya dan berbeda. Dua class khusus paragraf ini adalah contoh terbaik: mereka membawa estetika editorial ke dunia web.

Demo Langsung

Text Indent — Baris Pertama Paragraf Masuk ke Dalam

<p class='pIndent'>
  Paragraf dengan indent di baris pertama — seperti yang kamu lihat di buku-buku cetak. Ini memberikan sinyal visual yang jelas kepada reader bahwa "ini adalah awal paragraf baru" tanpa memerlukan jarak antar paragraf yang besar.
</p>

<p class='pIndent'>
  Paragraf kedua dengan style yang sama. Ketika artikel kamu punya banyak paragraf panjang yang mengalir, kombinasi pIndent dengan tulisan naratif menciptakan pengalaman baca yang lebih menyenangkan dan tidak melelahkan.
</p>

Drop Cap — Huruf Pertama yang Besar dan Dramatis

<p><span class='dropCap'>D</span>rop cap adalah teknik tipografi klasik dari dunia cetak — huruf pertama paragraf dibuat jauh lebih besar dari teks normal, menonjol ke bawah beberapa baris. Efeknya langsung: artikel terasa lebih berkelas dan formal, sekaligus menjadi sinyal visual kuat untuk "mulai baca dari sini".</p>

<!-- Versi lain dengan huruf yang berbeda -->
<p><span class='dropCap'>H</span>an Haoyu Platform dikembangkan dengan filosofi yang sederhana: setiap fitur harus bisa dijelaskan dengan cara yang mudah dimengerti oleh siapapun — dari developer pemula sampai yang sudah berpengalaman puluhan tahun.</p>

Kapan Pakai Masing-Masing? pIndent cocok untuk artikel-artikel naratif panjang atau konten yang bergaya editorial — mirip seperti artikel majalah atau kolom opini. Drop cap paling efektif di awal artikel atau awal section besar — sebagai "pembuka" visual yang dramatis. Jangan terlalu sering pakai drop cap dalam satu artikel karena efek dramatisnya akan berkurang.

Relevansi Silang

• Komponen 37 (Italic): Italic dan pIndent sering berjalan bersama dalam gaya penulisan naratif yang lebih sastra.
• Komponen 107 (pIndent di Tengah Artikel): Penggunaan pIndent bukan hanya di awal artikel tapi di tengah-tengah — detail implementasi yang lebih spesifik.

---

Gambar Standar dengan Class Full

Gambar Responsif Langsung Tanpa Container Tambahan

Kalau Komponen 03 (Cover Gambar) dan 13 (Figure + Caption) membutuhkan container atau wrapper, Komponen 54 adalah cara paling bersih untuk menampilkan gambar tunggal yang perlu memenuhi lebar content area secara responsif — tanpa wrapper apapun, langsung tag img dengan class full.

Demo Langsung

<!-- Gambar standar full width dengan lazy load -->
<img class='full' alt='Deskripsi gambar yang deskriptif untuk SEO' width='1280' height='720' src='URL-GAMBAR' loading='lazy'/>

<!-- Gambar full width tanpa lazy load (untuk gambar di atas fold) -->
<img class='full' alt='Deskripsi gambar cover section' width='1280' height='720' src='URL-GAMBAR' loading='eager'/>

<!-- Gambar full dengan alt informatif -->
<img class='full'
     alt='Screenshot dashboard Han Haoyu Platform menampilkan menu komponen dengan 30 item tercantum'
     width='1280'
     height='720'
     src='URL-GAMBAR'
     loading='lazy'/>

Beberapa aturan penting:

1. Selalu isi atribut alt — ini wajib untuk SEO dan aksesibilitas, dan sebaiknya deskriptif serta mengandung kata kunci yang relevan.
2. Tentukan width dan height — ini mencegah layout shift (CLS) saat gambar loading, yang berpengaruh ke Core Web Vitals.
3. loading='lazy' untuk gambar di dalam artikel, loading='eager' hanya untuk gambar yang pasti terlihat di viewport pertama.

Relevansi Silang

• Komponen 56 (Gambar Tanpa Lightbox): Gambar full yang tidak perlu lightbox saat diklik — tambahkan data-lightbox='false' atau class noLb.
• Komponen 61 (Lazy Load): Versi alternative lazy loading dengan teknik yang berbeda — menggunakan class='lazyload' dan data-src.
• Komponen 13 (Figure + Caption): Gunakan ini kalau gambar butuh caption — class='full' standar tidak ada mekanisme caption.

---

Gambar dengan Caption — Versi Table (Pola Blogger)

Cara Lama yang Masih Bekerja — dan Kadang Masih Relevan

Ini adalah cara Blogger "asli" untuk menyisipkan gambar dengan caption — menggunakan struktur table dengan dua baris: satu untuk gambar, satu untuk caption. Blogger editor dulu secara otomatis menghasilkan kode seperti ini ketika kamu menambahkan caption ke gambar via toolbar.

Di era sekarang, cara yang lebih semantik adalah menggunakan <figure> dan <figcaption> (Komponen 13). Tapi pola table ini masih ada dan kadang masih dipakai — terutama ketika berhadapan dengan konten lama atau ketika ada kebutuhan layout spesifik yang lebih mudah dikontrol dengan table.

Demo Langsung

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Screenshot aplikasi menampilkan halaman login dengan form email dan password'
             src='URL-GAMBAR'
             width='800'
             height='500'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>
        Tampilan halaman login aplikasi Han Haoyu Platform | Versi 3.0
      </td>
    </tr>
  </tbody>
</table>

Relevansi Silang

• Komponen 13 (Figure + Caption): Cara modern yang direkomendasikan — lebih semantik, lebih clean, lebih SEO-friendly. Gunakan ini untuk artikel baru.
• Komponen 99 (Figure + Lightbox): Figure yang sudah terintegrasi dengan sistem lightbox — versi yang paling lengkap.

---

Gambar dengan Lightbox Dinonaktifkan

Ketika Gambar Sebaiknya Tidak Bisa Diklik untuk Diperbesar

Secara default, tema Han Haoyu Platform mengaktifkan lightbox untuk semua gambar — klik gambar, langsung muncul di overlay besar. Tapi tidak semua gambar perlu perilaku itu. Icon kecil, gambar dekoratif, avatar, atau gambar yang memang ukurannya sudah optimal tidak perlu di-zoom lagi.

Ada dua cara untuk mematikan lightbox pada gambar tertentu:

Demo Langsung

<!-- Cara 1: Atribut data-lightbox=false -->
<img alt='Ikon kecil dekoratif' src='URL-GAMBAR' data-lightbox='false'/>

<!-- Cara 2: Class noLb (No Lightbox) -->
<img class='lazyload noLb' alt='Avatar pengguna ukuran kecil' src='URL-GAMBAR'/>

<!-- Kapan pakai yang mana? -->
<!-- data-lightbox='false': untuk gambar yang sudah punya class lain dan tidak pakai lazyload -->
<!-- noLb: untuk gambar yang pakai lazyload, karena bisa dikombinasikan di class attribute -->

<!-- Contoh nyata: ikon-ikon kecil dalam tabel perbandingan -->
<div class='table bordered stripped'>
  <table>
    <tbody>
      <tr>
        <td><img class='noLb' alt='Logo npm' src='URL-NPM-LOGO' width='60' height='30'/></td>
        <td>Node Package Manager — package manager default untuk Node.js</td>
      </tr>
    </tbody>
  </table>
</div>

Relevansi Silang

• Komponen 31 (Script IIFE): IIFE lightbox handler menggunakan ignoreClass: "noLb" — class noLb di komponen ini adalah yang "dibaca" oleh script di sana.
• Komponen 80 (noLb sebagai Class): Referensi tambahan tentang class noLb dalam konteks yang berbeda.
• Komponen 90 (Lightbox Wrapper): Kebalikannya — cara untuk memastikan gambar PASTI punya lightbox, bahkan jika default-nya nonaktif.

---

Grid Gambar (Banyak Gambar dalam Grid Otomatis)

Puluhan Screenshot? Grid Bikin Segalanya Rapi Otomatis

Tutorial dengan banyak screenshot adalah hal yang sangat umum. Tanpa sistem grid, kamu harus atur layout gambar satu per satu — melelahkan dan hasilnya sering nggak konsisten di berbagai ukuran layar. Dengan div.psImg.grImg, semua gambar otomatis tersusun dalam grid yang responsif dan konsisten.

Demo Langsung

<!-- Grid gambar dasar -->
<div class='psImg grImg'>
  <img alt='Screenshot langkah 1: halaman login' src='URL-GAMBAR-1'/>
  <img alt='Screenshot langkah 2: dashboard utama' src='URL-GAMBAR-2'/>
  <img alt='Screenshot langkah 3: menu settings' src='URL-GAMBAR-3'/>
  <img alt='Screenshot langkah 4: halaman konfirmasi' src='URL-GAMBAR-4'/>
</div>

<!-- Grid gambar dengan lazy loading -->
<div class='psImg grImg'>
  <img class='lazyload' alt='Tampilan komponen accordion collapsed' data-src='URL-GAMBAR-1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazyload' alt='Tampilan komponen accordion expanded' data-src='URL-GAMBAR-2' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazyload' alt='Tampilan komponen accordion dengan nested steps' data-src='URL-GAMBAR-3' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Grid ini bekerja dengan CSS Grid otomatis — jumlah kolom menyesuaikan berdasarkan ukuran layar dan jumlah gambar. Di desktop bisa 3-4 kolom, di mobile jadi 1-2 kolom. Kamu tidak perlu tentukan apapun — sistem yang handle.

Relevansi Silang

• Komponen 58 (Show/Hide Images): Kalau gambar grid-nya banyak banget dan mau disembunyikan sebagian default, gunakan wrapper hdImg.
• Komponen 59 & 60 (Scroll Gallery): Alternatif layout — grid untuk tampilan column, scroll gallery untuk tampilan horizontal yang bisa digeser.
• Komponen 61 (Lazy Load): Selalu kombinasikan grid gambar dengan lazy loading untuk performa yang baik — terutama kalau gambarnya banyak.

---

Gambar dengan Show All / Hide (Collapse Gambar)

Banyak Gambar Tapi Nggak Mau Bikin Halaman Panjang Banget?

Komponen ini adalah solusi cerdas untuk artikel yang punya banyak gambar tapi tidak ingin memaksakan reader untuk scroll panjang melewati semua gambar. Beberapa gambar pertama ditampilkan, sisanya tersembunyi di balik tombol "Show All" — dan semuanya tanpa JavaScript, murni CSS dengan checkbox trick.

Demo Langsung

<!-- Checkbox tersembunyi sebagai state toggle -->
<input hidden class='inImg' id='hideImg1' type='checkbox'>

<div class='psImg hdImg'>
  <!-- Gambar yang selalu tampil -->
  <img alt='Screenshot tampilan awal — selalu terlihat' src='URL-GAMBAR-1'/>
  <img alt='Screenshot langkah pertama — selalu terlihat' src='URL-GAMBAR-2'/>
  <img alt='Screenshot langkah kedua — selalu terlihat' src='URL-GAMBAR-3'/>

  <!-- Container gambar terakhir yang tampil + tombol "Show All" -->
  <div class='btImg'>
    <!-- Gambar keempat yang sekaligus jadi tombol -->
    <img alt='Screenshot langkah ketiga — klik Show All untuk lihat lebih' src='URL-GAMBAR-4'/>
    <!-- Label yang jadi tombol toggle -->
    <label for='hideImg1' aria-label='Show all images'>Show All</label>
  </div>

  <!-- Gambar yang tersembunyi secara default -->
  <div class='psImg shImg'>
    <img alt='Screenshot langkah keempat — tersembunyi default' src='URL-GAMBAR-5'/>
    <img alt='Screenshot langkah kelima — tersembunyi default' src='URL-GAMBAR-6'/>
    <img alt='Screenshot langkah keenam — tersembunyi default' src='URL-GAMBAR-7'/>
    <img alt='Screenshot hasil akhir — tersembunyi default' src='URL-GAMBAR-8'/>
  </div>
</div>

Cara kerja: Checkbox tersembunyi bertindak sebagai state. Saat label diklik, checkbox ter-check. CSS :checked selector mendeteksi state ini dan menampilkan elemen shImg yang sebelumnya tersembunyi. Pure CSS, zero JavaScript.

Butuh Lebih dari Satu Show/Hide di Satu Artikel?
Gampang — tinggal ganti ID-nya. Grup pertama pakai id='hideImg1' dan for='hideImg1'. Grup kedua pakai id='hideImg2' dan for='hideImg2', dan seterusnya. Sama persis dengan logika multi-group di multi-tab code block.

Relevansi Silang

• Komponen 57 (Grid Gambar): Biasanya gambar-gambar di dalam hdImg juga pakai layout grid — keduanya bisa dikombinasikan.
• Komponen 50 (Accordion): Sama-sama solusi untuk konten panjang yang perlu collapsed — accordion untuk teks, hdImg untuk gambar.
• Komponen 61 (Lazy Load): Gambar tersembunyi di shImg ideal banget untuk dikombinasikan dengan lazy load — karena mereka tidak perlu di-load sampai tombol "Show All" diklik.

---

Scroll Gallery — Style 1 (Horizontal Semua Device)

Gallery yang Bisa Digeser Kanan-Kiri di Semua Perangkat

Ada kalanya kamu mau tampilkan banyak gambar dalam satu baris horizontal yang bisa digeser — seperti gallery di aplikasi mobile atau carousel sederhana. Komponen div.glImg melakukan persis itu: tampilan horizontal scroll yang bekerja di semua perangkat, dari desktop sampai mobile.

Demo Langsung

<!-- Scroll gallery yang bekerja di semua device -->
<div class='glImg'>
  <img alt='Tampilan komponen alert info pada tema terang' src='URL-GAMBAR-1'/>
  <img alt='Tampilan komponen alert warning pada tema terang' src='URL-GAMBAR-2'/>
  <img alt='Tampilan komponen alert success pada tema terang' src='URL-GAMBAR-3'/>
  <img alt='Tampilan komponen alert info pada tema gelap' src='URL-GAMBAR-4'/>
  <img alt='Tampilan komponen alert warning pada tema gelap' src='URL-GAMBAR-5'/>
  <img alt='Tampilan komponen alert success pada tema gelap' src='URL-GAMBAR-6'/>
</div>

Gallery ini ideal untuk:

• Perbandingan visual komponen dalam berbagai kondisi (light mode vs dark mode)
• Showcase beberapa screenshot berurutan yang perlu dilihat berdampingan
• Portfolio atau koleksi gambar yang butuh tampilan compact tapi lengkap

Relevansi Silang

• Komponen 60 (Scroll Gallery Style 2): Versi yang hanya aktif scroll di mobile — di desktop tampil seperti grid normal. Pilih sesuai preferensi tampilan desktop.
• Komponen 57 (Grid Gambar): Grid untuk layout kolom di semua device, scroll gallery untuk layout horizontal yang bisa digeser.

---

Scroll Gallery — Style 2 (Scroll Hanya di Mobile)

Gallery Adaptif — Grid di Desktop, Carousel di Mobile

Ini versi yang lebih adaptif dari scroll gallery. Di desktop, gambar-gambarnya tampil seperti grid normal — memenuhi area konten dengan layout kolom yang rapi. Di mobile, area yang terbatas membuat galeri ini berubah menjadi horizontal scroll — cukup geser untuk melihat gambar berikutnya.

Ini adalah pilihan yang lebih "sophisticated" karena memaksimalkan pengalaman di setiap ukuran layar — bukan satu-solusi-untuk-semua.

Demo Langsung

<!-- Scroll gallery yang hanya aktif di mobile -->
<div class='psImg scImg scrlH'>
  <img alt='Tampilan fitur tab pada layar lebar — tampil penuh' src='URL-GAMBAR-1'/>
  <img alt='Tampilan fitur accordion pada layar lebar' src='URL-GAMBAR-2'/>
  <img alt='Tampilan fitur download box pada layar lebar' src='URL-GAMBAR-3'/>
  <img alt='Tampilan fitur alert box pada layar lebar' src='URL-GAMBAR-4'/>
</div>

<!-- Dengan lazy load (disarankan untuk gallery gambar banyak) -->
<div class='psImg scImg scrlH'>
  <img class='lazyload' alt='Component preview 1' data-src='URL-GAMBAR-1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazyload' alt='Component preview 2' data-src='URL-GAMBAR-2' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazyload' alt='Component preview 3' data-src='URL-GAMBAR-3' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Breakdown class yang digunakan:

Class	Fungsi
psImg	Base class untuk semua container gambar di Han Haoyu Platform
scImg	Mengaktifkan mode scroll untuk container ini
scrlH	Scroll Horizontal — menentukan arah scroll adalah horizontal

Relevansi Silang

• Komponen 59 (Scroll Gallery Style 1): Versi yang horizontal scroll di semua device — gunakan ini kalau ingin konsistensi scroll experience terlepas ukuran layar.
• Komponen 57 (Grid Gambar): Keduanya pakai class psImg sebagai base — beda class tambahan yang menentukan perilaku layout.
• Komponen 61 (Lazy Load): Sangat disarankan dikombinasikan — gambar dalam gallery tidak perlu di-load semua sekaligus, cukup yang terlihat di viewport saja.

---

30 Komponen Lagi Terlampaui — Kamu Makin Dalam, Makin Mahir! 💪

Selamat! Kamu baru saja menyelesaikan Bagian 2 dari Encyclopedia of Components Han Haoyu Platform. Kalau di Bagian 1 kita membangun fondasi, di Bagian 2 ini kita udah naik ke level yang lebih serius — Script IIFE yang powerful, multi-tab code block yang elegan, accordion yang bikin artikel panjang jadi manageable, dan sistem gambar yang fleksibel dari grid sampai gallery.

Recap 30 Komponen Bagian 2 (Komponen 31–60):
31 Script IIFE · 32 H2 data-before · 33 data-source Blok Kode · 34 Underline · 35 Tabel Simple · 36 OL Biasa · 37 Italic · 38 Navigasi Breadcrumb · 39 Mark di Tabel · 40 CSS Variable Color · 41 Alert Info Box · 42 Multi-Tab Code Block · 43 Syntax Highlighting · 44 Mark Kosong · 45 ul.steps · 46 Alert Warning · 47 Mark Berwarna · 48 Multi-Tab Multi-Grup · 49 H4 data-before · 50 Accordion · 51 Komentar HTML Berlabel · 52 Include Blogger SVG · 53 pIndent & Drop Cap · 54 Gambar Full · 55 Gambar Caption Table · 56 Gambar Tanpa Lightbox · 57 Grid Gambar · 58 Show/Hide Gambar · 59 Scroll Gallery Semua Device · 60 Scroll Gallery Mobile

Di Bagian 3 — Mastering Han Haoyu Platform, kita akan melanjutkan ke komponen-komponen selanjutnya: lazy load image, navigasi blog, blockquote, card, embed video YouTube, tabs konten, dan banyak lagi. Sudah hampir di puncak gunung — terus naik! 🏔️

---

Artikel Terkait

Copyright (c):
Han Haoyu Platform