Halo lagi! 👋 Selamat datang di seri Cheat Sheet Komponen Han Haoyu bagian keempat — alias bagian paling "keren tapi sering dikira susah" dari semua komponen yang ada di platform ini. Kalau kamu udah ngikutin dari bagian 1, 2, dan 3, sekarang kita lanjut ke komponen nomor 91 sampai 120.
Di bagian ini, kita bakal bahas mulai dari cara zoom gambar yang kece, fitur tabs yang bisa sticky (nempel di atas pas di-scroll!), accordion yang bisa dikombinasiin berbagai gaya, spoiler dengan teks kustom, sampai ke hal-hal teknis tapi penting kayak variable template Blogger untuk GA4, favicon, OG image, dan lain-lain. Jadi jangan kemana-mana dulu ya — ini bakal panjang, tapi dijamin ngga ngebosenin!
📌 Catatan Penting: Semua komponen di sini adalah bagian dari base komponen hanhaoyu.com. Pastikan tema kamu sudah support class-class yang disebutkan supaya tampilannya sesuai ekspektasi.
Zoom Image Container zmImg
Oke, bayangin kamu lagi nulis artikel tentang desain UI atau foto produk. Pembaca pengen liat detailnya, tapi kalau langsung pake lightbox kadang terlalu lebay — tinggal klik, muncul modal besar, dll. Nah, zmImg ini solusinya! Ini adalah container zoom on hover — gambar langsung membesar halus saat kursor mendekati, tanpa perlu klik, tanpa modal, tanpa drama. ✨
Cara kerjanya simpel banget. Kamu bungkus tag <img> kamu dengan div yang punya class zmImg. Tema Han Haoyu sudah punya CSS-nya sendiri yang mengatur efek scale saat hover. Jadi kamu tinggal tempel dan jalan!
📺 Demo Langsung
☝️ Coba hover di atas gambarnya — langsung zoom halus tanpa klik!
Info: Di tema Han Haoyu, CSS untuk .zmImg sudah otomatis terpasang. Kode hover di atas hanya untuk keperluan demo artikel ini. Di platform aslinya, cukup pakai class-nya saja tanpa inline event.
Demo Code:
<div class='zmImg'>
<img src='URL-GAMBAR-KAMU' alt='deskripsi gambar'/>
</div>Relevansi & Kombinasi: zmImg cocok banget dikombinasikan dengan figure + figcaption (komponen #99) supaya ada caption-nya juga. Bisa juga dipakai bareng grid gambar (grImg) untuk galeri yang interaktif. Dan kalau mau lebih dramatis, gabungin sama lightbox (lbImg) — jadi hover zoom dulu, klik baru lightbox! 🎯
Anchor Jump Link dengan ID Custom
Ini salah satu komponen yang keliatan "biasa aja" tapi sebenernya super powerful buat navigasi dalam artikel panjang. Idenya sederhana: kamu kasih id pada elemen tertentu, lalu buat link yang ngarahin ke sana. Pas diklik, halaman langsung scroll ke bagian itu. Kayak teleport! 🚀
Misalnya artikelmu punya 10 sub-bab. Daripada pembaca scroll satu-satu sampai capek, kamu bisa bikin daftar isi manual dengan anchor link. Klik sub-bab 7 → langsung lompat ke sana. Efisien, pro, dan UX-nya naik drastis.
📺 Demo Langsung
Ini adalah elemen dengan
id="demo-target-92". Simpel tapi powerful!
Demo Code:
<!-- Buat target anchor-nya dulu -->
<div id='seksiBab7'>
<h3>Bab 7: Cara Deploy ke Production</h3>
<p>Konten bab 7 di sini...</p>
</div>
<!-- Link yang mengarah ke target -->
<a href='#seksiBab7'>Langsung ke Bab 7 ↓</a>Relevansi & Kombinasi: Kombinasikan ID custom ini dengan Table of Contents (komponen #23 dari bagian sebelumnya) untuk daftar isi yang fully functional. Bisa juga dikombinasiin sama komponen <section id="..."> (#97) untuk struktur artikel yang lebih semantik. Tambahin scroll-behavior: smooth via CSS biar transisinya makin mulus! 🎶
Google Analytics GA-4 Variable di Template Blogger
Nah ini yang sering bikin bingung orang-orang yang baru main-main sama template Blogger custom. Jadi, di tema Han Haoyu, konfigurasi Google Analytics tidak diisi langsung di HTML postingan — melainkan lewat sistem Variable bawaan Blogger. Ini lebih aman dan lebih clean karena Tracking ID-nya bisa diganti dari panel tanpa harus korek-korek kode template yang kompleks.
Cara kerjanya: di file XML tema, ada deklarasi Variable yang bernama analytics.accountNumber. Tema akan otomatis inject kode GA-4 ke halaman menggunakan nilai dari variable ini. Kamu tinggal isi Measurement ID-mu di sana!
⚠️ Penting Banget!
Komponen ini diisi di Edit HTML template (XML), bukan di dalam postingan. Jangan dimasukin ke body artikel! Lokasi: Blogger Dashboard → Tema → Edit HTML.
Demo Code — Letakkan di XML Template Blogger:
<Variable name="analytics.accountNumber"
description="Google Analytics GA-4 Tracking Code"
type="string"
default=""
value="G-XXXXXXXXXX"/>Ganti G-XXXXXXXXXX dengan Measurement ID GA-4 kamu yang asli. Format-nya selalu diawali huruf G- diikuti kombinasi huruf dan angka.
Relevansi & Kombinasi: Variable ini berpasangan dengan variable-variable lain seperti meta.icon, meta.keywords, dan opengraph.image (#116–#120) yang akan kita bahas sebentar lagi. Mereka semua adalah bagian dari ekosistem konfigurasi tema Han Haoyu yang terintegrasi rapi.
Related Posts Otomatis dengan Filter Label & Limit Post
Fitur artikel terkait (related posts) itu penting banget buat SEO dan juga buat ngurangin bounce rate — alias pembaca yang kabur setelah baca satu artikel. Nah, di Han Haoyu ada dua mode artikel terkait: otomatis berdasarkan label, dan manual.
Yang kita bahas di komponen #94 ini adalah versi otomatis tapi dengan kontrol lebih — kamu bisa spesifikasi mau tampilkan artikel dari label apa (data-label) dan maksimal berapa artikel yang muncul (data-max-posts). Keren kan? Misalnya kamu lagi nulis tutorial "CSS Animation", kamu bisa setting related posts-nya untuk nampilin artikel-artikel lain berlabel "CSS" maksimal 6 artikel. Bukan asal recommend yang ngga nyambung! 🎯
Demo Code — Dengan filter label spesifik:
<details class='sp arp' open>
<summary data-show='Show all' data-hide='Hide all'>Artikel Terkait</summary>
<div class='aRel'
data-label='Tutorial CSS'
data-max-posts='6'>
</div>
</details>Demo Code — Tanpa filter label (tampil semua):
<!-- Tanpa data-label: tampil artikel apapun labelnya -->
<details class='sp arp' open>
<summary data-show='Show all' data-hide='Hide all'>Artikel Terkait</summary>
<div class='aRel' data-max-posts='4'></div>
</details>Catatan: Elemen div.aRel akan terisi otomatis oleh JavaScript tema. Jangan isi konten di dalamnya secara manual — biarkan script yang bekerja! 🤖
Relevansi & Kombinasi: Komponen ini bisa dikombinasiin sama sp (spoiler) lain untuk tampilan yang konsisten. Bisa juga dipadukan sama Table of Contents (#23) di bagian atas artikel — ToC di atas, Related Posts di bawah, artikel jadi berasa majalah digital profesional! 📰
Semua Class Modifier Tabel yang Belum Kamu Tahu!
Ini nih yang bikin tabel di Han Haoyu beda dari tabel HTML biasa yang polos dan membosankan. Ada banyak class modifier yang bisa kamu kombinasikan untuk mengubah tampilan tabel sesuai kebutuhan. Mulai dari border container, warna header, tinggi maksimum, sampai padding konten. Semuanya tinggal tambah class — no CSS tambahan!
Border & Wrapper Modifier
cborder menambahkan border pada container div-nya (bukan table-nya langsung), cocok buat framing tabel. Sedangkan noborder menghilangkan border dari konten tabel — berguna untuk tabel yang isinya lebih ringan dan minimalis.
<!-- Border di container div tabel -->
<div class='table cborder'>...</div>
<!-- Hapus border konten tabel -->
<div class='table noborder'>...</div>Header Berwarna
Mau header tabel yang lebih mencolok dan informatif? Tambahkan salah satu class warna ini sesuai konteks: primary, clr, warning, success, atau error. Pilih warna yang sesuai konteks tabelnya — tabel error log pakai error, tabel keberhasilan pakai success, dst.
📺 Demo Langsung — Berbagai Warna Header Tabel:
<div class='table bordered primary'>...</div>
<div class='table bordered clr'>...</div>
<div class='table bordered warning'>...</div>
<div class='table bordered success'>...</div>
<div class='table bordered error'>...</div>Max-Height Tabel (Scrollable)
Kalau tabelmu punya banyak baris dan kamu ngga mau ia memanjang ke bawah tak terkendali, pakai class max-height ini. Isinya bisa di-scroll secara vertikal. Ada mh200 (200px), mh300 (300px), dan mhvh (berdasarkan viewport height).
<div class='table bordered mh200'>...</div> <!-- Max height 200px -->
<div class='table bordered mh300'>...</div> <!-- Max height 300px -->
<div class='table bordered mhvh'>...</div> <!-- Max height viewport -->Padding Konten Tabel
Mau konten sel tabelnya lebih lega atau lebih rapat? Tinggal tambah sp5, sp10, atau sp20 untuk padding 5px, 10px, atau 20px di dalam tiap sel.
<div class='table bordered sp5'>...</div> <!-- Padding 5px -->
<div class='table bordered sp10'>...</div> <!-- Padding 10px -->
<div class='table bordered sp20'>...</div> <!-- Padding 20px -->✅ Pro Tip: Kamu bisa bebas kombinasikan class-class ini! Contoh: class='table sticky bordered stripped hovered primary sp10 mh300' — ini valid dan akan membuat tabel dengan semua fitur tersebut aktif sekaligus. Gila banget kan fleksibilitasnya! 🔥
Relevansi & Kombinasi: Class modifier tabel ini cocok dikombinasikan dengan sticky, bordered, stripped, dan hovered yang sudah dibahas di bagian sebelumnya. Untuk tabel dengan data panjang, gabungkan mh300 + sticky supaya header tetap terlihat saat konten di-scroll secara vertikal.
Video Embed Native HTML (Bukan YouTube!)
YouTube itu memang raja, tapi ada kalanya kamu punya file video sendiri dan pengen langsung embed tanpa ribet upload ke YouTube dulu. Mungkin itu video tutorial singkat, preview animasi produk, atau klip yang bersifat privat. Nah, HTML punya tag <video> native yang bisa kamu pakai langsung!
Di Han Haoyu, penggunaan tag <video> ini dilengkapi style inline yang bikin tampilannya langsung rapi — lebar penuh, tinggi 350px, dan sudut border-radius yang smooth. Tinggal ganti URL video-nya!
📺 Demo Langsung — Video Native HTML:
Video contoh: Big Buck Bunny (open-source, via W3Schools) ☝️
Demo Code:
<video
src="https://url-server-kamu.com/video/tutorial.mp4"
controls
playsinline
style="width:100%;height:350px;border-radius:12px">
</video>
<!-- Versi autoplay untuk video background -->
<video
src="https://url-server-kamu.com/video/bg-loop.mp4"
autoplay muted loop playsinline
style="width:100%;height:350px;border-radius:12px;object-fit:cover">
</video>Atribut penting yang perlu kamu tahu: controls menampilkan tombol play/pause/volume. playsinline mencegah video otomatis fullscreen di iOS Safari — wajib pakai ini! muted dibutuhkan agar autoplay bisa bekerja di semua browser modern (policy browser).
Relevansi & Kombinasi: Bisa dikombinasikan sama figure + figcaption (#99) untuk menambahkan keterangan di bawah video. Atau bungkus dalam div.card untuk framing yang lebih estetik. Untuk video YouTube, gunakan komponen lazyYt atau videoYt yang sudah ada di platform Han Haoyu untuk performa yang lebih baik.
Semantic HTML dengan <section> + ID
Ini bukan sekadar soal kode yang jalan — ini soal kode yang benar secara semantik. Pake tag <section> dengan id itu penting banget buat dua hal: SEO dan aksesibilitas. Mesin pencari kayak Google lebih suka konten yang terstruktur dengan baik, dan screen reader juga lebih gampang baca kontennya.
Bayangkan artikel panjangmu dibagi jadi beberapa section: "Pengenalan", "Instalasi", "Konfigurasi", "Troubleshooting". Dengan <section id="...">, tiap bagian punya identitas yang jelas, bisa di-link langsung, dan algoritma Google makin ngerti isi kontenmu secara keseluruhan.
📺 Demo Langsung — Struktur Section dengan ID:
📦 Section: Instalasi
Ini adalah section dengan id="bagian-instalasi". Bisa di-jump dari anchor link manapun di halaman ini!
⚙️ Section: Konfigurasi
Section berikutnya dengan id="bagian-konfigurasi". Terstruktur rapi dan SEO-friendly! 🚀
Demo Code:
<section id="bagian-instalasi">
<h2>Cara Instalasi</h2>
<p>Panduan langkah demi langkah untuk instalasi...</p>
</section>
<section id="bagian-konfigurasi">
<h2>Konfigurasi Awal</h2>
<p>Setelah instalasi, lakukan konfigurasi berikut...</p>
</section>Relevansi & Kombinasi: Wajib dikombinasiin sama anchor jump link (#92) dan Table of Contents (#23). Trio ini adalah senjata rahasia artikel panjang yang SEO-friendly. Makin panjang artikelnya, makin penting pakai kombinasi ini! Google juga bisa menampilkan "jump link" di search result untuk halaman yang struktur kontennya jelas.
Tag Underline <u> — Simpel tapi Bertenaga!
Serius, ini beneran sering underlook sama orang. Tag <u> itu berbeda dari <em> (italic) dan <strong> (bold). Secara semantik, <u> digunakan untuk teks yang perlu dibedakan dari sekitarnya — misalnya istilah teknis, nama asing, atau teks yang perlu penekanan visual berbeda dari konteksnya.
Di Han Haoyu, tag <u> bisa dipakai langsung di dalam paragraf, heading, maupun list item untuk memberikan garis bawah yang clean.
📺 Demo Langsung — Variasi Penggunaan Tag <u>:
Dalam sebuah kalimat biasa, teks bergaris bawah langsung menarik perhatian pembaca tanpa berteriak-teriak seperti teks merah atau bold.
Siapa Saja Developer Aktif di Komunitas Ini?
- ✔ Kontribusi ke repo open-source secara rutin
- ✔ PKM yang lolos seleksi nasional dua tahun berturut
- ✔ Aktif di komunitas developer Surabaya & sekitarnya
Demo Code:
<!-- Di dalam paragraf -->
<p>Platform ini menggunakan <u>arsitektur berbasis komponen</u> yang modular.</p>
<!-- Di dalam heading H2 -->
<h2>Mengenal <u>Sistem Navigasi</u> di Han Haoyu</h2>
<!-- Di dalam list item -->
<ul>
<li>Aktif di <u>forum diskusi resmi</u> setiap minggu</li>
</ul>Relevansi & Kombinasi: Tag <u> bisa dikombinasikan dengan <b> dan <i> untuk efek penekanan yang lebih kaya di dalam list item (#112). Di heading, kombinasi <h2> + <u> (#108) menciptakan visual yang elegan dan berkarakter.
Figure + Figcaption dengan Lightbox Otomatis
Kalau komponen #91 itu zoom on hover, komponen figure + figcaption ini adalah cara yang lebih lengkap dan semantik untuk menampilkan gambar. Dengan <figure>, gambarmu punya "bingkai" resmi secara HTML. Dengan <figcaption>, ada caption di bawahnya yang informatif. Dan di tema Han Haoyu, kalau kamu tidak tambahkan data-lightbox='false', gambar akan otomatis masuk ke sistem lightbox! 🎉
Artinya? Pembaca tinggal klik gambar → langsung muncul overlay fullscreen yang bisa di-zoom, di-navigate antar gambar, dll. Gratis, otomatis, tanpa coding tambahan.
📺 Demo Langsung — Figure dengan Caption:
Demo Code:
<!-- Figure dengan caption + lightbox aktif (default) -->
<figure>
<img alt='Deskripsi gambar yang SEO-friendly dan informatif'
src='https://url-gambar-kamu.com/foto.jpg'
width='1280'
height='720'
loading='lazy'/>
<figcaption>Caption gambar kamu | Nama Platform</figcaption>
</figure>
<!-- Kalau TIDAK mau lightbox, tambahkan data-lightbox='false' -->
<figure>
<img alt='Gambar tanpa efek lightbox'
src='URL-GAMBAR'
data-lightbox='false'/>
<figcaption>Gambar ini tidak akan membuka lightbox saat diklik</figcaption>
</figure>💡 SEO Tip: Selalu isi atribut alt dengan deskripsi yang informatif dan mengandung keyword relevan. Google Images juga butuh ini buat ranking di image search! Minimal 5–10 kata yang deskriptif.
Relevansi & Kombinasi: Kombinasikan sama zmImg (#91) untuk zoom + lightbox sekaligus. Bisa juga dipakai di dalam ol.steps untuk artikel tutorial dengan gambar per langkah. Grid gambar (grImg) juga bisa diisi elemen figure untuk galeri yang lebih rich dan semantic!
Tabel dengan Class tbl — Milestone Komponen ke-100! 🎉
Komponen ke-100! Ini momen bersejarah di seri cheat sheet kita! 🥳 Kalau komponen tabel sebelumnya pakai <div class='table'> sebagai wrapper dengan berbagai modifier class, komponen ini sedikit berbeda — class tbl diletakkan langsung di tag <table>-nya. Ini berguna dalam situasi tertentu di mana kamu butuh style tabel tapi strukturnya lebih langsung tanpa layer yang terlalu dalam.
📺 Demo Langsung — Tabel dengan class tbl:
Demo Code:
<div class='table'>
<table class='tbl'>
<thead>
<tr>
<th>Nama Fitur</th>
<th>Class</th>
<th>Efek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zoom Gambar</td>
<td><code>zmImg</code></td>
<td>Zoom saat hover</td>
</tr>
</tbody>
</table>
</div>Relevansi & Kombinasi: Bisa dikombinasikan dengan semua modifier class tabel dari komponen #95. Gunakan class tbl ini khususnya ketika kamu butuh tabel dalam konteks yang lebih lightweight, misalnya di dalam accordion atau spoiler.
Tabs Konten Sticky — Header Tab yang Nempel Saat Scroll!
Ini salah satu fitur paling keren yang sering dipakai di artikel dokumentasi panjang. Tabs biasa sudah powerful, tapi tabs sticky itu next level! Bayangkan kamu punya artikel tutorial yang panjang banget, isinya 5 tab berbeda. Kalau header tab-nya ikutan ke-scroll ke atas, pembaca harus scroll balik lagi buat ganti tab — ribet banget!
Dengan class stick, header tab-nya otomatis mengambang di atas viewport saat di-scroll. Pembaca bisa ganti tab kapanpun tanpa kehilangan posisi membaca. UX-nya naik 10 level! ⬆️
Demo Code — Tabs dengan class stick:
<div class='tabs stick'>
<input id='tabT-stick-1' type='radio' name='postTabs-stick' checked>
<input id='tabT-stick-2' type='radio' name='postTabs-stick'>
<input id='tabT-stick-3' type='radio' name='postTabs-stick'>
<div>
<label for='tabT-stick-1' data-text='JavaScript'></label>
<label for='tabT-stick-2' data-text='Python'></label>
<label for='tabT-stick-3' data-text='Go'></label>
</div>
<div class='tabC-1'>
<pre><code>console.log("Hello, World!");</code></pre>
</div>
<div class='tabC-2'>
<pre><code>print("Hello, World!")</code></pre>
</div>
<div class='tabC-3'>
<pre><code>fmt.Println("Hello, World!")</code></pre>
</div>
</div>Kunci Penting: Setiap grup tabs HARUS punya atribut name yang unik dan berbeda dari grup lainnya. Kalau dua grup pakai name yang sama, mereka akan saling interfere dan bikin chaos!
Tabs Hingga 9 Tab dalam Satu Grup!
Ternyata tabs di Han Haoyu bisa menampung hingga 9 tab dalam satu grup! Berguna banget buat artikel perbandingan banyak framework, bahasa pemrograman, atau pilihan konfigurasi. Pola kodenya tetap sama — tinggal tambah jumlah input dan content div-nya sesuai kebutuhan.
Demo Code — Template Tabs 9 Input (Maksimum):
<div class='tabs stick'>
<!-- Input radio — satu per tab, hingga maksimal 9 -->
<input id='tabBig-1' type='radio' name='postTabs-banyak' checked>
<input id='tabBig-2' type='radio' name='postTabs-banyak'>
<input id='tabBig-3' type='radio' name='postTabs-banyak'>
<input id='tabBig-4' type='radio' name='postTabs-banyak'>
<input id='tabBig-5' type='radio' name='postTabs-banyak'>
<!-- ... hingga tabBig-9 -->
<!-- Header label tab -->
<div>
<label for='tabBig-1' data-text='React'></label>
<label for='tabBig-2' data-text='Vue'></label>
<label for='tabBig-3' data-text='Svelte'></label>
<label for='tabBig-4' data-text='Angular'></label>
<label for='tabBig-5' data-text='Solid'></label>
</div>
<!-- Konten tiap tab -->
<div class='tabC-1'><p>Konten tentang React...</p></div>
<div class='tabC-2'><p>Konten tentang Vue...</p></div>
<div class='tabC-3'><p>Konten tentang Svelte...</p></div>
<div class='tabC-4'><p>Konten tentang Angular...</p></div>
<div class='tabC-5'><p>Konten tentang Solid...</p></div>
</div>Dua Grup Tabs Berbeda dalam Satu Halaman — Jangan Sampai Salah!
Ini sering bikin orang pusing karena tab-nya saling kepengaruh satu sama lain. Solusinya simpel tapi sering kelupaan: setiap grup tabs HARUS punya atribut name yang berbeda! Input radio bekerja berdasarkan name group — kalau namanya sama, mereka dianggap satu kelompok, dan memilih satu akan mempengaruhi yang lain. Kacau!
Demo Code — Dua Grup Tabs yang Independen:
<!-- GRUP A: name unik 'postTabs-grupA' -->
<div class='tabs stick'>
<input id='tabGrupA-1' type='radio' name='postTabs-grupA' checked>
<input id='tabGrupA-2' type='radio' name='postTabs-grupA'>
<div>
<label for='tabGrupA-1' data-text='Frontend'></label>
<label for='tabGrupA-2' data-text='Backend'></label>
</div>
<div class='tabC-1'><p>Konten Frontend...</p></div>
<div class='tabC-2'><p>Konten Backend...</p></div>
</div>
<!-- GRUP B: name BERBEDA 'postTabs-grupB' ← ini kuncinya! -->
<div class='tabs stick'>
<input id='tabGrupB-1' type='radio' name='postTabs-grupB' checked>
<input id='tabGrupB-2' type='radio' name='postTabs-grupB'>
<div>
<label for='tabGrupB-1' data-text='Instalasi'></label>
<label for='tabGrupB-2' data-text='Konfigurasi'></label>
</div>
<div class='tabC-1'><p>Konten Instalasi...</p></div>
<div class='tabC-2'><p>Konten Konfigurasi...</p></div>
</div>⚠️ Penting Banget!
Kalau dua grup tabs pakai name yang sama, memilih tab di grup pertama akan mempengaruhi grup kedua. Ini bug yang sering terjadi dan bikin frustasi! Selalu pastikan setiap grup punya name yang benar-benar unik dan berbeda.
Relevansi & Kombinasi: Tabs bisa dikombinasikan sama pre tabs (multi-tab code block dari bagian sebelumnya) untuk campuran konten dan kode. Bisa juga diisi dengan tabel, gambar, atau bahkan accordion di dalamnya untuk pengalaman membaca yang super rich dan interaktif!
Accordion Berisi Langkah-Langkah (Nested Steps!)
Ini kombinasi yang sangat powerful untuk artikel tutorial atau dokumentasi teknis. Bayangin kamu punya beberapa proses kompleks yang masing-masing punya langkah-langkahnya sendiri. Daripada numbering jadi panjang dan membingungkan, kamu bisa bungkus setiap proses dalam sebuah accordion. Pembaca buka accordion yang relevan, ikutin langkah-langkahnya, selesai. Clean banget! 🎯
📺 Demo Langsung — Accordion dengan Langkah-Langkah:
Demo Code:
<div class='showH'>
<details class='ac'>
<summary>📦 Cara Instalasi Plugin</summary>
<div>
<ol class='steps'>
<li>Download file plugin dari halaman resmi.</li>
<li>Upload ke direktori <code>/wp-content/plugins/</code></li>
<li>Aktifkan lewat menu Plugins → Installed Plugins.</li>
</ol>
</div>
</details>
<details class='ac'>
<summary>⚙️ Cara Konfigurasi Awal</summary>
<div>
<ol class='steps'>
<li>Buka Settings → Plugin Settings.</li>
<li>Isi API Key dari dashboard akun kamu.</li>
<li>Klik <b>Save Changes</b> dan tunggu konfirmasi.</li>
</ol>
</div>
</details>
</div>Accordion Mix — Gabungan Style Default dan Alt dalam Satu Grup
Dalam satu grup showH, kamu bisa mencampur accordion dengan style ac (default) dan ac alt (alternatif). Hasilnya adalah grup accordion dengan variasi visual — bagian pertama pakai gaya satu, bagian berikutnya gaya lain. Berguna misalnya buat memisahkan FAQ umum vs FAQ teknis secara visual tanpa harus bikin dua container terpisah.
Demo Code:
<div class='showH'>
<!-- Style default untuk pertanyaan umum -->
<details class='ac'>
<summary>❓ Apa itu Han Haoyu Platform?</summary>
<div><p>Platform Blogger berbasis tema custom yang dirancang...</p></div>
</details>
<details class='ac'>
<summary>❓ Apakah gratis digunakan?</summary>
<div><p>Beberapa fitur tersedia gratis, beberapa premium...</p></div>
</details>
<!-- Style alt untuk pertanyaan teknis -- tampilan berbeda! -->
<details class='ac alt'>
<summary>🔧 Bagaimana cara install temanya?</summary>
<div><p>Ikuti langkah-langkah di dokumentasi instalasi...</p></div>
</details>
<details class='ac alt'>
<summary>🔧 Kompatibel dengan Blogger versi berapa?</summary>
<div><p>Kompatibel dengan semua versi Blogger modern...</p></div>
</details>
</div>Relevansi & Kombinasi: Accordion bisa dikombinasikan dengan tabs (#101–103) untuk artikel yang sangat kompleks — setiap tab bisa berisi sekelompok accordion! Bisa juga tambahkan schema FAQ microdata (#73) untuk mendapat rich result di Google. 🏆
Spoiler dengan Teks Tombol yang Bisa Dikustomisasi
Kalau accordion itu untuk FAQ atau konten terstruktur, spoiler ini lebih bersifat "klik kalau mau tahu lebih" — kayak twist ending di novel detektif! 🕵️ Yang bikin komponen ini spesial di Han Haoyu adalah atribut data-show dan data-hide yang bisa kamu isi sendiri. Jadi teks tombolnya ngga melulu "Show all" dan "Hide all" — bisa kamu sesuaikan sama konteks kontennya!
📺 Demo Langsung — Spoiler dengan Teks Kustom:
Demo Code:
<details class='sp'>
<summary
data-show='📋 Lihat Persyaratan Lengkap'
data-hide='✕ Tutup Daftar Persyaratan'>
Checklist Persyaratan Beasiswa
</summary>
<div>
<ol class='steps'>
<li>Fotokopi KTP yang masih berlaku.</li>
<li>Transkrip nilai dengan IPK minimal 3.00.</li>
<li>Sertifikat bahasa Inggris (TOEFL/IELTS).</li>
<li>Surat rekomendasi dari minimal 2 dosen tetap.</li>
</ol>
</div>
</details>Cara kerja data-show/data-hide: Tema Han Haoyu menggunakan JavaScript untuk mengubah teks tombol berdasarkan state. Saat ditutup → tampil teks dari data-show. Saat dibuka → tampil teks dari data-hide. Intuitif dan user-friendly!
Relevansi & Kombinasi: Spoiler sangat cocok untuk konten opsional yang kalau dipaksa tampil justru bikin artikel terlihat terlalu panjang dan mengintimidasi pembaca. Bisa diisi blok kode panjang, tabel besar, atau langkah-langkah lanjutan. Kombinasikan sama ol.steps atau tabel untuk konten yang lebih terstruktur di dalamnya.
Paragraf Indent — Nuansa Buku dan Majalah!
Class pIndent ini memberikan sentuhan editorial yang elegan. Baris pertama paragraf akan menjorok ke dalam (text indent) seperti di buku-buku fiksi atau majalah lifestyle. Cocok banget buat konten narasi panjang yang mau kamu sajikan dengan nuansa storytelling yang kuat.
📺 Demo Langsung — Paragraf dengan class pIndent:
Suatu sore di tengah deadline yang menumpuk, ketika layar laptop sudah menyala sejak pagi dan kopi di meja sudah dingin untuk keempat kalinya, aku baru menyadari bahwa cara menyajikan teks itu sama pentingnya dengan isi teksnya sendiri. Pembaca yang nyaman dengan tampilan artikel, akan lebih betah membaca sampai akhir.
☝️ Perhatikan baris pertama yang menjorok masuk — itulah efek class pIndent!
Demo Code:
<p class='pIndent'>
Suatu sore di tengah deadline yang menumpuk, ketika layar laptop sudah
menyala sejak pagi dan kopi di meja sudah dingin untuk keempat kalinya...
</p>Heading H2 dengan Underline Parsial
Kombinasi <h2> dan <u> ini menghasilkan judul yang punya penekanan visual di bagian tertentu saja. Bukan semua kata-nya digaris bawahi, tapi hanya kata atau frasa kunci yang mau di-highlight. Teknik ini lazim dipakai di blog personal, artikel opini, dan konten lifestyle yang punya karakter kuat.
📺 Demo Langsung:
Siapa Saja Dosen Pemberi Rekomendasi?
Cara Mudah Deploy ke Production dalam 5 Menit
Demo Code:
<h2>Siapa Saja <u>Dosen Pemberi Rekomendasi</u>?</h2>
<h2>Cara Mudah <u>Deploy ke Production</u> dalam 5 Menit</h2>Heading H3 dengan Italic + Teks Biasa Gabungan
Mirip dengan #108, tapi ini di level H3 dan menggunakan <i> (italic) bukan underline. Efeknya lebih halus dan elegan — cocok untuk sub-judul yang punya nuansa personal atau subjektif. Misalnya memisahkan nama judul buku/karya/konsep dengan teks deskriptifnya dalam satu heading yang kohesif.
📺 Demo Langsung:
Roadmap Hidup Mahasiswa yang Aku Susun Sendiri
The Pragmatic Programmer — Buku yang Ubah Cara Aku Coding
Demo Code:
<h3><i>Roadmap Hidup Mahasiswa</i> yang Aku Susun Sendiri</h3>
<h3><i>The Pragmatic Programmer</i> — Buku yang Ubah Cara Aku Coding</h3>Anchor Read More Blogger
Satu tag HTML yang super simpel tapi fungsinya penting banget untuk Blogger: <a name='more'></a>. Tag ini adalah penanda titik potong "Read More" di Blogger. Artikel yang ditampilkan di halaman utama blog hanya akan tampil sampai titik ini — sisanya tersembunyi di balik tombol "Read More". Tag inilah yang mengontrol preview artikel di homepage!
Demo Code — Letakkan di tengah postingan:
<!-- Teks preview yang tampil di halaman utama blog -->
<p>Ini adalah paragraf pembuka yang tampil di homepage sebagai preview...</p>
<!-- Penanda titik potong Read More -->
<a name='more'></a>
<!-- Konten lanjutan yang hanya muncul saat buka artikel penuh -->
<p>Konten lanjutan yang tersembunyi di homepage — baru kelihatan setelah klik Read More!</p>Info: Blogger juga mendukung shortcode <!--more--> yang fungsinya identik. Di tema Han Haoyu, keduanya didukung. Pilih yang lebih nyaman buat workflow kamu!
Inline Style untuk Catatan Kaki Tabel
Terkadang kamu butuh teks kecil di bawah tabel — entah itu catatan asterisk, sumber data, atau disclaimer singkat. Cara paling praktis adalah langsung pakai inline style dengan font-size:12px dan margin-top secukupnya. No class baru, no CSS tambahan, langsung jalan!
📺 Demo Langsung:
*Estimasi tanggal pelaksanaan dapat berubah sewaktu-waktu sesuai kondisi dan kebijakan penyelenggara.
Demo Code:
<div class='table bordered'>
<!-- tabel kamu di sini -->
</div>
<!-- Catatan kaki tepat di bawah tabel -->
<p style='font-size:12px;margin-top:8px'>
*Estimasi tanggal dapat berubah sewaktu-waktu.
</p>Unordered List dengan Mixed Formatting
List item tidak harus plain text! Di Han Haoyu, kamu bebas kombinasikan <b>, <i>, dan <u> di dalam setiap <li> untuk penekanan yang lebih kaya secara visual. Perfect banget buat CV digital, checklist pencapaian, atau daftar fitur yang mau terlihat berkarakter dan hidup.
📺 Demo Langsung — List dengan Mixed Formatting:
- ✔ Bantu lebih dari 10 dosen dalam riset dan pengabdian masyarakat.
- ✔ PKM lolos pendanaan nasional untuk tahun anggaran 2024.
- ✔ Aktif di komunitas developer Surabaya dan luar kampus.
Demo Code:
<ul>
<li>✔ <b>Bantu lebih dari 10 dosen</b> dalam riset dan pengabdian masyarakat.</li>
<li>✔ <i>PKM lolos pendanaan nasional</i> tahun anggaran 2024.</li>
<li>✔ Aktif di <u>komunitas developer Surabaya dan luar kampus</u>.</li>
</ul>Relevansi & Kombinasi (#107–112): Semua komponen tipografi ini bisa dikombinasikan satu sama lain. Artikel narasi yang kuat: pIndent untuk flow naratif yang enak dibaca, heading h2 + u untuk judul yang berkarakter, dan ul dengan mixed formatting untuk highlight pencapaian atau fitur. Nuansanya jadi kaya dan berkesan! ✨
Alert Error sebagai Kotak "Informasi" — Fleksibel Banget!
Ini mungkin salah satu hal paling counter-intuitive di cheat sheet ini. Class alert error secara default nuansanya merah dan terkesan kritis. Tapi kamu bisa pakai class ini untuk tujuan lain yang lebih soft — misalnya kotak informasi yang menarik perhatian lebih kuat dari alert info biasa, tapi tidak terlalu mengancam seperti alert warning.
Intinya: nama class itu hanya identifier visual, bukan aturan konteks yang kaku. Kamu yang tentukan dipakai untuk keperluan apa!
📺 Demo Langsung — Alert Error untuk Info:
Demo Code:
<!-- Alert error untuk informasi penting -->
<div class='alert error'><b>ℹ️ Informasi!</b>
Silakan pilih tab yang sesuai di bawah ini.
</div>
<!-- Alert error outline untuk peringatan -->
<div class='alert error outline'><b>⚠️ Perhatian!</b>
Data yang sudah dihapus tidak bisa dikembalikan.
</div>Note Polos Tanpa Judul Tebal
Kadang kamu cuma butuh kotak catatan yang ringan dan tidak drama. Cukup info singkat yang netral, tanpa embel-embel judul tebal, tanpa ikon-ikon. Itulah fungsi <p class='note'> tanpa tag <b> di dalamnya. Simple, clean, dan tidak makan terlalu banyak visual attention.
📺 Demo Langsung:
Ini adalah catatan tambahan tanpa judul tebal — cocok untuk info ringkas yang sudah cukup jelas tanpa perlu label atau penekanan lebih.
Demo Code:
<!-- Note dengan judul (standar) -->
<p class='note'><b>Catatan:</b> Teks catatan di sini.</p>
<!-- Note polos tanpa judul tebal (minimalis) -->
<p class='note'>
Catatan ringkas tanpa judul — untuk informasi yang sudah jelas konteksnya.
</p>Card Alt — Kartu Konten Alternatif
Komponen card alt adalah elemen kartu dengan style alternatif dari kartu standar. Cocok digunakan sebagai penutup artikel yang hangat, kotak quote spesial, atau highlight konten yang perlu pembingkaian berbeda. Di Han Haoyu, komponen ini sering muncul di bagian akhir artikel sebagai ucapan penutup atau call-to-action yang lebih personal dan kurang "corporate".
📺 Demo Langsung:
Terima kasih sudah baca artikel ini sampai sejauh ini! Kalau kamu menemukan tips yang berguna, jangan lupa share ke teman-teman yang juga lagi belajar bikin website. Berbagi itu menyenangkan, dan komunitas yang tumbuh bersama itu jauh lebih indah. 💜
Demo Code:
<div class='card alt'>
<p>Terima kasih sudah baca sampai habis! Kalau helpful,
share ke teman-teman yang juga lagi belajar ngoprek web. 💜</p>
</div>Relevansi & Kombinasi (#113–115): Ketiga komponen ini bisa dikombinasikan untuk menciptakan hierarchy informasi yang matang. Contoh flow yang powerful: alert error untuk info penting di awal → konten utama → note polos sebagai disclaimer → card alt di akhir sebagai penutup yang hangat dan human. Artikel jadi terasa bernyawa!
Variable Tag Blogger XML — Konfigurasi Visual & SEO Terpusat!
Kita masuk ke territory yang agak teknis tapi super penting: Variable Tag di XML Template Blogger. Kalau komponen sebelumnya adalah hal-hal yang kamu taruh di dalam postingan, variable ini adalah hal-hal yang kamu taruh di Edit HTML template — alias otak di balik tampilan seluruh blog kamu secara global.
Tema Han Haoyu menggunakan sistem variable terpusat yang rapi. Mau ganti favicon? Ubah satu variable. Mau update OG image default? Satu variable. Mau set keyword meta global? Satu variable. Tidak perlu korek-korek kode template yang kompleks!
⚠️ Ingat: Semua komponen di bagian ini TIDAK dimasukkan ke dalam postingan. Mereka ada di file XML template Blogger. Akses via: Blogger Dashboard → Tema → Edit HTML.
Favicon — Ikon Tab Browser (meta.icon)
Variable meta.icon mengontrol favicon yang muncul di tab browser, bookmark, dan shortcut homescreen. Gunakan PNG berukuran 512×512 pixel untuk kualitas terbaik di semua device dan resolusi layar.
<Variable name="meta.icon"
description="Favicon URL"
type="string"
default=""
value="https://namadomain.com/img/favicon.png"/>Meta Keywords (meta.keywords)
Variable meta.keywords mengisi tag <meta name="keywords"> secara global untuk seluruh halaman blog. Isi dengan keyword yang relevan dengan niche blog kamu, pisahkan dengan koma.
<Variable name="meta.keywords"
description="Keywords Meta Tag content"
type="string"
default=""
value="blogger theme, hanhaoyu, tutorial web, komponen html, cheat sheet blogger"/>Meta Default Image (meta.image)
Variable meta.image adalah gambar default yang dipakai ketika sebuah halaman tidak punya gambar spesifiknya sendiri. Kalau ada artikel tanpa gambar cover lalu di-share di medsos, gambar inilah yang muncul. Gunakan rasio 16:9 dengan lebar minimal 1280px.
<Variable name="meta.image"
description="Image Meta Tag URL (rasio 16:9, min 1280px lebar)"
type="string"
default=""
value="https://namadomain.com/img/default-thumb.jpg"/>Open Graph Image (opengraph.image)
Variable opengraph.image mengisi og:image — gambar yang muncul saat artikel di-share di Facebook, WhatsApp, Discord, Telegram, dan platform yang support Open Graph protocol. Idealnya gunakan gambar berukuran 1200×630px untuk tampilan optimal.
<Variable name="opengraph.image"
description="Open Graph Image URL (1200x630px direkomendasikan)"
type="string"
default=""
value="https://namadomain.com/img/og-image-1200x630.jpg"/>Twitter Card Image (twitter.image)
Variable twitter.image mengisi twitter:image — gambar khusus untuk preview di Twitter/X. Format yang Twitter rekomendasikan adalah rasio 2:1 (landscape) dengan ukuran minimal 300×157px, tapi untuk tampilan premium pakai 1200×600px.
<Variable name="twitter.image"
description="Twitter Card Image URL (rasio 2:1, ideal 1200x600px)"
type="string"
default=""
value="https://namadomain.com/img/twitter-card-1200x600.jpg"/>📋 Rangkuman Cepat — Semua Variable Meta yang Wajib Diisi:
| Variable Name | Fungsi | Ukuran Ideal | Platform |
|---|---|---|---|
meta.icon |
Favicon tab browser | 512×512px PNG | Semua browser |
meta.keywords |
Meta keywords global | Teks, pisah koma | Search engines |
meta.image |
Gambar meta default | 16:9, min 1280px | General meta |
opengraph.image |
OG image share | 1200×630px | FB, WA, Discord, TG |
twitter.image |
Twitter Card image | 1200×600px (2:1) | Twitter / X |
*Semua ukuran di atas adalah rekomendasi untuk tampilan optimal. Ukuran di bawahnya masih bisa bekerja tapi mungkin dipotong atau pikselasi.
Relevansi & Kombinasi: Variable-variable ini bekerja bersama sebagai satu sistem SEO dan social sharing yang kohesif. Pastikan semua terisi dengan benar — karena inilah yang menentukan bagaimana blog kamu terlihat di Google, Facebook, Twitter/X, dan WhatsApp ketika artikel di-share. First impression itu segalanya! 🎯
Wrap Up Bagian 4 — Kita Makin Dekat ke Finish Line! 🏁
Oke sob, itu tadi komponen #91 sampai #120 yang udah kita bedah habis-habisan di bagian 4 ini. Dari zoom gambar yang smooth tanpa klik, tabs sticky yang UX-nya top tier, accordion yang bisa di-mix style-nya, sampai ke variable template Blogger yang mengontrol SEO dan social sharing secara global — semua udah kamu kuasai sekarang!
Kalau dirangkum, ini highlight dari bagian 4:
- ✅ zmImg — Zoom gambar on hover, no JavaScript custom needed
- ✅ Anchor ID Custom — Jump link untuk navigasi artikel panjang yang pro
- ✅ GA-4 Variable — Konfigurasi analytics rapi via template, bukan postingan
- ✅ Related Posts + data-label — Artikel terkait yang lebih relevan dan terkontrol
- ✅ Table modifier class — 15+ class untuk tabel yang super fleksibel
- ✅ Native Video HTML — Embed video file langsung tanpa YouTube
- ✅ Section tag + ID — Struktur artikel yang semantic dan SEO-friendly
- ✅ Figure + Figcaption — Gambar dengan caption dan lightbox otomatis
- ✅ Tabs sticky hingga 9 tab — Multi-tab dengan header yang nempel saat scroll
- ✅ Accordion nested + mix style — FAQ dan tutorial yang interaktif dan beragam
- ✅ Spoiler teks kustom — Konten tersembunyi yang berkarakter dan fleksibel
- ✅ Tipografi lanjutan — pIndent, heading hybrid, mixed list formatting
- ✅ Alert & Card alt — Variasi kotak informasi yang adaptif
- ✅ 5 Variable Blogger — Favicon, keywords, OG, Twitter, meta image terpusat
Masih ada komponen #121 sampai #136 yang bakal kita bahas di bagian 5! Di sana ada hal-hal menarik soal konfigurasi lanjutan template, script placement, robots.txt, dan beberapa trik tersembunyi yang bikin blog kamu makin solid. Stay tune! 🔥
🔗 Navigasi Seri: Artikel ini adalah bagian dari seri Cheat Sheet Komponen Han Haoyu. Cek bagian 1, 2, dan 3 untuk komponen #1–#90!
Kalau artikel seri ini ngebantu kamu, share ke teman-teman yang lagi ngoprek Blogger atau bikin web. Dan kalau ada yang kurang jelas atau mau request bahas komponen tertentu lebih mendalam, tinggal komen di bawah ya! 🙌 Kita belajar bareng, tumbuh bareng. ✨
Copyright (c):
hanhaoyu.com
