Daftar Isi
Bagian 3 — Ini Bukan Lagi Level Pemula
Selamat datang di bagian yang — kalau jujur — paling sering jadi titik balik bagi developer yang serius membangun konten di Han Haoyu Platform. Kalau Bagian 1 membangun fondasi dan Bagian 2 mengajarkan cara berpikir komponen, maka Bagian 3 adalah di mana segalanya mulai terasa "klik".
Di sini kita akan bedah 30 komponen lagi — dari Komponen 61 sampai 90. Beberapa di antaranya adalah komponen yang sering dipandang sebelah mata, padahal kalau dipakai tepat, efeknya luar biasa. Lazyload image yang bikin halaman terasa ringan di mana-mana. Blockquote dengan tiga gaya berbeda. Embed YouTube yang nggak memperlambat loading. Tabs konten yang bikin satu area bisa menampung banyak informasi. Dan accordion FAQ yang — bukan hanya membantu user — tapi juga ngobrol langsung sama algoritma Google lewat schema microdata.
Oh ya, di Bagian 3 ini kita juga bakal tunjukkan demo komponen secara langsung — bukan cuma kode di dalam blok, tapi benar-benar dirender di artikel ini supaya kamu bisa lihat sendiri bagaimana hasilnya. Sambil baca, kamu sambil nonton demo-nya. Ini namanya learning by seeing — dan itu jauh lebih efektif.
Sebelum Lanjut — Punya Dasar yang Cukup?
Beberapa konsep di Bagian 3 merujuk ke komponen dari Bagian 1 dan 2 — khususnya blok kode, tabel, multi-tab, dan accordion. Kalau ada yang nggak familiar, rekomendasi kuat untuk baca bagian sebelumnya dulu. Fondasi yang kuat bikin segalanya lebih mudah dipahami.
Lazyload Image — Gambar yang Muat Saat Dibutuhkan
Kenapa Muat Semua Gambar Sekaligus Itu Ide yang Buruk
Bayangkan kamu buka sebuah artikel — dan browser langsung download semua gambar dalam artikel itu, bahkan yang ada di bagian paling bawah yang belum kamu lihat sama sekali. Bandwidth terbuang, loading lebih lama, dan pengalaman pertama user langsung terganggu. Itu masalah klasik artikel bergambar banyak.
Lazyload adalah solusinya. Konsepnya simpel: gambar hanya di-load saat mendekati atau masuk ke viewport (area yang terlihat di layar). Gambar di bawah? Belum dimuat. Saat user scroll ke bawah dan gambar mau muncul? Baru dimuat. Efisien, ringan, dan user experience jauh lebih baik.
Di Han Haoyu Platform, implementasi lazyload menggunakan teknik yang sudah terbukti: class lazyload dari library lazysizes, dengan data-src sebagai URL gambar sebenarnya, dan src diisi placeholder transparan 1x1 pixel dalam base64 — supaya browser punya sesuatu untuk ditampilkan sebelum gambar aslinya siap.
Demo Kode
<!-- Implementasi lazyload standar -->
<img class='lazyload'
alt='Screenshot dashboard komponen Han Haoyu Platform versi 3'
data-src='URL-GAMBAR-ASLI.jpg'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<!-- Kombinasi dengan class full (gambar lazyload full-width) -->
<img class='lazyload full'
alt='Banner artikel dengan teks besar dan latar gradien biru'
data-src='URL-GAMBAR-BANNER.jpg'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<!-- Kombinasi dengan class responsive -->
<img class='lazyload responsive'
alt='Infografis perbandingan performa dengan dan tanpa lazyload'
data-src='URL-GAMBAR-INFOGRAFIS.jpg'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<!-- Kombinasi dengan noLb (lazyload tapi tanpa lightbox) -->
<img class='lazyload noLb'
alt='Ikon kecil dekoratif tanpa perlu diperbesar'
data-src='URL-IKON.png'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>| Atribut / Class | Fungsi |
|---|---|
class='lazyload' |
Mengaktifkan lazyload via library lazysizes |
data-src |
URL gambar sebenarnya yang akan di-load saat mendekati viewport |
src (base64) |
Placeholder 1×1px transparan — mencegah "broken image" sebelum gambar asli muat |
alt |
Wajib diisi — deskriptif dan mengandung kata kunci relevan |
Jangan Pakai Lazyload untuk Cover/Hero Image!
Gambar yang pasti terlihat di viewport pertama (cover artikel, hero image) sebaiknya pakai loading='eager' biasa — bukan lazyload. Lazyload pada LCP element justru membuat Core Web Vitals turun karena browser perlu waktu lebih untuk menginisialisasi library lazysizes sebelum mulai muat gambar.
Relevansi Silang
- Komponen 54 (Gambar Full): Kombinasikan —
class='lazyload full'untuk gambar full-width di dalam konten artikel. - Komponen 57 (Grid Gambar): Gambar dalam grid sebaiknya selalu pakai lazyload — terutama kalau gridnya punya banyak item.
- Komponen 76 (Defer YouTube): Konsep yang sama diterapkan ke iframe YouTube — load hanya saat mendekati viewport.
- Komponen 79 (Gambar Responsive): Class
responsivebisa dikombinasikan denganlazyloaduntuk gambar yang perlu scaling otomatis sesuai layar. - Komponen 80 (noLb): Class
noLbsering dikombinasikan denganlazyloaduntuk gambar kecil seperti ikon atau avatar yang tidak perlu lightbox.
Link Eksternal — Semua Varian Style
Tiga Rasa untuk Satu Fungsi yang Sama
Di Bagian 1 (Komponen 04), kita sudah bahas cara dasar memakai link eksternal dengan class extL. Tapi di Komponen 62 ini, kita masuk lebih dalam: Han Haoyu Platform punya tiga varian style untuk link eksternal yang masing-masing punya karakter visual berbeda — cocok untuk konteks yang berbeda-beda.
Demo Langsung
Ini tampilan ketiga varian saat dipakai dalam teks:
Versi default: Kunjungi Hanhaoyu.com untuk dokumentasi lengkap.
Versi alt: Cek juga versi alt link ini yang punya tampilan berbeda.
Versi secondary: Referensi tambahan tersedia di link secondary ini — lebih subtle dari dua versi sebelumnya.
Demo Kode
<!-- Versi Default — paling umum, untuk sebagian besar konteks -->
<a class='extL' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>
Teks Link Default
</a>
<!-- Versi Alt — untuk link yang butuh tampil lebih mencolok / berbeda nuansa -->
<a class='extL alt' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>
Teks Link Alt
</a>
<!-- Versi Secondary — untuk link referensi tambahan yang lebih subtle -->
<a class='extL sec' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>
Teks Link Secondary
</a>Relevansi Silang
- Komponen 04 (Link Eksternal Dasar): Atribut
reldantargetyang wajib ada — semua varian di sini mengikuti standar yang sama. - Komponen 63 (Button Semua Varian): Ketika link eksternal butuh tampil sebagai tombol — upgrade dari extL ke button dengan atribut rel yang sama.
Button — Semua Varian Lengkap
Direktori Tombol Han Haoyu Platform yang Lengkap
Di Komponen 14 sebelumnya, kita sudah kenal button secara umum. Komponen 63 adalah versi direktori lengkap — semua varian button yang tersedia di platform, dalam satu tempat, siap di-copy-paste sesuai kebutuhan.
Demo Langsung
Berikut tampilan semua varian button secara langsung:
Demo Kode
<!-- Button default — solid, paling umum -->
<a class='button' href='#'>Teks Tombol</a>
<!-- Button outlined — lebih ringan secara visual -->
<a class='button ln' href='#'>Teks Tombol Outline</a>
<!-- Button dengan icon download -->
<a class='button' href='#'><i class='icon dl'></i>Download</a>
<!-- Button dengan icon demo -->
<a class='button' href='#'><i class='icon demo'></i>Demo</a>
<!-- Button dengan icon info (dari Komponen 81) -->
<a class='button' href='#'><i class='icon info'></i>Info Lebih Lanjut</a>
<!-- Button full width (dari Komponen 82) -->
<a class='button full' href='#'>Tombol Full Width</a>
<!-- Button terpusat (wrapper centering) -->
<div style='text-align:center'>
<a class='button' href='#tujuan'><i class='icon demo'></i>Lihat Demo Sekarang</a>
</div>
<!-- Button ke link eksternal (wajib tambahkan rel + target) -->
<a class='button' href='https://url-eksternal.com' rel='nofollow noreferrer noopener' target='_blank'>
<i class='icon dl'></i>Download dari Sumber Asli
</a>Relevansi Silang
- Komponen 64 (dlBox Simple): Tombol download di dalam dlBox menggunakan
class='button'denganicon dl. - Komponen 81 (Button Icon Info): Varian tambahan dengan ikon info — satu dari sekian ikon yang tersedia untuk button.
- Komponen 82 (Button Full Width): Modifier
fullyang bikin tombol memenuhi seluruh lebar container — berguna untuk CTA yang butuh visibilitas tinggi. - Komponen 04 & 62 (Link Eksternal): Button yang mengarah ke sumber luar wajib mengikuti standar atribut
relyang sama dengan extL.
Download Box Sederhana (dlBox)
Ketika Kamu Butuh Download Box yang Bersih dan Cepat
Di Komponen 17–19 (Bagian 1), kita kenal hhc-download-box yang powerful — dengan countdown timer, thumbnail, dan berbagai data attribute kustom. Tapi tidak selalu kamu butuh semua itu. Kadang yang dibutuhkan cuma: nama file, ukuran, dan tombol download. Simpel, bersih, langsung.
Untuk kebutuhan itu ada dlBox — versi download box yang lebih minimalis, tanpa sistem data attribute yang kompleks, tapi tetap punya tampilan yang rapi dan profesional.
Demo Langsung
Demo Kode
<div class='dlBox'>
<!-- Placeholder tipe file — isi data-text dengan ekstensi (tanpa titik) -->
<span class='fT' data-text='zip'></span>
<!-- Info nama dan ukuran file -->
<div class='fN'>
<span>nama-file.zip</span>
<span class='fS'>200KB</span>
</div>
<!-- Tombol download -->
<a class='button' aria-label='Download' href='#' rel='nofollow noreferrer noopener' target='_blank'>
<i class='icon dl'></i>
</a>
</div>Beberapa contoh variasi tipe file yang umum dipakai di data-text:
Nilai data-text |
Dipakai untuk |
|---|---|
zip | File arsip ZIP |
pdf | Dokumen PDF |
apk | Aplikasi Android |
png | File gambar PNG |
psd | File Photoshop |
xls | Spreadsheet Excel |
doc | Dokumen Word |
Relevansi Silang
- Komponen 17–19 (hhc-download-box): Versi yang lebih lengkap dengan countdown timer, thumbnail, dan data attribute custom — pilih ini kalau butuh informasi file yang lebih kaya.
- Komponen 63 (Button Varian): Tombol di dalam dlBox menggunakan class button standar — semua modifier button berlaku di sini juga.
Blockquote — Semua Varian
Kutipan yang Bukan Sekadar Teks Dimiringkan
Blockquote adalah salah satu elemen yang paling sering di-underuse. Banyak orang pakai blockquote cuma untuk menyebut kutipan penting, padahal elemen ini bisa jadi salah satu visual accent paling elegan di dalam artikel panjang — memecah monotoni teks, menarik perhatian ke insight terpenting, dan memberi artikel nuansa editorial yang kuat.
Han Haoyu Platform punya tiga varian blockquote dengan visual yang berbeda — masing-masing untuk konteks yang berbeda.
Demo Langsung
Varian Standard (Default):
Dokumentasi yang baik bukan tentang betapa banyak hal yang kamu jelaskan — tapi tentang betapa sedikit yang perlu pembacanya bertanya setelah membacanya.
Han Haoyu
Varian Style 1 (s1):
Platform terbaik adalah yang membuat penggunanya merasa bodoh ketika tidak memakainya — bukan bodoh ketika mencoba memakainya.
Prinsip Desain Han Haoyu Platform
Varian Style 2 (s2):
Kode yang ditulis untuk manusia lebih berharga dari kode yang ditulis untuk mesin. Mesin bisa membaca apapun — manusia punya kesabaran yang terbatas.
Filosofi Development
Demo Kode
<!-- Standard blockquote -->
<blockquote>
<p>Teks kutipan yang ingin kamu tampilkan di sini.</p>
<span>Nama Penulis / Sumber Kutipan</span>
</blockquote>
<!-- Style 1 -->
<blockquote class='s1'>
<p>Teks kutipan dengan gaya visual berbeda dari standard.</p>
<span>Nama Penulis</span>
</blockquote>
<!-- Style 2 -->
<blockquote class='s2'>
<p>Teks kutipan dengan gaya visual yang lebih berbeda lagi.</p>
<span>Nama Penulis</span>
</blockquote>Elemen <span> di dalam blockquote berfungsi sebagai atribusi — nama penulis atau sumber kutipan. Ini akan di-style secara otomatis oleh tema, biasanya dengan ukuran lebih kecil dan gaya yang berbeda dari teks kutipan utamanya. Jangan tinggalkan ini kosong kalau kamu tahu sumber kutipannya.
Relevansi Silang
- Komponen 37 (Italic): Teks dalam blockquote kadang dikombinasikan dengan italic untuk frasa atau kata yang perlu penekanan khusus.
- Komponen 15 (HR Pemisah): Blockquote sering didahului atau diikuti HR untuk memberi "jeda napas" sebelum dan sesudah kutipan penting.
- Komponen 53 (Drop Cap): Blockquote dan drop cap adalah dua cara berbeda untuk memberi aksen editorial pada artikel — gunakan salah satu, atau keduanya di titik yang berbeda.
Alert — Semua 10 Varian Lengkap
Direktori Lengkap Alert Box — Dari Default sampai Error Outline
Ini adalah referensi komprehensif yang kamu tunggu-tunggu. Di Komponen 41 dan 46, kita sudah bahas alert info dan alert warning secara individual. Sekarang, Komponen 66 adalah direktori penuh — semua 10 kombinasi varian alert yang tersedia, lengkap dengan demo langsung dan kode masing-masing.
Demo Langsung — Semua 10 Varian
Empat Varian Solid:
Lima Varian Outline (dengan border saja):
Demo Kode
<!-- ===== VARIAN SOLID ===== -->
<div class='alert'>Default alert — tanpa warna spesifik</div>
<div class='alert info'><b>Info:</b> Pesan informasi penting di sini.</div>
<div class='alert warning'><b>Peringatan:</b> Ini serius, perhatikan!</div>
<div class='alert success'><b>Berhasil!</b> Operasi selesai dengan sempurna.</div>
<div class='alert error'><b>Error:</b> Terjadi kesalahan yang perlu diperbaiki.</div>
<!-- ===== VARIAN OUTLINE ===== -->
<div class='alert outline'>Default outline — lebih ringan secara visual</div>
<div class='alert info outline'><b>Info:</b> Pesan informasi dengan style outline.</div>
<div class='alert warning outline'><b>Perhatian:</b> Peringatan dengan style outline.</div>
<div class='alert success outline'><b>Sukses:</b> Berhasil dengan tampilan lebih tenang.</div>
<div class='alert error outline'><b>Error:</b> Masalah yang terdeteksi, outline style.</div>| Class Kombinasi | Kapan Dipakai | Intensitas Visual |
|---|---|---|
alert info |
Tips, informasi berguna, fitur baru | Sedang |
alert info outline |
Info ringan yang tidak perlu terlalu mencolok | Rendah |
alert warning |
Peringatan penting — ada risiko jika diabaikan | Tinggi |
alert warning outline |
Peringatan yang perlu dilihat tapi tidak urgent | Sedang |
alert success |
Konfirmasi berhasil, hasil positif | Tinggi |
alert error |
Error kritis yang wajib ditangani | Sangat Tinggi |
Relevansi Silang
- Komponen 41 (Alert Info): Pembahasan lebih dalam tentang konteks penggunaan alert info.
- Komponen 46 (Alert Warning): Detail kapan solid vs outline untuk warning.
- Komponen 08 & 09 (Note Box): Note box adalah alternatif compact alert untuk pesan yang lebih pendek dan inline.
- Komponen 113 (Alert Error sebagai Info): Penggunaan kreatif alert error untuk pesan "Informasi!" — bukan hanya untuk error teknis.
Tabel dengan Class Hovered
Tabel yang Respons Saat Kamu Sorot Barisnya
Tabel dengan banyak baris bisa membuat mata reader "nyasar" ke baris yang salah saat membaca data dari kiri ke kanan. Efek hover yang memberi highlight pada baris yang sedang disorot mouse adalah solusi UX yang sederhana tapi sangat efektif untuk masalah ini — terutama untuk tabel referensi dan tabel perbandingan dengan banyak kolom.
Class hovered ditambahkan sebagai modifier ke div wrapper tabel — bisa dikombinasikan dengan modifier lain seperti sticky, bordered, dan stripped.
Demo Langsung
| Nama Komponen | Class Utama | Bagian | Jenis |
|---|---|---|---|
| Lazyload Image | lazyload |
Bagian 3 | Gambar |
| Blockquote Standard | blockquote |
Bagian 3 | Teks |
| Alert Info Outline | alert info outline |
Bagian 3 | Notifikasi |
| Accordion FAQ Schema | ac + microdata |
Bagian 3 | Interaktif + SEO |
| Lightbox Image Wrapper | lbImg |
Bagian 3 | Gambar |
Coba sorot baris-baris tabel di atas dengan mouse — setiap baris akan di-highlight saat kursor melewatinya. Itulah efek dari class hovered.
Demo Kode
<!-- Tabel dengan hover effect di setiap baris -->
<div class='table sticky bordered stripped hovered'>
<table>
<thead>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</tbody>
</table>
</div>Relevansi Silang
- Komponen 25 (Tabel dengan Sticky): Class
hoveredadalah modifier tambahan — bisa dikombinasikan dengan semua class tabel yang sudah ada. - Komponen 95 (Table Modifier Lengkap): Referensi semua kombinasi class modifier yang tersedia untuk tabel —
hoveredadalah salah satunya.
Blok Kode dengan data-comment
Label Bahasa di Pojok Kode — Konteks Tanpa Perlu Teks Tambahan
Atribut data-comment menampilkan label kecil di pojok kanan atas blok kode — biasanya diisi dengan ekstensi file atau nama bahasa pemrograman. Berbeda dari data-source yang menampilkan nama file di header/kiri, data-comment tampil lebih subtle di pojok — cocok sebagai label konteks yang tidak terlalu dominan.
Keduanya sering dipakai bersamaan — dan kombinasi keduanya dengan syntax highlighting adalah "triple combo" standar di Han Haoyu Platform.
Demo Langsung
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Han Haoyu Platform</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
</body>
</html>Demo Kode
<!-- Hanya data-comment saja (tanpa data-source) -->
<pre data-comment='.css'><code class='language-css'>
.hero { display: flex; align-items: center; }
</code></pre>
<!-- Kombinasi data-comment + data-source -->
<pre data-comment='.html' data-source='src/index.html'><code class='language-xml'>
<div class="container">isi konten</div>
</code></pre>
<!-- Dengan nilai yang lebih deskriptif -->
<pre data-comment='config.json' data-source='cloudflare/wrangler.toml'><code>
[vars]
ENVIRONMENT = "production"
</code></pre>Relevansi Silang
- Komponen 06 (Blok Kode Dasar):
data-commentadalah modifier opsional blok kode — berdiri sendiri atau dikombinasikan. - Komponen 33 (data-source): Pasangan alami dari
data-comment— satu di header kiri, satu di pojok kanan. - Komponen 43 (Syntax Highlighting): Triple combo:
data-source+data-comment+class='language-xxx'untuk tampilan paling profesional.
KBD Tag — Tampilan Input Keyboard
Bedakan Mana Perintah Kode, Mana Tombol yang Harus Ditekan
Ada satu detail yang sering luput dari tutorial teknis: ketika kamu bilang "tekan Ctrl+C", apakah itu ditulis sebagai teks biasa, atau sebagai code inline, atau ada cara khusus? Di HTML5, ada elemen semantik khusus untuk ini: tag <kbd> (keyboard).
Perbedaannya dengan <code>: <code> untuk teks kode yang dieksekusi atau dibaca mesin. <kbd> untuk input keyboard yang ditekan oleh user. Keduanya mungkin terlihat mirip secara visual di browser, tapi semantiknya berbeda — dan itu penting untuk aksesibilitas dan screen reader.
Demo Langsung
Untuk menyimpan file, tekan Ctrl + S di Windows atau ⌘ + S di Mac.
Untuk select semua, gunakan Ctrl + A atau ⌘ + A.
Untuk membuka developer tools browser, tekan F12 atau Ctrl + Shift + I.
Demo Kode
<!-- KBD standar untuk shortcut keyboard -->
<kbd>⌘ + A</kbd>
<kbd>Ctrl + C</kbd>
<kbd>F12</kbd>
<!-- Dalam konteks kalimat tutorial -->
<p>Simpan perubahan dengan menekan <kbd>Ctrl + S</kbd> (Windows) atau <kbd>⌘ + S</kbd> (Mac).</p>
<!-- Untuk perintah terminal yang perlu Enter -->
<p>Ketik perintah di terminal, lalu tekan <kbd>Enter</kbd> untuk menjalankannya.</p>
<!-- Kombinasi KBD + code untuk konteks yang berbeda -->
<p>Buka file <code>config.js</code> di editor, ubah nilai <code>apiKey</code>, lalu simpan dengan <kbd>Ctrl + S</kbd>.</p>Relevansi Silang
- Komponen 05 (Code Inline):
codeuntuk teks kode yang dieksekusi,kbduntuk tombol yang ditekan user. Jangan tertukar konteksnya. - Komponen 10 (Steps): KBD sering muncul di dalam langkah tutorial — langkah yang minta user menekan kombinasi tombol tertentu.
- Komponen 38 (Navigasi Breadcrumb): Kombinasi yang menarik — pakai navigasi breadcrumb untuk menunjukkan menu, lalu KBD untuk shortcut alternatif yang lebih cepat dari menu itu.
Mark dengan data-after
Label yang Muncul Setelah Nilai — Bukan Sebelumnya
Semua mark yang kita bahas sejauh ini menggunakan data-before — label keterangan muncul sebelum nilai yang di-highlight. Tapi ada situasi di mana konteks yang lebih natural adalah label yang muncul setelah nilai. Untuk itu, atribut data-after hadir sebagai pasangan dari data-before.
Kapan lebih natural pakai data-after? Ketika label berfungsi sebagai satuan, unit, atau keterangan penjelas yang secara alami "mengikuti" nilai — seperti satuan waktu, mata uang, atau format data.
Demo Langsung
Contoh mark dengan data-after di dalam teks penjelasan:
Timeout diset ke 5000 — kamu bisa ubah sesuai kebutuhan.
Harga paket adalah 29 untuk plan Pro.
Ukuran file maksimal adalah 25MB.
Demo Kode
<!-- data-after untuk satuan/unit -->
<mark data-after='milidetik'>5000</mark>
<mark data-after='MB'>25</mark>
<mark data-after='per bulan'>$29</mark>
<!-- data-after dengan class warna -->
<mark class='block red' data-after='Pesan setelah nilai'>nilai-kritis</mark>
<mark class='purple' data-after='(opsional)'>nilai-opsional</mark>
<!-- Dalam konteks blok kode -->
<pre><code>timeout: <mark data-after='ms (default: 5000)'>3000</mark>
maxRetries: <mark data-after='kali (0 = infinite)'>3</mark>
cacheSize: <mark data-after='MB'>128</mark></code></pre>
<!-- Kombinasi data-before dan data-after sekaligus -->
<mark data-before='Nilai: ' data-after=' (wajib diisi)'></mark>Relevansi Silang
- Komponen 07 (Mark Dasar): Semua prinsip dasar mark berlaku —
data-afterhanya mengubah posisi kemunculan label. - Komponen 47 (Mark dengan Class Warna): Semua varian warna mark bisa dikombinasikan dengan
data-after. - Komponen 44 (Mark Kosong): Mark kosong bisa pakai
data-afteruntuk menunjukkan format yang diharapkan setelah placeholder kosong.
Spoiler (Collapsible Tunggal)
Bukan Accordion — Ini Versi Solo yang Lebih Fleksibel
Accordion (Komponen 50) adalah untuk kumpulan item yang bisa diklik-buka satu per satu. Spoiler adalah versi tunggal dari konsep yang sama — satu konten tersembunyi, satu tombol untuk membuka/menutupnya, tanpa perlu wrapper showH.
Lebih fleksibel dari accordion karena bisa diletakkan di mana saja dalam artikel tanpa harus membentuk "grup". Dan data-show serta data-hide-nya bisa dikustomisasi bebas — sehingga teks tombolnya bisa disesuaikan dengan konteks konten yang disembunyikan.
Demo Langsung
Kode Konfigurasi Lengkap:
Ini adalah konten yang tersembunyi default. Klik judul di atas untuk toggle tampil/sembunyikan. Bisa berisi apapun — paragraf, blok kode, tabel, bahkan steps.
const config = {
platform: "Han Haoyu",
version: "3.0.1",
features: ["accordion", "tabs", "lightbox", "lazyload"],
debug: false
};Demo Kode
<!-- Spoiler dasar -->
<details class='sp'>
<summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
<div>
<p>Konten tersembunyi di sini. Bisa berisi apapun.</p>
</div>
</details>
<!-- Spoiler dengan teks tombol yang dikustomisasi -->
<details class='sp'>
<summary data-show='Tampilkan persyaratan lengkap' data-hide='Sembunyikan persyaratan'>
Daftar Persyaratan:
</summary>
<div>
<ol class='steps'>
<li>Persyaratan pertama yang harus dipenuhi.</li>
<li>Persyaratan kedua yang perlu dipersiapkan.</li>
<li>Persyaratan ketiga sebagai pelengkap.</li>
</ol>
</div>
</details>
<!-- Spoiler berisi blok kode panjang -->
<details class='sp'>
<summary data-show='Lihat kode lengkap' data-hide='Tutup kode'>Kode Konfigurasi Penuh:</summary>
<div>
<pre data-source='config.json'><code class='language-json'>{
"key": "value",
"nested": { "key": "value" }
}</code></pre>
</div>
</details>Relevansi Silang
- Komponen 23 (TOC): TOC menggunakan sistem
details.spyang sama — persis seperti spoiler ini tapi dengan class tambahantoc. - Komponen 50 (Accordion): Untuk kumpulan item yang related — gunakan accordion. Untuk satu item standalone — gunakan spoiler.
- Komponen 106 (Spoiler dengan data-show/hide Custom): Detail implementasi spoiler dengan teks tombol yang sangat spesifik sesuai konteks.
Accordion Alternatif (class alt)
Varian Accordion yang Punya Karakter Visual Berbeda
Selain accordion standar (details class='ac'), Han Haoyu Platform punya varian alternatif dengan class alt yang menampilkan accordion dengan gaya visual yang berbeda. Kapan pakai yang mana? Gunakan standard untuk konteks formal dan teknis. Gunakan alt ketika butuh variasi visual atau untuk membedakan konteks accordion yang berbeda dalam satu halaman.
Demo Langsung
Ini adalah accordion dengan style alternatif — klik untuk buka
Konten accordion alternatif. Perhatikan perbedaan visual dari accordion standard (Komponen 50) — terutama pada styling summary/header dan animasinya. Ini cocok dipakai untuk variasi konten yang perlu dibedakan secara visual dari accordion regular di halaman yang sama.
Demo Kode
<!-- Standalone accordion alt -->
<details class='ac alt'>
<summary>Judul Accordion Alt</summary>
<div>
<p>Isi konten accordion alternatif.</p>
</div>
</details>
<!-- Mix accordion standard dan alt dalam satu grup -->
<div class='showH'>
<details class='ac'>
<summary>Item Standard 1</summary>
<div><p>Konten standard.</p></div>
</details>
<details class='ac'>
<summary>Item Standard 2</summary>
<div><p>Konten standard.</p></div>
</details>
<details class='ac alt'>
<summary>Item Alt — visually different</summary>
<div><p>Konten accordion alt dalam grup mix.</p></div>
</details>
</div>Relevansi Silang
- Komponen 50 (Accordion Standard): Bandingkan langsung keduanya untuk memutuskan mana yang lebih cocok untuk konteks kontenmu.
- Komponen 105 (Mix ac dan ac alt): Pattern penggunaan keduanya dalam satu grup yang sama — untuk diferensiasi visual dalam grup accordion campuran.
Accordion FAQ dengan Schema Microdata
Accordion yang Ngobrol Langsung sama Google
Ini bukan sekadar accordion biasa — ini adalah accordion yang dilengkapi dengan schema microdata FAQPage. Artinya, Google bisa membaca struktur FAQ kamu secara semantik dan berpotensi menampilkan jawaban-jawaban FAQ langsung di hasil pencarian sebagai rich result — sebelum user bahkan mengklik ke artikelmu.
Dua kata yang menjelaskan kenapa ini penting: visibility dan CTR. Ketika FAQ kamu muncul langsung di SERP, visibilitas meningkat drastis. Dan ketika user sudah bisa melihat jawaban di preview, mereka yang benar-benar tertarik akan klik — meningkatkan kualitas traffic.
Demo Langsung
Apa itu Han Haoyu Platform dan siapa yang cocok menggunakannya?
Han Haoyu Platform adalah sistem komponen dan dokumentasi untuk blog Blogger yang dirancang untuk developer dan content creator yang ingin membangun konten teknis yang terstruktur, profesional, dan SEO-friendly. Platform ini cocok untuk siapapun yang sering menulis tutorial, dokumentasi API, atau artikel teknis.
Apakah semua komponen Han Haoyu Platform membutuhkan JavaScript?
Tidak. Banyak komponen seperti accordion, spoiler, multi-tab code block, dan show/hide images bekerja menggunakan CSS murni — tanpa JavaScript tambahan. Hanya fitur seperti lazyload image, TOC otomatis, dan Related Posts yang membutuhkan JavaScript untuk berfungsi.
Demo Kode
<!-- Wrapper dengan schema FAQPage -->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
<!-- Setiap FAQ item -->
<details class='ac'
itemscope
itemprop='mainEntity'
itemtype='https://schema.org/Question'>
<!-- Pertanyaan: itemprop='name' wajib di summary -->
<summary itemprop='name'>Pertanyaan FAQ kamu di sini?</summary>
<!-- Jawaban: wrapper dengan schema Answer -->
<div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<!-- Teks jawaban: itemprop='text' wajib ada -->
<p itemprop='text'>Jawaban lengkap dan jelas di sini. Pastikan jawabannya substantif
— Google menilai kualitas konten FAQ, bukan cuma strukturnya.</p>
</div>
</details>
<!-- Tambahkan details lagi untuk FAQ item berikutnya -->
</div>Relevansi Silang
- Komponen 50 (Accordion Standard): Struktur dasarnya sama — hanya ditambah atribut schema microdata. Semua aturan accordion berlaku di sini.
- Komponen 72 (Accordion Alt): FAQ juga bisa pakai class
alt— schema microdata tetap bekerja karena dia ada di atribut HTML, bukan di class CSS. - Komponen 01 (SEO Snippet): Schema FAQ + SEO snippet + thumbnail tersembunyi = trifecta SEO yang powerful untuk artikel dokumentasi.
Manual Related Posts
Kurasi Sendiri Artikel Apa yang Muncul di Bagian Terkait
Related Posts otomatis (Komponen 24) bekerja berdasarkan label artikel. Tapi ada kalanya label-label itu tidak menghasilkan artikel terkait yang paling relevan — atau kamu punya artikel spesifik yang sangat relevan dengan konten saat ini dan ingin memastikannya muncul.
Di sinilah Manual Related Posts masuk: kamu yang tentukan artikel mana yang tampil, bukan algoritma. Kendali penuh, hasil terprediksi.
Demo Langsung
Demo Kode
<div class='pRelate'>
<b>Kamu mungkin ingin baca ini:</b>
<ul>
<li><a href='/link-ke-artikel-1'>Judul Artikel Terkait 1</a></li>
<li><a href='/link-ke-artikel-2'>Judul Artikel Terkait 2</a></li>
<li><a href='/link-ke-artikel-3'>Judul Artikel Terkait 3</a></li>
</ul>
</div>Strategi Internal Linking yang Baik:
Pilih artikel related yang benar-benar relevan dan saling melengkapi — bukan sembarangan pilih. User yang selesai baca artikel kamu dan klik related posts berarti mereka engaged — jangan buang kesempatan itu dengan artikel yang tidak relevan. Untuk seri dokumentasi seperti ini, link ke bagian sebelumnya dan berikutnya adalah pilihan yang selalu tepat.
Relevansi Silang
- Komponen 24 (Related Posts Otomatis): Gunakan otomatis ketika label-nya sudah cukup representatif. Gunakan manual ketika butuh kontrol penuh.
- Komponen 12 (Footer Copyright): Keduanya ada di penutup artikel — manual related posts biasanya di atas footer copyright.
Lazy YouTube — Embed Video Tanpa Bikin Halaman Berat
Video YouTube yang Muat Cepat, Bukan Halaman yang Lambat
Embed YouTube standar menggunakan <iframe> yang langsung memuat seluruh YouTube player beserta semua resource-nya begitu halaman dibuka — bahkan sebelum user berniat memutar videonya. Ini bisa menambahkan ratusan kilobyte hingga beberapa megabyte ke loading halaman.
Solusinya adalah Lazy YouTube — sebuah pendekatan di mana hanya thumbnail video yang ditampilkan dulu. Player YouTube yang sebenarnya baru dimuat setelah user klik thumbnail. Hasilnya: halaman loading jauh lebih cepat, Core Web Vitals lebih baik, dan user tetap bisa menonton video saat mereka mau.
Demo Langsung
Demo Kode
<!-- Cara pakai: cukup satu div dengan data-embed berisi Video ID YouTube -->
<div class='lazyYt' data-embed='ID_VIDEO_YOUTUBE'></div>
<!-- Cara menemukan Video ID:
Dari URL YouTube: https://www.youtube.com/watch?v=dQw4w9WgXcQ
Video ID-nya adalah: dQw4w9WgXcQ (bagian setelah ?v=)
Dari URL pendek: https://youtu.be/dQw4w9WgXcQ
Video ID-nya adalah: dQw4w9WgXcQ (bagian setelah youtu.be/)
-->
<!-- Contoh nyata -->
<div class='lazyYt' data-embed='dQw4w9WgXcQ'></div>Relevansi Silang
- Komponen 76 (Defer YouTube): Alternatif implementasi — menggunakan lazysizes library yang sama dengan lazyload gambar, bukan custom handler.
- Komponen 61 (Lazyload Image): Prinsip yang sama — muat resource hanya saat dibutuhkan — diterapkan ke gambar.
- Komponen 96 (Video Native): Untuk video yang di-host sendiri (bukan YouTube), gunakan tag
<video>native HTML.
Defer YouTube — Iframe Lazy via Lazysizes
Cara Kedua Embed YouTube yang Tetap Performa-Friendly
Ini adalah alternatif dari Komponen 75. Bedanya: Defer YouTube menggunakan library lazysizes yang sudah ada di platform (yang sama dengan lazyload gambar), bukan custom handler. Hasilnya serupa — iframe tidak dimuat sampai mendekati viewport — tapi implementasinya berbeda: pakai class='lazyload' dan data-src pada iframe, persis seperti lazyload gambar.
Demo Langsung
Demo Kode
<div class='videoYt'>
<iframe class='lazyload'
data-src='https://www.youtube.com/embed/ID_VIDEO_YOUTUBE'
title='Deskripsi video untuk aksesibilitas'
frameborder='0'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
referrerpolicy='strict-origin-when-cross-origin'
allowfullscreen>
</iframe>
</div>| Aspek | Lazy YouTube (K.75) | Defer YouTube (K.76) |
|---|---|---|
| Cara kerja | Custom handler — hanya load player saat diklik | Lazysizes — load iframe saat mendekati viewport |
| Tampilan awal | Thumbnail + tombol play | Iframe kosong sampai mendekati viewport |
| Performa | Lebih optimal — player tidak dimuat sampai klik | Baik — load saat mendekati viewport |
| Kode | Simpel — satu div | Lebih lengkap — full iframe attrs |
Relevansi Silang
- Komponen 75 (Lazy YouTube): Bandingkan keduanya — pilih sesuai kebutuhan dan preferensi implementasi.
- Komponen 61 (Lazyload Image): Menggunakan mekanisme lazysizes yang sama — class
lazyloaddan atributdata-src.
Header Subtitle Custom via CSS
Tambahkan Subtitle ke Header Artikel — Tanpa Edit Template
Ada kalanya kamu ingin artikel tertentu punya subtitle di bawah judulnya — tapi nggak mau atau nggak bisa edit template Blogger. Solusinya: tambahkan tag <style> langsung di konten artikel yang meng-inject CSS untuk elemen .headH::after. CSS pseudo-element ::after ini dipakai oleh tema untuk menampilkan konten tambahan setelah elemen header.
Demo Kode
<!-- Taruh di bagian atas artikel, sebelum konten utama -->
<style>
/* Custom Header Subtitle untuk artikel ini saja */
.headH::after {
content: 'Panduan Lengkap Komponen 61 sampai 90 — Bagian 3 dari 6 Seri'
}
</style>
<!-- Contoh dengan subtitle yang lebih panjang -->
<style>
.headH::after {
content: 'Diperbarui Februari 2026 · Waktu baca: ~25 menit · Tersedia dalam 6 bagian'
}
</style>Karena ini menggunakan CSS content property di pseudo-element, teks subtitle tidak bisa mengandung tag HTML — hanya teks plain. Kalau butuh formatting atau link di subtitle, pertimbangkan untuk edit template langsung atau gunakan cara lain.
Relevansi Silang
- Komponen 126–128 (Custom Code di Template): Untuk subtitle yang perlu ada di semua artikel secara global — lebih efisien diletakkan di template daripada di setiap artikel.
- Komponen 32 (H2 dengan data-before): Alternatif untuk "label" di level heading — bukan di header utama artikel, tapi di section heading di dalam konten.
Tabs Konten — Bukan Tabs Kode
Satu Area, Banyak Informasi — User yang Pilih Apa yang Dilihat
Di Komponen 42 dan 48, kita bahas div.pre.tabs — multi-tab khusus untuk kode. Komponen 78 adalah saudaranya: tabs konten umum menggunakan div.tabs — bukan untuk kode, tapi untuk konten apapun: paragraf, tabel, gambar, atau kombinasinya.
Perbedaan mendasar dari sisi HTML: pada tabs kode, konten ada di dalam <pre class='preCX-Y'>. Pada tabs konten, konten ada di dalam <div class='tabC-X'>. Sistem radio input dan labelnya identik — yang beda hanya container kontennya.
Demo Langsung
Han Haoyu Platform adalah sistem komponen dan dokumentasi untuk blog Blogger yang memungkinkan developer dan content creator membangun konten teknis yang terstruktur dan profesional dengan mudah.
Platform ini sudah mencakup 100+ komponen yang didokumentasikan dalam 6 seri artikel Encyclopedia of Components.
- Pastikan template Han Haoyu sudah terpasang di blog Blogger kamu.
- Copy kode komponen yang kamu butuhkan dari dokumentasi ini.
- Paste ke dalam HTML editor artikel Blogger.
- Preview dan publish artikel.
Han Haoyu Platform didistribusikan untuk penggunaan personal dan komersial sesuai dengan ketentuan yang berlaku. Silakan kunjungi halaman lisensi untuk informasi lengkap.
Demo Kode
<div class='tabs'>
<!-- Input radio untuk setiap tab (name harus sama dalam satu grup) -->
<input id='tabT1-1' type='radio' name='tabC1' checked>
<input id='tabT1-2' type='radio' name='tabC1'>
<!-- Header / label tab -->
<div>
<label for='tabT1-1' data-text='Tab Pertama'></label>
<label for='tabT1-2' data-text='Tab Kedua'></label>
</div>
<!-- Konten tab 1 —bisa berisi apapun -->
<div class='tabC-1'>
<p>Konten tab pertama. Bisa paragraf, tabel, gambar, apa saja.</p>
</div>
<!-- Konten tab 2 -->
<div class='tabC-2'>
<p>Konten tab kedua yang berbeda dari tab pertama.</p>
</div>
</div>
<!-- Versi Sticky (tab header mengambang saat scroll) -->
<div class='tabs stick'>
<input id='tabT2-1' type='radio' name='tabC2' checked>
<input id='tabT2-2' type='radio' name='tabC2'>
<div>
<label for='tabT2-1' data-text='Tab A'></label>
<label for='tabT2-2' data-text='Tab B'></label>
</div>
<div class='tabC-1'><p>Konten tab A dengan sticky header.</p></div>
<div class='tabC-2'><p>Konten tab B.</p></div>
</div>Relevansi Silang
- Komponen 42 (Multi-Tab Kode): Saudara kembar — tapi untuk kode, bukan konten umum. Strukturnya hampir identik.
- Komponen 101 (Tabs Sticky): Modifier
stickuntuk tabs konten yang header tab-nya mengambang saat scroll panjang. - Komponen 102 & 103 (9 Tab dan Multi-Grup): Prinsip yang sama berlaku untuk tabs konten — banyak tab dan banyak grup dalam satu halaman memerlukan ID dan name yang unik.
Gambar Responsive
Gambar yang Selalu Proporsional di Semua Ukuran Layar
Class responsive adalah utilitas CSS yang memastikan gambar selalu menyesuaikan ukurannya dengan container — tidak pernah meluber keluar dari area konten, selalu proporsional, dan bekerja otomatis di semua ukuran layar dari mobile hingga desktop ultra-wide.
Ini adalah kelas yang sering dikombinasikan dengan lazyload — karena biasanya gambar yang butuh responsif juga adalah gambar yang perlu di-lazy load untuk performa yang baik.
Demo Langsung
Demo Kode
<!-- Gambar responsive dengan lazyload -->
<img class='lazyload responsive'
alt='Deskripsi gambar yang jelas dan informatif'
data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<!-- Tanpa lazyload (untuk gambar yang harus muncul cepat) -->
<img class='responsive'
alt='Deskripsi gambar'
src='URL-GAMBAR'
width='1280'
height='720'>Relevansi Silang
- Komponen 61 (Lazyload): Kombinasi paling umum —
lazyload responsiveuntuk gambar konten yang responsif dan efisien. - Komponen 54 (Gambar Full): Alternatif — class
fulljuga membuat gambar memenuhi lebar penuh, dengan cara yang sedikit berbeda dariresponsive.
Gambar Tanpa Lightbox (class noLb)
Matikan Lightbox Hanya untuk Gambar Tertentu
Class noLb (No Lightbox) adalah cara kedua untuk menonaktifkan lightbox pada gambar tertentu, selain data-lightbox='false' (Komponen 56). Perbedaannya ada di cara kerjanya dengan class lain:
data-lightbox='false': Atribut HTML — lebih tepat saat gambar tidak punya class lain atau tidak pakai lazyload.class='noLb': Class CSS — lebih tepat saat gambar sudah pakai class lain (sepertilazyload) dan perlu dikombinasikan dalam satu atribut class.
Demo Langsung
Demo Kode
<!-- noLb dikombinasikan dengan lazyload -->
<img class='lazyload noLb'
alt='Ikon atau gambar kecil yang tidak perlu lightbox'
data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<!-- noLb tanpa lazyload -->
<img class='noLb'
alt='Gambar dekoratif yang tidak perlu diperbesar'
src='URL-GAMBAR'
width='200'
height='100'>
<!-- Kombinasi tiga class: lazyload + noLb + responsive -->
<img class='lazyload noLb responsive'
alt='Gambar responsif tanpa lightbox dengan lazyload'
data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>Relevansi Silang
- Komponen 56 (Gambar Tanpa Lightbox — data-lightbox): Cara alternatif — pilih berdasarkan konteks apakah gambar menggunakan class lain atau tidak.
- Komponen 31 (Script IIFE): Class
noLbdibaca oleh script IIFE lightbox handler sebagaiignoreClass— ini menjelaskan mekanisme di baliknya. - Komponen 61 (Lazyload): Kombinasi paling umum —
class='lazyload noLb'untuk gambar kecil yang lazy dan tidak perlu lightbox.
Button Icon Info & Button Full Width
Dua Tambahan Penting yang Melengkapi Sistem Button
Dua komponen ini adalah pelengkap dari Komponen 63 (direktori button lengkap) yang punya use case spesifik cukup sering dibutuhkan: tombol dengan ikon info untuk CTA yang bersifat informatif, dan tombol full-width untuk CTA yang butuh visibilitas tinggi dan memenuhi seluruh lebar container.
Demo Langsung
Button dengan icon info:
Button full width:
Ini Tombol Full Width yang Memenuhi Lebar ContainerDemo Kode
<!-- Button dengan icon info -->
<a class='button' href='#'><i class='icon info'></i>Pelajari Lebih Lanjut</a>
<a class='button' href='#'><i class='icon info'></i>Tentang Fitur Ini</a>
<a class='button ln' href='#'><i class='icon info'></i>Info (versi outline)</a>
<!-- Button full width -->
<a class='button full' href='#'>Teks Tombol Full Width</a>
<a class='button ln full' href='#'>Tombol Full Width Outline</a>
<!-- Full width ke link eksternal -->
<a class='button full'
href='https://link-eksternal.com'
rel='nofollow noreferrer noopener'
target='_blank'>
<i class='icon dl'></i>Download Versi Lengkap
</a>Relevansi Silang
- Komponen 63 (Semua Varian Button): Direktori utama semua button — komponen 81 dan 82 adalah bagian dari koleksi itu.
- Komponen 14 (Button Dasar): Pembahasan konteks dan kapan pakai button sebagai CTA.
Note Info & Note Success
Dua Varian Note yang Sering Terlupakan tapi Sangat Berguna
Dari semua varian note box, note info dan note success adalah dua yang paling sering "lupa" dipakai — padahal keduanya mengisi konteks yang sangat spesifik dan tidak bisa digantikan oleh varian lain dengan cara yang se-tepat ini.
note info untuk informasi yang penting diketahui tapi bukan peringatan. note success untuk konfirmasi atau indikator keberhasilan — "kalau kamu lihat ini, berarti kamu di jalur yang benar".
Demo Langsung
Info Penting
Han Haoyu Platform mendukung penuh dark mode — semua komponen otomatis beradaptasi dengan preferensi sistem operasi pengguna tanpa konfigurasi tambahan.
Berhasil!
Jika artikel kamu tampil dengan benar dan semua komponen bekerja seperti yang diharapkan, berarti instalasi template Han Haoyu Platform sudah berjalan sempurna.
Demo Kode
<!-- Note Info -->
<p class='note info'><b>Info Penting</b><br>
Konten informasi yang perlu diketahui user — tidak mengancam, tidak perlu tindakan, tapi berguna.
</p>
<!-- Note Success -->
<p class='note success'><b>Berhasil!</b><br>
Konfirmasi bahwa langkah atau proses sudah berjalan dengan benar — validasi positif untuk user.
</p>
<!-- Contoh penggunaan nyata di dalam tutorial -->
<ol class='steps'>
<li>Jalankan <code>npm run build</code> di terminal.</li>
<li>
Cek output di terminal — kalau berhasil, kamu akan lihat:
<pre><code>Build complete! 0 errors, 0 warnings.</code></pre>
<p class='note success'><b>Output Ini Berarti Sukses!</b><br>
Kalau kamu lihat pesan di atas, build berhasil dan siap untuk di-deploy.
</p>
</li>
</ol>Relevansi Silang
- Komponen 08 (Note Biasa): Versi tanpa warna khusus — untuk catatan netral yang tidak masuk kategori info, warning, atau success.
- Komponen 09 (Note Warning): Pasangan kontras dari note success — success untuk konfirmasi positif, warning untuk peringatan.
- Komponen 66 (Alert Semua Varian): Alert success dan alert info adalah versi yang lebih besar dan mencolok — pilih sesuai ukuran pesan yang perlu disampaikan.
Split Post / Pagination dalam Post
Artikel Sangat Panjang? Potong Jadi Beberapa Halaman
Berbeda dari Read More Anchor (Komponen 02) yang memotong artikel untuk preview di homepage, Split Post memotong artikel menjadi beberapa halaman penuh yang terpisah — dengan navigasi antar halaman. User bisa berpindah ke halaman 2, 3, dan seterusnya tanpa meninggalkan URL artikel.
Ini berguna untuk artikel yang benar-benar sangat panjang dan tidak bisa atau tidak mau kamu potong menjadi artikel terpisah — tapi juga tidak ingin user scroll tanpa ujung.
Demo Kode
<!-- Konten halaman 1 -->
<div id='postSplit'>
<h2>Bagian 1: Pendahuluan</h2>
<p>Konten halaman pertama di sini. Bisa sepanjang apapun.</p>
<!--nextpage-->
<!-- Konten halaman 2 otomatis dimulai setelah tag ini -->
<h2>Bagian 2: Detail Implementasi</h2>
<p>Konten halaman kedua di sini.</p>
<!--nextpage-->
<!-- Konten halaman 3 -->
<h2>Bagian 3: Kesimpulan</h2>
<p>Konten halaman ketiga — halaman terakhir.</p>
</div>Perhatikan Implikasi SEO-nya!
Split post membuat setiap halaman punya URL berbeda (?page=2, ?page=3). Pastikan konten di setiap halaman cukup substantif dan tidak terlalu pendek — halaman dengan konten sangat tipis bisa memberikan sinyal negatif ke mesin pencari. Pertimbangkan juga apakah lebih baik memecah jadi artikel terpisah yang masing-masing bisa di-SEO-kan secara independen.
Relevansi Silang
- Komponen 02 (Read More Anchor): Berbeda konsep — Read More untuk preview di homepage, split post untuk memotong halaman penuh.
- Komponen 86 (Navigasi Pagination): Navigasi bernomor yang muncul di bawah artikel panjang — langsung terkait dengan split post.
- Komponen 87 (Link Prev & Next): Tombol Previous dan Next yang juga muncul bersama pagination untuk navigasi antar halaman.
Navigasi Blog dengan Pagination Bernomor
Navigasi Halaman yang Jelas dan Informatif
Ini adalah komponen navigasi halaman yang tampil di bawah daftar artikel di halaman utama blog, atau di bawah artikel yang menggunakan split post. Dengan pagination bernomor, user langsung tahu mereka ada di halaman berapa dari total berapa — dan bisa langsung lompat ke halaman yang mereka mau.
Demo Kode
<div class='blogN numP'>
<!-- Indikator halaman saat ini -->
<div class='nPst' data-text='Page 1 of 5:'></div>
<!-- Link ke setiap halaman -->
<a href='?page=1' data-text='1'></a>
<a href='?page=2' data-text='2'></a>
<a href='?page=3' data-text='3'></a>
<a href='?page=4' data-text='4'></a>
<a href='?page=5' data-text='5'></a>
</div>Perhatikan pola yang digunakan: teks halaman ditaruh di atribut data-text, bukan sebagai konten elemen. Ini adalah konvensi Han Haoyu Platform yang konsisten — memisahkan data dari markup agar lebih mudah dikontrol via CSS dan JavaScript.
Relevansi Silang
- Komponen 85 (Split Post): Pagination ini muncul sebagai navigasi antar halaman yang dihasilkan oleh split post.
- Komponen 87 (Prev/Next Link): Sering dikombinasikan — pagination bernomor untuk lompat ke halaman spesifik, prev/next untuk navigasi sekuensial.
Link Previous dan Next Navigasi
Navigasi Dua Arah yang Simple tapi Penting
Prev/Next navigation adalah cara yang paling intuitif untuk navigasi konten berseri atau halaman yang berurutan. Han Haoyu Platform punya class spesifik untuk ini — nwLnk untuk "newer link" (Previous, ke arah lebih baru) dan olLnk untuk "older link" (Next, ke arah lebih lama).
Dan yang thoughtful: ada juga versi disabled menggunakan div dengan class nPst — untuk halaman pertama atau terakhir di mana satu arah navigasinya tidak tersedia.
Demo Kode
<!-- Navigasi Previous dan Next yang aktif -->
<a class='nwLnk' href='?page=2' rel='nofollow noreferrer noopener' aria-label='Previous'>Previous</a>
<a class='olLnk' href='?page=4' rel='nofollow noreferrer noopener' aria-label='Next'>Next</a>
<!-- Versi disabled (tidak ada halaman sebelumnya — di halaman pertama) -->
<div class='nwLnk nPst'>Prev</div> <!-- Tampil sebagai tombol non-aktif -->
<a class='olLnk' href='?page=2' rel='nofollow noreferrer noopener' aria-label='Next'>Next</a>
<!-- Versi disabled (tidak ada halaman berikutnya — di halaman terakhir) -->
<a class='nwLnk' href='?page=4' rel='nofollow noreferrer noopener' aria-label='Previous'>Previous</a>
<div class='olLnk nPst'>Next</div> <!-- Tampil sebagai tombol non-aktif -->Relevansi Silang
- Komponen 86 (Pagination Bernomor): Dua komponen ini sering dipakai bersamaan — pagination untuk akses langsung ke halaman spesifik, prev/next untuk navigasi berurutan.
- Komponen 85 (Split Post): Keduanya adalah komponen navigasi yang terkait langsung dengan split post.
Span Inline-Block & Span Inline-Flex untuk Ikon
Alignment Sempurna Antara Ikon dan Teks
Ini adalah dua pola wrapper yang sering diperlukan ketika menggabungkan SVG icon dengan teks dalam satu baris — dan alignment-nya harus presisi. Dua pendekatan dengan hasil sedikit berbeda:
inline-block+vertical-align:top: Cocok untuk ikon yang perlu sejajar dengan top baseline teks.inline-flex+align-items:baseline: Cocok untuk ikon + teks yang perlu centered secara vertikal satu sama lain.
Demo Langsung
Contoh inline-block (ikon sejajar atas): Klik ikon ini untuk edit konten.
Contoh inline-flex (ikon + label centered): Kode Contoh ini seharusnya terlihat sejajar.
Demo Kode
<!-- Inline-Block: untuk ikon yang sejajar bagian atas teks -->
<span style='display:inline-block;vertical-align:top'>
<svg viewBox='0 0 48 48'>
<path d='M6 34.5V42h7.5l22.13-22.13-7.5-7.5L6 34.5zm35.41-20.41c.78-.78.78-2.05
0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z'/>
</svg>
</span>
<!-- Inline-Flex: untuk ikon + label teks yang perlu centered bersamaan -->
<span style='display:inline-flex;align-items:baseline'>
<svg viewBox='0 0 48 48' style='align-self:center'>
<path d='M0 0h48v48H0V0z' fill='none'/>
<path d='M18.8 33.2L9.7 24l9.2-9.2L16 12 4 24l12 12 2.8-2.8zm10.4 0l9.2-9.2
-9.2-9.2L32 12l12 12-12 12-2.8-2.8z'/>
</svg>
<b style='text-indent:4px'>Label Teks</b>
</span>Relevansi Silang
- Komponen 11 (SVG Icon Inline): Pembahasan lebih lengkap tentang SVG inline — komponen 88 & 89 adalah pattern wrapper-nya.
- Komponen 52 (Include Blogger SVG): Alternatif yang lebih bersih untuk ikon yang sudah terdaftar di tema — tanpa perlu wrapper span manual.
Lightbox Image Wrapper (lbImg)
Pastikan Gambar Ini Pasti Punya Lightbox — Apapun yang Terjadi
Sistem lightbox di Han Haoyu Platform secara default mengaktifkan lightbox untuk semua gambar di #postBody kecuali yang dikecualikan. Tapi ada situasi sebaliknya: gambar yang karena alasan tertentu tidak ter-detect atau tidak dapat lightbox secara default, tapi kamu ingin memastikan dia pasti punya lightbox.
Untuk itu ada div.lbImg (Lightbox Image Wrapper) — sebuah container yang secara eksplisit menandai gambar di dalamnya untuk mendapatkan lightbox, terlepas dari kondisi apapun.
Demo Langsung
Demo Kode
<!-- Lightbox wrapper standar -->
<div class='lbImg'>
<img src='URL-GAMBAR' alt='Deskripsi gambar untuk lightbox'/>
</div>
<!-- Dengan lazyload -->
<div class='lbImg'>
<img class='lazyload'
alt='Screenshot yang perlu bisa diperbesar untuk detail'
data-src='URL-GAMBAR-DETAIL.jpg'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>
<!-- Dengan figure + caption + lightbox -->
<div class='lbImg'>
<figure>
<img alt='Diagram arsitektur sistem Han Haoyu Platform versi 3' src='URL-DIAGRAM.jpg'/>
<figcaption>Arsitektur sistem platform — klik untuk melihat detail</figcaption>
</figure>
</div>data-lightbox='false' dan noLb dipakai untuk menonaktifkan lightbox, lbImg adalah wrapper untuk memastikan lightbox aktif. Keduanya adalah dua kutub berlawanan dari sistem lightbox control di Han Haoyu Platform.
Relevansi Silang
- Komponen 56 (Gambar Tanpa Lightbox): Lawan dari lbImg — untuk menonaktifkan lightbox.
- Komponen 80 (noLb): Cara lain menonaktifkan lightbox via class.
- Komponen 91 (Zoom Image Container): Komponen saudara —
zmImguntuk efek zoom,lbImguntuk lightbox overlay.
Bagian 3 Selesai — Kamu Makin Dekat ke Level Master! 🏆
Selamat! Kamu baru menyelesaikan Bagian 3 dari Encyclopedia of Components Han Haoyu Platform. Tiga puluh komponen lagi masuk ke dalam arsenal pengetahuanmu — dan kalau kamu perhatiin, pola-pola mulai terlihat jelas: bagaimana komponen-komponen saling terhubung, bagaimana satu konsep bisa diaplikasikan ke berbagai konteks, dan bagaimana sistem yang kelihatannya kompleks sebenarnya dibangun dari blok-blok yang terstruktur baik.
Yang paling menarik dari Bagian 3 ini adalah kita mulai menyentuh komponen-komponen yang punya implikasi yang melebihi tampilan visual — seperti accordion FAQ dengan schema microdata yang ngobrol langsung sama Google, atau lazy YouTube yang berdampak langsung ke performa dan Core Web Vitals halaman. Ini bukan lagi "buat artikelnya keliatan bagus" — ini sudah masuk ke ranah "bikin platform-nya bekerja lebih cerdas".
Recap 30 Komponen Bagian 3 (Komponen 61–90):
61 Lazyload Image · 62 Link Eksternal Varian · 63 Button Semua Varian · 64 dlBox Simple · 65 Blockquote 3 Varian · 66 Alert 10 Varian · 67 Tabel Hovered · 68 data-comment · 69 KBD Tag · 70 Mark data-after · 71 Spoiler · 72 Accordion Alt · 73 Accordion FAQ + Schema · 74 Manual Related Posts · 75 Lazy YouTube · 76 Defer YouTube · 77 Header Subtitle CSS · 78 Tabs Konten · 79 Gambar Responsive · 80 noLb · 81 Button Icon Info · 82 Button Full Width · 83 Note Info · 84 Note Success · 85 Split Post · 86 Pagination Bernomor · 87 Prev/Next Link · 88 & 89 Span Inline-Block & Flex · 90 Lightbox Wrapper
Di Bagian 4 — Cheat Sheet Komponen Han Haoyu, kita akan melanjutkan ke komponen-komponen terakhir yang melengkapi ekosistem platform ini. Masih banyak yang menarik untuk dibahas!
Artikel Terkait
Copyright (c):
Han Haoyu Platform
