Snippet Tersembunyi (SEO Hidden Preview)
Ini si ninja kecil yang gak keliatan di halaman, tapi krusial banget buat SEO dan preview Blogger. Isinya deskripsi singkat artikel kamu — kayak sinopsis film tapi versi mini. Taruh di paling atas konten artikel.
Demo #1
Komponen ini hidden jadi gak keliatan di halaman. Tapi kalau kamu inspect element, dia ada kok! Coba klik kanan → Inspect.
<!-- Taruh di paling atas konten artikel -->
<div hidden aria-hidden='true'>Deskripsi singkat artikel kamu di sini. Maksimal 160 karakter ya biar SEO happy.</div>Anchor Read More (Blogger)
Ini penanda buat Blogger supaya tau di mana konten dipotong di halaman utama. Setelah tag ini, konten bakal disembunyikan dan muncul tombol "Read More". Simple tapi penting!
Info Demo #2
Tag <a name="more"> ini invisible di halaman tapi punya kekuatan besar di Blogger. Semua konten di bawahnya bakal kepotong di homepage.
<!-- Taruh di tempat kamu mau konten dipotong -->
<a name="more"></a>
<!-- atau versi HTML5 yang lebih modern: -->
<!--more-->Gambar Cover Artikel
Gambar hero di bagian atas artikel. Diklik bisa buka versi full-nya.
Pakai class separator yang udah jadi standar bawaan Blogger dari jaman baheula.
<div class="separator" style="clear: both;">
<a href="URL-GAMBAR-FULL" style="display: block; padding: 1em 0; text-align: center;">
<img alt="deskripsi gambar" border="0" src="URL-GAMBAR" />
</a>
</div>Link Eksternal
Link yang nunjuk ke luar domain kamu. Wajib pakai rel="nofollow noreferrer noopener"
dan target="_blank" biar SEO-friendly, aman dari tabnabbing, dan link juice gak bocor kemana-mana.
Mau baca dokumentasi resmi? Klik aja: MDN Web Docs — ensiklopedianya developer web se-jagat raya.
<a class="extL" href="https://url-tujuan.com" rel="nofollow noreferrer noopener" target="_blank">Teks Link</a>Teks Code Inline
Buat nampilkan kode pendek di dalam kalimat. Misalnya ngomongin nama variabel, nama class, atau perintah terminal.
Cukup satu tag <code>, gak perlu ribet.
Gunakan property display: flex untuk membuat layout fleksibel. Jangan lupa tambahkan gap: 1rem supaya jarak antar item rapi. Kalau mau tengah, pakai justify-content: center.
<!-- Inline code di dalam teks biasa -->
Gunakan <code>nama-kode-disini</code> untuk penjelasan teknis.Blok Kode Panjang (CSS / JS / HTML / JSON)
Buat nampilkan kode yang panjang dan butuh dipreserve formatnya.
Kombinasi pre + code adalah duet maut yang gak boleh dipisah.
pre menjaga whitespace, code ngasih semantik "ini kode".
/* Contoh CSS lengkap */
.container {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 860px;
margin: 0 auto;
padding: 2rem;
}
.card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}<pre><code>kode panjang
kamu di sini</code></pre>Highlight Mark di Dalam Blok Kode
Buat nandain bagian kode yang harus diganti atau perlu perhatian khusus.
Attribute data-before bakal nampilin tooltip/label keterangan di atas nilai yang di-highlight.
Super berguna buat tutorial!
// Konfigurasi Firebase — ganti nilai di bawah ini dengan punya kamu!
const firebaseConfig = {
apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "nama-project.firebaseapp.com",
projectId: "nama-project-id",
storageBucket: "nama-project.appspot.com"
};<pre><code>databaseUrl: "<mark data-before='Label Keterangan'>nilai-yang-harus-diganti</mark>"</code></pre>Kotak Catatan Biasa (Note)
Kotak info ringan buat kasih catatan tambahan yang gak terlalu urgent. Ibaratnya post-it kuning yang nempel di pinggir buku — ada tapi gak ganggu.
<div class='note'>Teks catatan atau info tambahan kamu di sini.</div>
<!-- atau pakai tag p -->
<p class='note'>Teks catatan di sini.</p>Kotak Peringatan / Warning
Kotak merah garang buat kasih peringatan yang serius. Kalau yang baca skip bagian ini,
resiko ditanggung sendiri ya. Pakai kombinasi class note wr.
Penting Banget!
Jangan edit atau hapus file theme.xml sebelum backup terlebih dahulu! Kalau salah edit bisa-bisa tampilan blog kamu polos putih kayak kertas HVS, dan restore-nya makan waktu berjam-jam.
<p class='note wr'><b>Penting Banget!</b><br>
Teks peringatan kamu di sini.
</p>Daftar Langkah-Langkah (Steps)
Ordered list dengan styling keren buat tutorial step-by-step. Bisa nested dengan blok kode dan catatan di dalamnya. Ini favoritnya pembuat tutorial karena bikin instruksi jadi super jelas!
- Login ke Blogger dengan akun Google kamu.
- Masuk ke menu Theme → klik tombol Edit HTML.
- Tekan Ctrl + F untuk buka panel pencarian, lalu cari kode
</head>. -
Tempel kode berikut tepat di atas
</head>:<link rel='stylesheet' href='https://cdn.kamu.com/style.css'/>Tips!
Pastikan URL stylesheet-nya sudah benar dan bisa diakses publik sebelum disave. - Klik tombol Save (ikon disket) di pojok kanan atas. Selesai! 🎉
<ol class='steps'>
<li>Langkah pertama.</li>
<li>Langkah kedua dengan <code>kode</code> di dalamnya.</li>
<li>Langkah ketiga dengan <b>teks tebal</b>.</li>
<li>
Langkah dengan blok kode di dalamnya.
<pre><code>kode di sini</code></pre>
<p class='note'>Catatan untuk langkah ini.</p>
</li>
</ol>SVG Icon Inline (di Dalam Teks)
Icon SVG yang bisa ditempel langsung di dalam kalimat atau judul.
Pakai style="display:inline-block;vertical-align:top" biar sejajar sama teks.
Dua contoh di bawah: icon panah bawah dan icon save.
Klik ikon panah bawah untuk expand konten. Atau klik ikon save untuk menyimpan perubahan.
<!-- Icon panah bawah -->
<svg viewBox='0 0 512 512' width='18' height='18' style='display:inline-block;vertical-align:top;fill:currentColor'>
<path d='M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z'></path>
</svg>
<!-- Icon save/simpan -->
<svg viewBox='0 0 48 48' width='18' height='18' style='display:inline-block;vertical-align:top;fill:currentColor'>
<path d='M34 6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V14l-8-8zM24 38c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20H10v-8h20v8z'></path>
</svg>Footer Copyright Artikel
Tanda tangan di bagian bawah artikel. Class pRef ngasih styling khusus
buat teks referensi/copyright. Taruh di paling bawah konten artikel sebelum closing tag.
Copyright (c):
Han Haoyu Platform — hanhaoyu.com
<p class='pRef'>Copyright (c):<br>
Nama Platform Kamu
</p>Gambar Dengan Caption (Figure)
Gambar yang ada keterangan di bawahnya. Pakai tag semantik <figure>
dan <figcaption> — ini cara yang bener secara HTML5.
Lebih SEO-friendly dibanding taruh teks caption manual.
<figure>
<img alt="Deskripsi gambar" height="720" loading="eager" src="URL-GAMBAR" width="1280"/>
<figcaption>Teks caption gambar | Nama Platform</figcaption>
</figure>Tombol / Button Link
Tombol aksi yang bisa diklik. Pakai tag <a> dengan class button.
Bisa dikasih ikon di dalamnya. Bungkus dengan div ber-style text-align:center kalau mau ditengahin.
<div style='text-align:center'>
<a class="button" href="#tujuan"><i class='icon demo'></i>Teks Tombol</a>
</div>Garis Pemisah (HR)
Tag paling sederhana di dunia HTML tapi fungsinya gak bisa diremehkan.
Satu tag <hr> langsung bikin konten terlihat terstruktur.
Di tema HHC, dia tampil cantik sesuai variabel CSS yang udah disetting.
Konten di bagian atas sebelum garis pemisah — bisa paragraf, kode, gambar, apapun.
Konten di bagian bawah setelah garis pemisah — terasa ada jarak kan? Enak di mata!
<!-- Segampang ini, satu tag doang -->
<hr>Heading H3 dan H4 (Sub-Judul Bertingkat)
Struktur hierarki judul yang bikin artikel mudah di-scan dan SEO happy. H2 = judul seksi utama, H3 = sub-judul, H4 = sub-sub-judul. Jangan skip level ya — dari H2 langsung ke H4 itu kayak loncat dua anak tangga, bahaya!
Sub Judul Level 3 — Ini Bagian Besar
Konten yang masuk dalam sub-judul level 3. Biasanya berisi penjelasan cukup panjang tentang topik yang disebutkan di judul.
Sub Judul Level 4 — Ini Bagian Lebih Kecil
Konten yang masuk dalam sub-judul level 4. Biasanya lebih detail dan spesifik dari H3 di atasnya.
<h3>Sub Judul Level 3</h3>
<h4>Sub Judul Level 4</h4>Download Box — Versi Thumbnail Gambar
Kotak download keren dengan thumbnail gambar di sisinya.
Semua info dimasukin lewat data-* attribute — nama file, ukuran, resolusi, kategori, dan link download-nya.
Setelah timeout countdown, tombol download bakal aktif.
<div class='hhc-download-box'
data-link='https://link-download-kamu.com'
data-image='https://url-thumbnail-kamu.jpg'
data-timeout='30'
data-nama='Nama File Kamu'
data-kategori='Kategori'
data-ukuran='879KB'
data-resolusi='1980x1080'></div>Download Box — Versi Placeholder Ekstensi
Varian download box tanpa thumbnail. Sebagai gantinya, dia nampilin ekstensi file (seperti .zip, .apk, .pdf)
sebagai visual placeholder. Cocok kalau kamu gak punya thumbnail untuk file yang mau di-share.
<div class='hhc-download-box'
data-link='https://link-download-kamu.com'
data-placeholder='.zip'
data-timeout='10'
data-nama='Nama File Kamu'
data-kategori='Dokumen'
data-ukuran='2.5MB'
data-format='PDF'></div>Data Attribute Custom (Info Tambahan di Download Box)
Download box HHC itu fleksibel banget — kamu bisa tambah data-* attribute bebas dan
semuanya otomatis tampil sebagai info tambahan. Mau tambah versi, tanggal, penulis? Tinggal tambah aja!
<!-- Bebas tambahin data attribute apapun, semua otomatis tampil! -->
<div class='hhc-download-box'
data-link='#'
data-placeholder='.apk'
data-timeout='15'
data-nama='Nama Aplikasi'
data-versi='2.0.1'
data-tanggal='11 Feb 2026'
data-penulis='Nama Kamu'
data-target='_blank'></div>Blok Kode Konfigurasi JS (Messages Config)
Contoh blok kode buat nampilin konfigurasi JavaScript, termasuk string dengan HTML di dalamnya.
Karakter seperti < dan > harus di-escape dengan HTML entities biar gak error.
// Konfigurasi pesan custom untuk download box
messages: {
startingDownload: "Memulai Download dalam <span>%d</span> detik",
pleaseWait: "Mohon tunggu, sedang mempersiapkan file...",
downloadReady: "File siap! Klik tombol di bawah.",
error: "Aduh! Link rusak, coba lagi nanti."
}<!-- Ingat: tanda < dan > wajib di-escape jadi < dan > -->
<pre><code>messages: {
startingDownload: "Memulai Download dalam <span>%d</span> detik",
pleaseWait: "Mohon tunggu..."
}</code></pre>Script Type Module (JS Modern/ESM di Blogger)
Cara pakai JavaScript modern dengan syntax import/export di Blogger.
Wajib pakai type='module' dan wrapper CDATA biar Blogger gak komplain.
Script module otomatis jalan deferred — artinya halaman selesai load dulu baru script jalan.
Catatan #21
Script module tidak akan dieksekusi langsung di halaman dokumentasi ini karena butuh konteks Blogger. Tapi kode di bawah ini siap pakai di template Blogger kamu!
<script type='module'>/*<![CDATA[*/
// Import bisa pakai ES Module syntax
// import { sesuatu } from './modul.js';
// Kode JS modern kamu di sini
const elemen = document.querySelector('.target');
elemen?.addEventListener('click', () => {
console.log('Klik terdeteksi!');
});
/*]]>*/</script>Thumbnail Tersembunyi (Untuk Sistem Blogger)
Cara "nipu" sistem Blogger biar dia ngambil gambar tertentu sebagai thumbnail artikel. Taruh di dalam komentar HTML — gak akan kelihatan di halaman tapi Blogger bisa baca dan set sebagai featured image.
Cara Kerja #22
Kode ini ada di dalam komentar HTML jadi gak kelihatan. Tapi Blogger punya parser khusus yang baca isi komentar ini untuk ngambil thumbnail artikel. Cerdik kan sistemnya!
<!--[
<div class='separator'><img src='URL-THUMBNAIL-KAMU'/></div>
]-->Table of Contents (Daftar Isi Otomatis)
Daftar isi yang auto-generate dari semua heading di artikel.
Cukup taruh komponen ini, tema HHC bakal otomatis scanning semua H2/H3/H4 dan bikin daftar linknya.
Div aToc yang kosong itu bakalan diisi JS tema secara otomatis.
Daftar Isi
<details class='sp toc' open>
<summary data-show='Show all' data-hide='Hide all'>Daftar Isi</summary>
<div class='aToc'></div>
</details>Artikel Terkait (Related Posts Otomatis)
Kotak artikel terkait yang otomatis ambil post dari label yang sama.
Tema HHC yang ngurus semuanya — kamu tinggal taruh komponen ini di tempat yang kamu mau.
Div aRel yang kosong bakal diisi otomatis oleh JS tema.
Artikel Terkait
<details class='sp arp' open>
<summary data-show='Show all' data-hide='Hide all'>Artikel Terkait</summary>
<div class='aRel'></div>
</details>Tabel Lengkap (Sticky Header + Bordered + Stripped)
Tabel dokumentasi API yang keren abis. Header sticky (ngambang saat scroll), ada border, ada warna selang-seling baris. Cocok banget buat dokumentasi parameter atau perbandingan fitur.
| Parameter | Tipe Data | Default | Keterangan |
|---|---|---|---|
data-link |
string |
— |
URL tujuan download. Wajib diisi! |
data-timeout |
number |
30 |
Waktu countdown sebelum tombol aktif (detik) |
data-nama |
string |
— |
Nama file yang ditampilkan |
data-ukuran |
string |
— |
Ukuran file, contoh: 2.5MB |
[data-kategori] |
string |
"File" |
Kategori/tipe file opsional |
<div class='table sticky bordered stripped'>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Tipe Data</th>
<th>Default</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>key</td>
<td><code>string</code></td>
<td></td>
<td>Keterangan parameter di sini</td>
</tr>
</tbody>
</table>
</div>Daftar Definisi / API Reference (dl, dt, dd)
Buat dokumentasi API yang rapi pakai tag semantik <dl> (definition list),
<dt> (term), dan <dd> (description).
Simbol ⇒ (panah kanan tebal) dipakai buat nunjukin return value.
- hhcCookie
- .get(key) ⇒
string | null - .getAll() ⇒
object - .set(key, value) ⇒
void - .remove(key) ⇒
boolean - .set(key, value, [config]) ⇒
string
<dl>
<dt>namaObject</dt>
<dd>.method() ⇒ <code>string | null</code></dd>
<dd>.method() ⇒ <code>boolean</code></dd>
<dd>.method(key) ⇒ <code>void</code></dd>
<dd>.method(key, value, [config]) ⇒ <code>string</code></dd>
</dl>Teks Strong (Lebih Semantik dari Bold Biasa)
Bedain <strong> sama <b> ya!
Strong punya makna semantik "sangat penting", sementara b cuma visual tebal doang.
Screen reader bakal baca strong dengan penekanan lebih — penting buat aksesibilitas!
Sebelum menghapus file apapun, pastikan kamu sudah melakukan backup lengkap ke Google Drive atau storage lain. Data yang terhapus tidak bisa dikembalikan tanpa backup!
<!-- Pakai strong untuk teks yang benar-benar penting secara semantik -->
<strong>Teks penting di sini</strong>
<!-- Pakai b untuk visual tebal tanpa makna semantik khusus -->
<b>Teks tebal biasa</b>Tanda Panah / Simbol Unicode ⇒
Simbol panah kanan tebal ⇒ yang sering dipakai buat nunjukin
return value sebuah method atau flow navigasi. Lebih elegan dari tanda -> biasa!
Method getCookie(key) ⇒ string | null
Method setCookie(key, val) ⇒ void
Method deleteCookie(key) ⇒ boolean
<!-- Panah kanan ⇒ untuk return value -->
<p>Method ini ⇒ <code>string | null</code></p>Blok Kode Dengan Komentar Output
Best practice nulis contoh kode — tampilin kodenya sekalian sama output yang dihasilkan,
dipisah pakai komentar // Output:. Pembaca langsung tau apa yang bakal terjadi
tanpa harus nyoba sendiri dulu!
// Ambil semua cookie yang tersimpan
const result = hhcCookie.getAll();
console.log(result);
// Output: { user: 'Han Haoyu', theme: 'dark', language: 'id', lastVisit: '2026-02-11' }
// Ambil satu nilai spesifik
const theme = hhcCookie.get('theme');
console.log(theme);
// Output: 'dark'
// Hapus cookie
hhcCookie.remove('lastVisit');
// Output: true (kalau berhasil) atau false (kalau gak ada)<pre><code>const result = cookie.getAll();
console.log(result);
// Output: { user: 'Han Haoyu', theme: 'dark', language: 'id' }</code></pre>Heading H2 + H3 + H4 Bertingkat (Pola Dokumentasi Lengkap)
Pola hierarki heading standar buat dokumentasi API atau fitur. H2 = nama fitur utama, H3 = nama method, H4 = detail sub-bagian (parameter, return value, contoh). Konsisten pakai pola ini bikin dokumentasi kamu keliatan profesional banget!
Method getCookie(key) ⇒ string | null
Parameter yang Dibutuhkan
| Nama | Tipe | Keterangan |
|---|---|---|
key | string | Nama cookie yang mau diambil nilainya |
Return Value
Mengembalikan nilai cookie berupa tipe string. Kalau cookie tidak ditemukan, return null.
Contoh Penggunaan
const userTheme = getCookie('theme');
if (userTheme) {
document.body.dataset.theme = userTheme;
}<h2>Nama Fitur Utama</h2>
<h3>Method namaMethod(param) ⇒ <code>returnType</code></h3>
<h4>Parameter yang Dibutuhkan</h4>
<!-- tabel parameter di sini -->
<h4>Return Value</h4>
<p>Penjelasan return value di sini, tipe: <code>string</code></p>
<h4>Contoh Penggunaan</h4>
<pre><code>// kode contoh di sini</code></pre>Script IIFE / Self-Invoking Function
JavaScript yang langsung jalan sendiri begitu dimuat, tanpa perlu dipanggil.
Pola (function(options){...}).call(this, {config}) bikin kode bersih karena
semua variabel di dalamnya terisolasi — gak nyampurin namespace global!
Demo #31
Script IIFE di bawah ini akan langsung berjalan saat halaman dimuat — menambahkan efek tooltip pada semua elemen code saat di-hover.
<script>
(function (options) {
// kode javascript kamu di sini
// options.selectors → target elemen
// options.ignoreClass → class yang dikecualikan
// options.classes.namaClass → class yang di-inject ke elemen
}).call(this, {
selectors: "#postBody img",
ignoreClass: "noLb",
classes: {
imageWrapper: "NamaClassWrapper",
lightboxWrapper: "NamaClassLightbox"
}
});
</script>Heading H2 Dengan Label Prefix (data-before)
Nambahin badge/label sebelum teks judul pakai attribute data-before.
Biasanya dipakai buat penomoran metode atau kasih konteks tambahan tanpa ganggu semantik heading.
CSS tema yang ngurus renderingnya pakai pseudo-element ::before.
Instalasi Manual via FTP
Penjelasan untuk metode pertama ini. Cocok buat yang sudah familiar dengan FTP client seperti FileZilla.
Instalasi Otomatis via cPanel
Penjelasan untuk metode kedua yang lebih mudah. Cocok buat pemula yang belum familiar dengan FTP.
<h2 data-before='Metode 1: '>Judul Metode Kamu</h2>Blok Kode Dengan Label File (data-source)
Nampilin nama file di atas blok kode — kayak label di tab editor kode.
Pembaca langsung tau kode ini ada di file mana tanpa baca keterangan panjang-panjang.
Tambah data-comment untuk nampilin ekstensi/bahasa di sisi kanan.
// Cloudflare Worker — script yang jalan di edge
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
return new Response('Halo dari edge server!', {
headers: { 'content-type': 'text/plain' },
});
}/* Custom CSS untuk blog HHC */
:root {
--primary: #5b7bff;
--bg: #0d0f14;
}
.container {
max-width: 860px;
margin: 0 auto;
}<!-- Dengan label file saja -->
<pre data-source='worker.js'><code>// kode kamu di sini</code></pre>
<!-- Dengan label file DAN label bahasa -->
<pre data-comment='.html' data-source='src/index.html'><code>kode kamu di sini</code></pre>Teks Bergaris Bawah (Underline)
Tag <u> buat garisbawahi teks. Biasanya dipakai buat nandain istilah teknis,
nama file, atau teks yang perlu perhatian khusus — tapi bukan link.
Jangan overpakai ya, nanti pembaca kira semua teks garis bawah itu link!
Buka file config.json di root folder project kamu, lalu cari bagian database settings dan ganti nilainya sesuai kredensial server kamu.
<p>Teks biasa, <u>teks yang perlu digarisbawahi</u>, lanjut teks biasa.</p>Tabel Simpel (Bordered + Stripped, Tanpa Sticky)
Versi tabel yang lebih ringan — ada border, ada warna selang-seling, tapi header gak sticky.
Cocok buat tabel pendek yang gak butuh scroll panjang.
Bisa tambah keterangan dengan warna merah di bawahnya pakai var(--synxRed).
| Nama ENV | Service | Environment |
|---|---|---|
DATABASE_URL |
PostgreSQL |
production |
REDIS_HOST |
Redis Cache |
production |
API_SECRET |
Auth Service |
all |
* Semua nilai ENV di atas harus diset di Cloudflare dashboard sebelum deploy.
<div class='table bordered stripped'>
<table>...</table>
</div>
<span style='color:var(--synxRed);'>*</span>Keterangan tabel kamu di sini.Ordered List Biasa (Daftar Bernomor Non-Tutorial)
<ol> tanpa class steps — buat daftar opsi, pilihan, atau
konten berurutan yang bukan instruksi step-by-step.
Lebih simpel tampilannya, cocok buat daftar perbandingan atau pilihan.
- Cloudflare Workers: Serverless edge computing gratis, cocok buat API ringan dan redirect handler.
- Vercel Functions: Terintegrasi mulus dengan Next.js, auto-deploy dari GitHub.
- Netlify Functions: Mudah setup, cocok buat JAMstack site.
- Firebase Cloud Functions: Ekosistem Google, powerful tapi lebih complex setupnya.
<ol>
<li><b>Opsi Pertama</b>: Penjelasan opsi pertama di sini.</li>
<li><b>Opsi Kedua</b>: Penjelasan opsi kedua di sini.</li>
</ol>Teks Italic (Tag i dan em)
Sama kayak strong vs b, bedain <em> dan <i> ya!
Em = penekanan semantik (screen reader baca dengan intonasi berbeda).
I = visual miring doang, biasa buat nama produk, istilah asing, atau sound effect.
Klik Deploy karena kita baru bisa edit kode setelah deploy worker Hello World! dulu. Proses ini butuh waktu sekitar 30 detik — jadi sabar dulu ya, jangan di-refresh!
<!-- em untuk penekanan bermakna -->
<p>Jangan <em>pernah</em> commit API key ke repository publik!</p>
<!-- i untuk visual/stilistik -->
<p>Deploy worker <i>Hello World!</i> dulu sebelum edit kode.</p>Navigasi Antar Bagian (Simbol Panah Teks >)
Cara nulis alur navigasi UI seperti "Settings > Account > Privacy".
Pakai > (bukan karakter panah Unicode) biar aman di semua browser.
Dibungkus tag <b> buat kasih penekanan visual pada nama menu-nya.
Untuk mengaktifkan fitur ini, buka Settings > Advanced > Developer Options > Enable Custom Theme.
Atau bisa juga lewat shortcut: tekan Ctrl + Shift + P > ketik theme > pilih Switch Theme.
<p>Ke bagian <b>Rules</b> > <b>Overview</b>.</p>Mark di Dalam Tabel (Highlight di Sel Tabel)
Tag <mark> bisa dipakai di dalam sel tabel buat nandain nilai yang perlu diganti
atau yang penting. Biasanya dikombinasi sama <code> buat nilai teknis.
| Rule | Route Pattern | Status |
|---|---|---|
| Main Domain | www.namadomain.com/* |
Active |
| API Subdomain | api.namadomain.com/* |
Active |
| Assets CDN | cdn.namadomain.com/static/* |
Pending |
<td><code><mark>www.namadomain.com</mark>/*</code></td>Teks Warna Custom (CSS Variable Inline)
Pakai CSS variable tema var(--synxRed) langsung di inline style buat teks berwarna merah.
Kenapa pakai CSS variable? Biar kalau tema ganti warna, teks ini juga ikut berubah otomatis — konsisten!
* Field bertanda bintang merah wajib diisi.
Perhatian: Jangan pernah share API key kamu ke siapapun! Ini serius, beneran jangan!
<!-- Tanda bintang merah -->
<span style='color:var(--synxRed);'>*</span>Keterangan field wajib
<!-- Teks merah lengkap -->
<span style='color:var(--synxRed);'>Teks berwarna merah sesuai tema</span>Alert Box / Info Box
Kotak notifikasi bergaya dengan border dan background sesuai jenisnya.
Class alert info outline bikin kotak info dengan border biru dan background transparan.
Lebih "dewasa" tampilannya dibanding kotak note biasa.
Info Pembaruan v3.0 Mulai versi 3.0, sistem download box HHC sekarang support custom data attribute tanpa perlu konfigurasi tambahan. Semua data attribute yang kamu tambahkan akan otomatis tampil sebagai info di kotak download.
<p class='alert info outline'><b>Judul Info</b>
Teks penjelasan info penting kamu di sini. Bisa pakai <b>teks tebal</b> di dalamnya.
</p>Multi-Tabs Code Block (Tab Switcher Sebelum/Sesudah)
Code block dengan tab switcher — perfect buat nampilin perbandingan kode "sebelum" dan "sesudah" edit.
Pakai radio input CSS-only (no JavaScript!). Setiap grup tab harus punya name yang unik.
/* CSS lama — masih polos */
.container {
width: 100%;
background: white;
padding: 20px;
}/* CSS baru — udah kece! */
.container {
width: 100%;
max-width: 860px;
margin: 0 auto;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 24px rgba(0,0,0,.3);
}<div class='pre tabs'>
<input id='preT1-1' type='radio' name='preTab' checked=''/>
<input id='preT1-2' type='radio' name='preTab'/>
<div>
<label for='preT1-1' data-text='Sebelum'></label>
<label for='preT1-2' data-text='Sesudah'></label>
</div>
<pre class='preC1-1'><code>kode tab pertama</code></pre>
<pre class='preC1-2'><code>kode tab kedua</code></pre>
</div>Syntax Highlighting (class language-xxx)
Aktifkan syntax highlighting spesifik dengan nambahin class language-xml,
language-js, language-css, dsb ke tag <code>.
Library Prism.js atau highlight.js tema HHC yang ngurusin pewarnaannya.
<Variable name="analytics.accountNumber"
description="Google Analytics GA-4 Tracking Code"
type="string"
default=""
value="G-XXXXXXXXXX"/>// Contoh JS dengan syntax highlighting
const config = {
api: 'https://api.example.com',
timeout: 5000
};
fetch(config.api)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('Error:', err));/* Contoh CSS dengan syntax highlighting */
.card {
background: var(--bg2);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.card:hover { transform: translateY(-4px); }<pre><code class='language-xml'>kode XML / HTML kamu di sini</code></pre>
<pre><code class='language-js'>kode JavaScript kamu</code></pre>
<pre><code class='language-css'>kode CSS kamu</code></pre>Mark Kosong (Placeholder Tanpa Nilai Default)
Tag <mark> kosong dengan data-before — ini buat nandain bagian kode
yang wajib diisi user tapi belum ada nilai defaultnya.
Tooltip dari data-before kasih petunjuk apa yang harus diisi di situ.
// Tambahkan kode berikut ke dalam file gtag.js kamu:
gtag('config', '');
// Atau untuk custom event:
gtag('event', 'page_view', {
page_title: '',
page_location: ''
});<!-- Mark kosong — user harus isi sendiri -->
<mark data-before='Isi Measurement ID di sini'></mark>Unordered List Dengan Class Steps (ul.steps)
Versi <ul> dari steps — untuk langkah-langkah yang urutannya gak kaku atau
checklist yang bisa dikerjain dalam urutan bebas. Dapat styling yang sama keren-nya
kayak ol.steps, tapi pakai bullet bukan nomor.
- Pastikan browser kamu sudah update ke versi terbaru.
- Bersihkan cache dan cookies browser — tekan Ctrl + Shift + Del.
- Nonaktifkan sementara ad blocker atau extension yang mungkin konflik.
- Coba buka halaman di tab incognito / private mode.
- Kalau masih error juga, screenshot error-nya dan hubungi support.
<ul class='steps'>
<li>Langkah pertama.</li>
<li>Langkah kedua dengan <b>teks tebal</b>.</li>
<li>Langkah ketiga.</li>
</ul>Alert Box Warning
Versi kuning/oranye dari alert box — untuk peringatan yang serius tapi gak seseram kotak merah.
Pake class alert warning outline. Cocok buat "hati-hati sebelum lanjut" tapi bukan "doom".
<div class='alert warning outline'><b>Warning!</b>
Teks peringatan kamu di sini. Bisa pakai <u>teks bergaris bawah</u> untuk penekanan.
</div>Mark Dengan Class Warna (Highlight Berwarna)
Variasi mark dengan warna berbeda. Ada ungu (purple), merah (block red),
dan block biasa. Pakai data-before buat kasih label keterangan yang muncul sebagai tooltip/badge.
const config = {
theme: 'dark',
lang: 'id',
timeout: 30000,
debug: false
};<!-- Warna ungu -->
<mark class='purple' data-before='Label keterangan'>nilai yang di-highlight</mark>
<!-- Warna merah / block merah -->
<mark class='block red' data-before='Label keterangan'>nilai yang di-highlight</mark>
<!-- Mark block biasa (tanpa warna) -->
<mark class='block' data-before='Label keterangan'>nilai yang di-highlight</mark>
<!-- Mark default (tanpa class, kuning) -->
<mark data-before='Label keterangan'>nilai yang di-highlight</mark>Multi-Tabs Dengan Name Berbeda (Banyak Grup Tab di Satu Halaman)
Kalau ada lebih dari satu grup tab di satu halaman, wajib kasih
name attribute yang berbeda di tiap grup. Kalau sama, satu tab diklik
bisa ngaruh ke grup lain — bug memalukan yang bikin pembaca bingung!
// Fungsi buat bikin slug dari judul artikel
function makeSlug(title) {
return title
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim();
}// Contoh output:
makeSlug('Cara Install Tema HHC di Blogger!')
// → "cara-install-tema-hhc-di-blogger"
makeSlug('10 Tips SEO untuk Blog 2026')
// → "10-tips-seo-untuk-blog-2026"<!-- Kunci utama: name attribute harus UNIK setiap grup tab! -->
<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 tab pertama</code></pre>
<pre class='preC2-2'><code>kode tab kedua</code></pre>
</div>Heading H4 Dengan data-before (Prefix Penomoran)
Sama kayak H2 dengan data-before, tapi versi H4.
Cocok buat sub-sub bagian yang butuh penomoran — seperti checklist bersyarat
atau langkah yang punya beberapa varian.
Verifikasi Domain via DNS TXT Record
Login ke dashboard DNS provider kamu, tambahkan TXT record dengan nilai yang diberikan Google.
Verifikasi Domain via Upload File HTML
Download file HTML dari Google Search Console, upload ke root folder website kamu.
Verifikasi via Google Analytics
Kalau kamu sudah pasang Google Analytics, ini cara paling cepat — tinggal klik konfirmasi.
<h4 data-before='1. '>Judul Sub-Sub Bagian Pertama</h4>
<h4 data-before='2. '>Judul Sub-Sub Bagian Kedua</h4>
<h4 data-before='3. '>Judul Sub-Sub Bagian Ketiga</h4>Accordion / Collapsible (FAQ Style)
Kumpulan pertanyaan-jawaban yang bisa di-expand/collapse satu per satu.
Grup accordion dibungkus div.showH, tiap item pakai details.ac.
Pure CSS + HTML native <details>, no JavaScript needed!
Apakah tema HHC kompatibel dengan semua browser?
Ya! Tema HHC ditest di Chrome, Firefox, Safari, dan Edge versi terbaru. Untuk browser lama (IE11 ke bawah), tampilan mungkin sedikit berbeda tapi tetap bisa digunakan.
Berapa lama masa support tema ini?
Tema HHC mendapat update aktif selama minimal 2 tahun sejak tanggal pembelian. Bug fix kritis akan tetap dipatch bahkan setelah masa support berakhir.
Bisakah saya menggunakan tema ini di lebih dari satu blog?
Tergantung lisensi yang kamu beli. Lisensi Personal hanya untuk 1 blog. Lisensi Developer bisa untuk unlimited blog milik sendiri.
<div class='showH'>
<details class='ac'>
<summary>Pertanyaan pertama?</summary>
<div>
<p>Jawaban pertama di sini.</p>
</div>
</details>
<details class='ac'>
<summary>Pertanyaan kedua?</summary>
<div>
<p>Jawaban kedua di sini.</p>
</div>
</details>
</div>Komentar HTML Berlabel (Penanda Bagian Kode)
Versi fancy dari komentar HTML biasa. Format <!--[ Nama Bagian ]-->
buat nandain bagian-bagian besar dalam kode template. Lebih mudah dicari waktu edit HTML di Blogger
karena formatnya konsisten dan eye-catching!
Demo #51
Komentar HTML tidak tampil di halaman. Tapi kalau kamu lihat source code halaman ini (Ctrl+U), kamu bisa lihat contoh komentar berlabel di bawah ini!
<!--[ Nama Bagian / Komponen ]-->
<!-- Contoh penggunaan di template Blogger: -->
<!--[ Header Navigation ]-->
<nav>...</nav>
<!--[ Hero Section ]-->
<section class='hero'>...</section>
<!--[ Footer ]-->
<footer>...</footer>Include Tag Blogger (Memanggil Komponen SVG dari Tema)
Tag khusus template XML Blogger buat memanggil komponen SVG icon yang udah didefinisikan di tema. Hanya berfungsi di Edit HTML Blogger — kalau ditaruh di konten post biasa, dia cuma jadi teks doang.
Catatan #52
Tag <b:include> ini adalah sintaks Blogger XML, bukan HTML biasa. Hanya bisa dipakai di Edit HTML template, bukan di editor konten artikel.
<!-- Panggil icon SVG yang udah ada di tema -->
<b:include name='svg.nama-icon'/>
<!-- Contoh icon-icon yang tersedia -->
<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.share'/>Paragraf Dengan Class Khusus (pIndent & dropCap)
Dua class spesial buat bikin tulisan lebih estetik ala majalah atau buku.
pIndent ngasih indent di baris pertama,
dropCap bikin huruf pertama jadi gede banget kayak di majalah National Geographic!
Blogger adalah platform blogging milik Google yang sudah ada sejak tahun 1999. Meski terlihat sederhana, dengan tema yang tepat dan kustomisasi yang baik, blog Blogger bisa tampil sangat profesional dan kompetitif dengan platform modern lainnya.
Tema HHC dirancang dari ground-up dengan mempertimbangkan performa, estetika, dan kemudahan kustomisasi. Setiap komponen dioptimasi untuk loading yang cepat sambil tetap mempertahankan tampilan yang memukau di semua ukuran layar.
<!-- Text Indent — indent di baris pertama seperti buku -->
<p class='pIndent'>Paragraf dengan indent di baris pertama.</p>
<!-- Drop Cap — huruf pertama jumbo seperti majalah -->
<p><span class='dropCap'>H</span>uruf pertama jadi besar dan menonjol.</p>Gambar Standar Dengan Class Full
Gambar biasa yang melebar full width konten. Class full nge-force gambar
nutupin seluruh lebar container. Loading lazy buat performa — gambar
cuma dimuat saat hampir masuk viewport.
<img class='full' alt='deskripsi gambar' width='1280' height='720' src='URL-GAMBAR' loading='lazy'/>Gambar Dengan Caption — Versi Table (Pola Asli Blogger)
Cara lama yang masih valid! Blogger sendiri pakai pola tabel ini waktu kamu insert gambar dengan caption di editor. Cocok kalau mau kompatibel 100% dengan styling bawaan Blogger.
|
|
| Pemandangan indah yang bikin pengen liburan | Han Haoyu Platform |
<table class='tr-caption-container'>
<tbody>
<tr>
<td><img alt='deskripsi gambar' src='URL-GAMBAR'/></td>
</tr>
<tr>
<td class='tr-caption'>Caption gambar di sini.</td>
</tr>
</tbody>
</table>Gambar Dengan Lightbox Dinonaktifkan (data-lightbox=false)
Kalau tema HHC punya fitur lightbox otomatis tapi kamu gak mau gambar tertentu punya lightbox,
tambahkan attribute data-lightbox='false'. Gunanya buat gambar-gambar dekoratif
yang gak perlu diperbesar.
Gambar di atas tidak akan membuka lightbox kalau diklik (di blog dengan tema HHC aktif).
<img alt='deskripsi gambar' src='URL-GAMBAR' data-lightbox='false'/>Grid Gambar (Banyak Gambar dalam Grid Otomatis)
Taruh banyak gambar dalam satu grid yang otomatis menyesuaikan kolom.
Class psImg grImg ngurusin layout grid-nya.
Cocok buat galeri foto, portofolio, atau screenshot step-by-step.
<div class='psImg grImg'>
<img alt='gambar 1' src='URL-GAMBAR-1'/>
<img alt='gambar 2' src='URL-GAMBAR-2'/>
<img alt='gambar 3' src='URL-GAMBAR-3'/>
<img alt='gambar 4' src='URL-GAMBAR-4'/>
</div>Gambar Dengan Show All / Hide (Collapse Gambar)
Tampilkan beberapa gambar dulu, sisanya sembunyikan. Klik "Show All" buat tampilkan semuanya. Pure CSS pakai checkbox hidden — tanpa JavaScript! Cocok buat galeri panjang yang gak mau bikin halaman jadi berat di awal load.
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
<img alt='gambar 1' src='URL-GAMBAR-1'/>
<img alt='gambar 2' src='URL-GAMBAR-2'/>
<img alt='gambar 3' src='URL-GAMBAR-3'/>
<div class='btImg'>
<img alt='gambar 4' src='URL-GAMBAR-4'/>
<label for='hideImg1' aria-label='Show all images'>Show All</label>
</div>
<div class='psImg shImg'>
<img alt='gambar 5' src='URL-GAMBAR-5'/>
<img alt='gambar 6' src='URL-GAMBAR-6'/>
</div>
</div>Scroll Gallery Style 1 (Horizontal Scroll Semua Device)
Galeri gambar yang bisa di-scroll horizontal di semua device — desktop maupun mobile.
Class glImg ngatur layout scroll-nya.
Cocok buat screenshot wide, timeline, atau gambar perbandingan side-by-side.
<div class='glImg'>
<img alt='gambar 1' src='URL-GAMBAR-1'/>
<img alt='gambar 2' src='URL-GAMBAR-2'/>
<img alt='gambar 3' src='URL-GAMBAR-3'/>
</div>Scroll Gallery Style 2 (Scroll Hanya di Mobile)
Di desktop tampil sebagai grid biasa, tapi di mobile bisa di-scroll horizontal.
Class psImg scImg scrlH ngurusin responsive behavior-nya.
Best of both worlds!
<div class='psImg scImg scrlH'>
<img alt='gambar 1' src='URL-GAMBAR-1'/>
<img alt='gambar 2' src='URL-GAMBAR-2'/>
<img alt='gambar 3' src='URL-GAMBAR-3'/>
</div>Lazyload Image (Muat Gambar Hanya Saat Discroll)
Gambar yang gak langsung dimuat saat halaman buka — cuma dimuat saat user scroll mendekatinya.
Teknik ini drastis bikin halaman lebih cepat! Pakai class lazyload,
URL gambar di data-src, dan placeholder base64 transparan di src.
Cara Kerja #61
Browser pertama kali load placeholder 1x1 pixel transparan (43 bytes). Ketika gambar mendekati viewport, library lazysizes swap src-nya ke URL asli. Bandwidth hemat, halaman ngebut!
<img class='lazyload' alt='deskripsi gambar' data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>Link Eksternal — Semua Varian Style
Tiga varian style untuk link eksternal: default, alt, dan secondary.
Semua tetap pakai rel="nofollow noreferrer noopener" dan target="_blank"
yang sudah jadi standar keamanan web modern.
Link default: Blogger.com — tampilan standar.
Link alt: Google Fonts — style alternatif.
Link sec: Google Developers — style secondary.
<!-- Default -->
<a class='extL' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link</a>
<!-- Alt style -->
<a class='extL alt' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link Alt</a>
<!-- Secondary style -->
<a class='extL sec' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link Sec</a>Button — Semua Varian
Semua varian tombol: default (solid), outline (ln), dengan icon download,
dan dengan icon demo. Mix and match sesuai kebutuhan — semua compatible satu sama lain!
Tombol Default Tombol Outline Download Demo
<!-- Button default -->
<a class='button' href='#'>Teks Tombol</a>
<!-- Button outlined -->
<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>Download Box Sederhana (dlBox)
Versi minimalis dari kotak download. Tampilkan ikon ekstensi file, nama, ukuran,
dan tombol download. Lebih compact dari hhc-download-box —
cocok buat daftar file atau lampiran yang panjang.
<div class='dlBox'>
<span class='fT' data-text='zip'></span>
<div class='fN'>
<span>nama-file.zip</span>
<span class='fS'>200KB</span>
</div>
<a class='button' aria-label='Download' href='#' rel='nofollow noreferrer noopener' target='_blank'>
<i class='icon dl'></i>
</a>
</div>Blockquote — Semua Varian Style
Kutipan dengan berbagai style. Default, style 1 (s1), dan style 2 (s2).
Tambahkan <span> di bawah <p> buat nama penulis/sumber kutipan.
Pilih style sesuai estetika artikel kamu!
The best way to predict the future is to invent it. Masa depan terbaik adalah yang kamu ciptakan sendiri, bukan yang kamu tunggu-tunggu.
Alan Kay, ilmuwan komputer legendaris
Kode yang bagus bukan soal seberapa pintar kamu, tapi seberapa mudah orang lain (dan diri kamu 6 bulan kemudian) bisa memahami dan memodifikasinya.
Prinsip Clean Code
Jangan optimasi sebelum waktunya. Dulu bikin jalan dulu, baru bikin cepat. Lebih baik kode lambat yang benar daripada kode cepat yang salah!
Donald Knuth (di-parafrase)
<!-- Standard -->
<blockquote>
<p>Teks kutipan di sini.</p>
<span>Nama Penulis</span>
</blockquote>
<!-- Style 1 -->
<blockquote class='s1'>
<p>Teks kutipan style 1.</p>
<span>Nama Penulis</span>
</blockquote>
<!-- Style 2 -->
<blockquote class='s2'>
<p>Teks kutipan style 2.</p>
<span>Nama Penulis</span>
</blockquote>Alert — Semua Varian Lengkap
Semua 10 varian alert box! Ada solid dan outline untuk tiap jenisnya: default, info, warning, success, dan error. Pilih sesuai konteks pesan yang mau kamu sampaikan!
<div class='alert'>Default</div>
<div class='alert outline'>Outline</div>
<div class='alert info'>Info</div>
<div class='alert warning'>Warning</div>
<div class='alert success'>Success</div>
<div class='alert error'>Error</div>
<div class='alert info outline'>Info Outline</div>
<div class='alert warning outline'>Warning Outline</div>
<div class='alert success outline'>Success Outline</div>
<div class='alert error outline'>Error Outline</div>Tabel Dengan Class Hovered (Highlight Baris Saat Hover)
Tabel dengan efek highlight baris saat mouse hover. Kombinasi sticky bordered stripped hovered
ngasih semua fitur sekaligus — header sticky, border bersih, warna selang-seling, dan efek hover.
Tabel UX yang gak bisa ditolak!
| Nama Komponen | Versi | Status |
|---|---|---|
| HHC Download Box | 3.0 | ✅ Stable |
| HHC Table of Contents | 2.5 | ✅ Stable |
| HHC Accordion | 2.0 | ✅ Stable |
| HHC Tab Switcher | 1.8 | ⚠️ Beta |
| HHC Lightbox | 1.5 | 🔧 Dev |
<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>
</tbody>
</table>
</div>Blok Kode Dengan data-comment (Label Bahasa di Pojok)
Kombinasi data-comment (label kecil di pojok kanan atas) dan
data-source (nama file di atas) dalam satu blok kode.
Bikin dokumentasi kode kamu keliatan makin pro!
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<title>Blog Han Haoyu</title>
</head>
<body>
<!-- Konten blog di sini -->
</body>
</html><pre data-comment='.html' data-source='src/index.html'><code>kode kamu di sini</code></pre>KBD Tag (Tampilan Input Keyboard)
Tag <kbd> buat nampilin tombol keyboard dengan styling yang beneran keliatan kayak tombol fisik.
Bikin tutorial jadi way more clear — pembaca langsung tau tombol mana yang harus ditekan!
Untuk save: tekan Ctrl + S (Windows) atau ⌘ + S (Mac).
Untuk copy-paste: Ctrl + C lalu Ctrl + V.
Buka DevTools: F12 atau Ctrl + Shift + I.
Hard refresh: Ctrl + Shift + R — semua cache kebersihan!
<kbd>Ctrl</kbd> + <kbd>S</kbd>
<kbd>⌘ + A</kbd>
<kbd>F12</kbd>Mark Dengan data-after (Label Muncul Setelah Nilai)
Kebalikan dari data-before — label keterangannya muncul setelah nilai.
Berguna buat nampilin satuan, unit, atau konteks yang logisnya ada di belakang nilai.
// Konfigurasi server performa tinggi
const serverConfig = {
maxConnections: 1000,
requestTimeout: 5000,
cacheSize: 256,
apiVersion: 2
};<!-- Label setelah nilai -->
<mark class='block red' data-after='Pesan setelah'>nilai</mark>
<mark data-after='$'>nilai</mark>Spoiler (Collapsible Tunggal, Berbeda dari Accordion)
Satu kotak yang bisa di-expand buat nyembunyiin konten panjang — spoiler, terms and conditions,
kode panjang, dsb. Berbeda dari accordion (ac), spoiler (sp)
berdiri sendiri tanpa perlu wrapper grup.
Spoiler Alert: Ending Film Avengers Infinity War
Kamu udah yakin mau baca ini? Oke, jangan nyalahin aku ya...
Di akhir film, Thanos berhasil mengumpulkan semua 6 Infinity Stone dan melakukan "snap" yang menghapus setengah populasi alam semesta. Banyak hero favorit kamu yang ikut menghilang, termasuk Spider-Man yang sempat bilang "I don't feel so good, Mr. Stark..."
Adegan itu beneran bikin nangis satu bioskop!
<details class='sp'>
<summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
<div>
<p>Konten tersembunyi di sini.</p>
</div>
</details>Accordion Alternatif (Class alt — Style Berbeda)
Varian accordion dengan styling berbeda — biasanya lebih minimal atau punya aksen warna yang beda. Cocok dicampur dengan accordion default untuk variasi visual di satu halaman.
💡 Tips Optimasi Kecepatan Blog Blogger
Beberapa tips yang bisa langsung kamu terapkan: compress gambar sebelum upload, aktifkan lazy loading, gunakan CDN untuk asset statis, dan minify CSS/JS di template. Kombinasi ini bisa naiki PageSpeed Score kamu 20-30 poin!
🔍 Cara Optimasi SEO untuk Post Blogger
Fokus pada: judul yang mengandung keyword utama, meta description 150-160 karakter, URL slug yang bersih, heading hierarchy yang benar (H1 → H2 → H3), dan internal linking ke artikel relevan lainnya di blog kamu.
<details class='ac alt'>
<summary>Judul Accordion Alt</summary>
<div>
<p>Isi konten accordion alternatif.</p>
</div>
</details>Accordion FAQ Dengan Schema Microdata (SEO Rich Result)
Versi SEO-power accordion! Dengan menambahkan microdata schema.org FAQPage,
Google bisa nampilin jawaban FAQ kamu langsung di halaman pencarian sebagai rich snippet.
Visibility blog kamu bisa naik drastis tanpa tambah konten!
Apakah tema HHC gratis atau berbayar?
Tema HHC tersedia dalam dua versi: versi Free dengan fitur dasar dan versi Premium dengan semua fitur lengkap termasuk download box, multi-tab code block, dan support prioritas.
Bagaimana cara install tema HHC di Blogger?
Download file .xml tema, login ke Blogger, buka menu Theme, klik panah di sebelah tombol Customize, pilih "Restore", lalu upload file .xml yang sudah didownload. Proses install kurang dari 2 menit!
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
<details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
<summary itemprop='name'>Pertanyaan FAQ di sini?</summary>
<div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<p itemprop='text'>Jawaban FAQ di sini.</p>
</div>
</details>
</div>Manual Related Posts (Artikel Terkait Manual)
Buat daftar artikel terkait secara manual — berguna kalau artikel terkait otomatis
kurang relevan atau kamu mau kontrol persis artikel apa yang direkomendasikan.
Class pRelate ngasih styling yang konsisten.
<div class='pRelate'>
<b>Kamu mungkin ingin baca ini:</b>
<ul>
<li><a href='/link-post-1'>Judul Post 1</a></li>
<li><a href='/link-post-2'>Judul Post 2</a></li>
<li><a href='/link-post-3'>Judul Post 3</a></li>
</ul>
</div>Lazy YouTube (Embed Tanpa Load iframe Duluan)
Embed video YouTube tanpa langsung load iframe-nya. Yang ditampilkan pertama hanya thumbnail + tombol play. Iframe baru dimuat saat user klik — ini bisa hemat bandwidth load awal halaman sampai 500KB!
Demo #75
Komponen di atas menampilkan thumbnail video YouTube dengan ID dQw4w9WgXcQ. Klik thumbnail untuk memuat video sesungguhnya — iframe YouTube baru dimuat saat diklik!
<!-- Ganti ID_VIDEO_YOUTUBE dengan ID video kamu -->
<!-- Contoh URL: youtube.com/watch?v=dQw4w9WgXcQ → ID-nya: dQw4w9WgXcQ -->
<div class='lazyYt' data-embed='ID_VIDEO_YOUTUBE'></div>Defer YouTube (iframe Dimuat Lazy Pakai Lazysizes)
Alternatif embed YouTube — pakai iframe dengan class lazyload dan URL di data-src.
Lazysizes yang ngurusin kapan iframe dimuat. Beda dari lazy YouTube (#75) yang pakai thumbnail custom.
<div class='videoYt'>
<iframe class='lazyload'
data-src='https://www.youtube.com/embed/ID_VIDEO_YOUTUBE'
title='YouTube video player'
frameborder='0'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
referrerpolicy='strict-origin-when-cross-origin'
allowfullscreen>
</iframe>
</div>Header Subtitle Custom Via CSS (headH::after)
Tambahkan subtitle di bawah judul halaman/post pakai sedikit CSS.
Class headH punya pseudo-element ::after yang bisa
di-override isinya via inline <style> tag di dalam konten post.
Judul Halaman Yang Punya Subtitle
Demo #77
Subtitle di bawah judul di atas diinjeksi via CSS ::after. Di template Blogger, kamu pakai class headH bukan demoHeadH yang custom ini.
<style>
/* Custom Header subtitle — taruh di dalam post */
.headH::after { content: 'Subtitle Kamu Di Sini' }
</style>Tabs Konten (Bukan Tabs Kode — Untuk Konten Berbeda per Tab)
Berbeda dari tabs kode (#42), ini buat konten umum yang berbeda per tab —
bisa teks, gambar, tabel, apapun. Class tabs tanpa class pre.
Struktur HTML-nya sama persis kayak tabs kode, hanya class wrapper-nya yang beda.
Tampilan Desktop
Di desktop, sidebar tampil di sebelah kanan dengan lebar 300px. Artikel menggunakan 70% lebar layar. Semua navigasi dan widget sidebar terlihat jelas.
Tampilan Mobile
Di mobile (layar < 768px), sidebar disembunyikan secara default. Konten artikel menggunakan full-width. Ada hamburger menu di header untuk akses navigasi.
Pengaturan Tema
Kamu bisa ganti warna primer, toggle dark/light mode, atur lebar maksimum container, dan banyak lagi melalui Theme > Customize di dashboard Blogger.
<div class='tabs'>
<input id='tabT1-1' type='radio' name='tabC1' checked>
<input id='tabT1-2' type='radio' name='tabC1'>
<div>
<label for='tabT1-1' data-text='Tab 1'></label>
<label for='tabT1-2' data-text='Tab 2'></label>
</div>
<div class='tabC-1'>
<p>Konten tab pertama di sini.</p>
</div>
<div class='tabC-2'>
<p>Konten tab kedua di sini.</p>
</div>
</div>Gambar Responsive (class responsive)
Gambar dengan class responsive yang otomatis menyesuaikan ukurannya dengan container.
Dikombinasi dengan lazyload buat performa terbaik.
Jarang dipakai tapi penting untuk kasus tertentu!
<img class='lazyload responsive' alt='deskripsi gambar'
data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>Gambar Tanpa Lightbox Via Class noLb
Cara kedua untuk disable lightbox pada gambar (selain data-lightbox="false").
Kalau pakai class noLb, sistem lightbox JS langsung skip gambar ini.
Biasanya digunakan untuk gambar ikon, logo, atau elemen UI dekoratif.
<img class='lazyload noLb' alt='deskripsi gambar'
data-src='URL-GAMBAR'
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>Button Dengan Icon Info
Tombol dengan icon info (ikon "i" bulat) di dalamnya.
Cocok buat tombol yang mengarah ke halaman dokumentasi, detail, atau keterangan tambahan.
Pakai class icon info di dalam elemen <i>.
Lihat Dokumentasi Info Selengkapnya
<a class='button' href='#'><i class='icon info'></i>Teks Tombol</a>Button Full Width
Tombol yang melebar memenuhi seluruh lebar container.
Class full ditambahkan di samping class button.
Cocok untuk CTA utama di akhir artikel — gak bisa diabaikan!
<a class='button full' href='#'>Teks Tombol Full Width</a>Note Info (class note info)
Kotak catatan berwarna biru dengan nuansa informasi.
Beda dari note biasa (netral) dan note wr (merah/warning).
Ini versi "info penting tapi santai" — gak menakutkan tapi tetap mencuri perhatian.
Info Terbaru
Mulai tanggal 1 Maret 2026, template Blogger versi lama tidak lagi mendapat update. Pastikan kamu sudah migrasi ke tema HHC v3 atau yang lebih baru untuk mendapat semua fitur terkini.
<p class='note info'><b>Info Penting</b><br>
Harap diperhatikan konten ini.
</p>Note Success (class note success)
Kotak catatan berwarna hijau — buat kasih konfirmasi positif, ngasih tahu kalau sesuatu berhasil atau kondisi sudah terpenuhi. Bikin pembaca merasa aman dan percaya diri lanjut ke langkah berikutnya!
Konfigurasi Sudah Benar! ✅
Semua file berhasil diupload dan theme sudah aktif. Blog kamu sekarang menggunakan tema HHC v3.0 dan siap diakses publik dengan semua fitur aktif.
<p class='note success'><b>Berhasil</b><br>
Operasi selesai dengan baik.
</p>Split Post / Pagination Dalam Post (Halaman Berganda)
Buat artikel panjang yang dipecah jadi beberapa halaman.
Tag <!--nextpage--> jadi pemisah antara halaman-halaman tersebut.
Blogger otomatis generate navigasi antar halaman di bawah konten.
Demo #85
Split post hanya berfungsi di sistem Blogger, bukan di HTML standar. Komentar <!--nextpage--> diproses oleh Blogger backend sebelum render ke browser.
<div id='postSplit'>
<!-- Konten Halaman 1 -->
<h3>Bagian Pertama</h3>
<p>Isi halaman pertama artikel kamu di sini.</p>
<!--nextpage-->
<!-- Konten Halaman 2 -->
<h3>Bagian Kedua</h3>
<p>Isi halaman kedua artikel kamu di sini.</p>
<!--nextpage-->
<!-- Konten Halaman 3 -->
<h3>Bagian Ketiga</h3>
<p>Isi halaman ketiga dan terakhir.</p>
</div>Navigasi Blog Dengan Pagination Bernomor
Tombol navigasi bernomor untuk halaman blog.
Class blogN numP ngasih styling khusus untuk paginasi bergaya angka.
nPst dipakai buat elemen yang gak bisa diklik (label atau halaman current).
<div class='blogN numP'>
<div class='nPst' data-text='Page 1 of 3:'></div>
<a href='?page=1' data-text='1'></a>
<a href='?page=2' data-text='2'></a>
<a href='?page=3' data-text='3'></a>
</div>Link Previous dan Next Navigasi
Tombol navigasi sebelum/sesudah untuk paginasi sederhana dua arah.
Class nwLnk untuk "newer" (lebih baru) dan olLnk untuk "older" (lebih lama).
Tambah class nPst kalau halaman sebelum/sesudah tidak ada (disabled state).
Versi disabled (halaman pertama/terakhir):
<!-- Aktif -->
<a class='nwLnk' href='?page=1' rel='nofollow noreferrer noopener' aria-label='Previous'>Previous</a>
<a class='olLnk' href='?page=3' rel='nofollow noreferrer noopener' aria-label='Next'>Next</a>
<!-- Disabled (tidak ada halaman sebelum/sesudah) -->
<div class='nwLnk nPst'>Prev</div>
<div class='olLnk nPst'>Next</div>Span Inline-Block (Wrapper Ikon Kecil di Dalam Teks)
Bungkus SVG icon dengan <span> ber-style inline-block
supaya icon bisa duduk sejajar dengan teks. Tanpa ini, icon SVG bisa bikin layout
berantakan atau loncat-loncat aneh.
Klik ikon edit untuk mulai mengedit artikel. Perubahan langsung tersimpan otomatis.
<span style='display:inline-block;vertical-align:top'>
<svg viewBox='0 0 48 48' style='fill:currentColor;width:18px;height:18px;'>
<path d='M6 34.5V42h7.5l22.13-22.13-7.5-7.5L6 34.5zm35.41-20.41...'></path>
</svg>
</span>Span Inline-Flex (Ikon + Teks Sejajar Vertikal)
Lebih canggih dari inline-block — pakai flexbox buat nyejajarin ikon dan teks secara presisi.
align-items: baseline bikin teks tetap sejajar baseline,
sedangkan SVG-nya pakai align-self: center buat ditengahin.
Status: Online — Semua sistem berjalan normal
<span style='display:inline-flex;align-items:baseline'>
<svg viewBox='0 0 48 48' style='align-self:center;fill:currentColor;'>
<path d='...'></path>
</svg>
<b style='text-indent:4px'>Label Teks</b>
</span>Lightbox Image Wrapper (class lbImg)
Bungkus gambar dengan div.lbImg buat memastikan gambar masuk ke sistem lightbox.
Berguna kalau tema secara default tidak auto-lightbox semua gambar,
atau kalau kamu mau grup gambar tertentu jadi satu session lightbox.
Klik gambar di atas untuk membuka lightbox (di blog dengan tema HHC aktif).
<div class='lbImg'>
<img src='URL-GAMBAR' alt='deskripsi gambar'/>
</div>Zoom Image Container (class zmImg)
Container gambar dengan efek zoom saat hover. Berbeda dari lightbox — ini efek CSS zoom di tempat, bukan buka modal. Cocok buat gambar produk, portfolio, atau thumbnail yang mau dikasih sedikit "wow factor".
<div class='zmImg'>
<img src='URL-GAMBAR' alt='deskripsi gambar'/>
</div>Div Dengan ID Custom (Target Anchor / Jump Link)
Bikin "titik sasaran" di halaman yang bisa dituju lewat link anchor #namaSection.
Berguna banget buat daftar isi otomatis, tombol "Back to top", atau link referensi dari artikel lain.
📍 Kamu berhasil jump ke sini! Ini adalah section dengan ID demoSection92. Link di atas mengarah ke sini dengan format href='#demoSection92'.
<!-- Tombol/link yang akan jump ke section -->
<a href='#namaSection'>Pergi ke Bagian Ini</a>
<!-- Target section yang akan dituju -->
<div id='namaSection'>Konten bagian ini.</div>Google Analytics Variable (Untuk Blogger XML Template)
Variable tag khusus template XML Blogger buat nyimpan Tracking ID Google Analytics GA-4. Setelah ditetapkan di sini, nilai ini bisa dipanggil di manapun dalam template pakai sintaks Blogger template.
Catatan #93
Tag <Variable> ini adalah sintaks Blogger XML, hanya valid di Edit HTML template. Di halaman artikel biasa, tag ini tidak berfungsi.
<!-- Taruh di dalam tag <b:skin> atau area Variable definition di template XML -->
<Variable name="analytics.accountNumber"
description="Google Analytics GA-4 Tracking Code"
type="string"
default=""
value="G-XXXXXXXXXX"/>
<!-- Cara panggilnya di template: -->
<!-- data.vars['analytics.accountNumber'] -->Related Posts Dengan data-label dan max-posts
Versi lebih customizable dari related posts (#24).
Tambahkan data-label untuk filter artikel berdasarkan label tertentu,
dan data-max-posts untuk batasi jumlah artikel yang tampil.
Artikel Terkait — Kategori Tutorial
<!--
data-label → filter berdasarkan label Blogger tertentu
data-max-posts → batasi jumlah artikel yang tampil (default: semua)
-->
<details class='sp arp' open>
<summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
<div class='aRel' data-label='Nama Label' data-max-posts='6'></div>
</details>Table Modifier Class — Semua Kombinasi
Kamus lengkap class modifier untuk tabel!
Tinggal pilih kombinasi yang kamu butuhin dan tambahin ke class wrapper div.table.
Bisa dikombinasikan sesuka hati — seperti LEGO tapi versi CSS class!
Header berwarna primary:
| Nama | Fungsi |
|---|---|
cborder | Border pada container tabel |
noborder | Hapus border konten tabel |
primary | Header biru/primary |
clr | Header colorful accent |
Header berwarna success:
| Class | Efek |
|---|---|
mh200 | Max-height 200px |
mh300 | Max-height 300px |
mhvh | Max-height 50vh |
<!-- cborder: border pada container -->
<div class='table cborder'>...</div>
<!-- noborder: hapus border isi tabel -->
<div class='table noborder'>...</div>
<!-- Header berwarna: clr / primary / warning / success / error -->
<div class='table bordered primary'>...</div>
<div class='table bordered success'>...</div>
<div class='table bordered error'>...</div>
<!-- Max-height tabel -->
<div class='table bordered mh200'>...</div>
<div class='table bordered mhvh'>...</div>
<!-- Padding konten -->
<div class='table bordered sp5'>...</div>
<div class='table bordered sp10'>...</div>
<div class='table bordered sp20'>...</div>Video Embed Langsung (Tag video Native HTML — Bukan YouTube)
Embed video langsung pakai tag HTML5 <video> — bukan YouTube atau platform lain.
Cocok buat video yang di-host sendiri atau di CDN.
Attribute controls munculkan kontrol player, playsinline buat mobile.
Video Demo #96
Video di atas adalah sample video bebas royalti dari W3Schools. Ganti URL-nya dengan video kamu yang di-host sendiri.
<video src="URL-VIDEO.mp4" controls playsinline style="width:100%;height:350px;border-radius:12px"></video>
<!-- Dengan multiple format untuk kompatibilitas maksimal -->
<video controls playsinline style="width:100%;border-radius:12px">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Browser kamu tidak mendukung tag video.
</video>Section Tag Dengan ID (Semantic HTML untuk Artikel Panjang)
Pakai tag semantik <section> buat membagi artikel panjang ke blok-blok bermakna.
Dikombinasi dengan id, bisa difungsikan sebagai jump link anchor sekaligus
membuat struktur dokumen yang lebih baik secara aksesibilitas dan SEO.
Persiapan Sebelum Install
Sebelum mulai, pastikan kamu sudah punya akun Google/Gmail yang aktif dan akses ke dashboard Blogger. Backup tema lama kamu dulu ya buat jaga-jaga!
Proses Instalasi
Download file tema, masuk ke Edit HTML, hapus semua kode lama, paste kode tema baru, lalu save. Proses ini butuh waktu sekitar 5 menit.
<section id="nama-section">
<h2>Judul Section</h2>
<p>Konten di sini.</p>
</section>Underline Tag <u> (Bukan Class, Elemen HTML Langsung)
Tag HTML langsung buat garisbawahi teks. Berbeda dari class CSS,
tag <u> adalah elemen HTML semantik yang punya makna bawaan.
Menurut HTML5, dipakai untuk nama properti, kata dari bahasa lain, atau anotasi teks.
Dalam bahasa pemrograman, istilah variable mengacu pada lokasi memori yang menyimpan nilai. Function adalah blok kode yang bisa dipanggil berulang kali. Sedangkan class adalah blueprint untuk membuat object.
<!-- Gunakan untuk anotasi, nama ilmiah, atau terminologi khusus -->
<p>Istilah <u>machine learning</u> sering salah dipahami.</p>
<!-- Bisa juga di dalam heading -->
<h2>Siapa Saja <u>Dosen Pemberi Rekomendasi</u>?</h2>Figure + Figcaption Dengan Lightbox Aktif
Gambar dengan caption yang juga punya lightbox aktif (tanpa attribute data-lightbox="false").
Ini versi "default" dari figure — klik gambar buka lightbox,
dan caption tetap tampil di bawah thumbnail.
<figure>
<img alt='deskripsi gambar' src='URL-GAMBAR'/>
<figcaption>Caption gambar yang mendukung lightbox otomatis.</figcaption>
</figure>Tabel Dengan class tbl (Versi Sederhana)
Tabel paling sederhana — wrapper div.table dan tabel dengan class tbl langsung.
Tanpa modifier tambahan, ini tampilan tabel yang paling basic.
Tambah class modifier sesuai kebutuhan!
| No. | Fitur | Tersedia |
|---|---|---|
| 1 | Download Box | ✅ Ya |
| 2 | Table of Contents | ✅ Ya |
| 3 | Dark Mode | ✅ Ya |
<div class='table'>
<table class='tbl'>
<thead>
<tr><th>Kolom 1</th><th>Kolom 2</th></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>
</div>Tabs Dengan Class Stick (Judul Tab Sticky Saat Scroll)
Tabs dengan header yang "nempel" di atas viewport saat user scroll ke bawah konten tab. Super useful buat konten tab yang panjang — user gak perlu scroll balik ke atas buat pindah tab!
Ini konten tab Panduan. Di sini biasanya ada tutorial step-by-step. Tab ini bisa panjang banget, dan header tabs-nya bakal tetap sticky di atas saat kamu scroll ke bawah konten ini!
Ini konten tab Konfigurasi. Biasanya berisi tabel parameter, option yang bisa diset, atau contoh file config. Lengkap dan detail!
Ini konten tab FAQ. Kumpulan pertanyaan yang sering ditanyain — jadi gak perlu jawab satu-satu di kolom komentar terus!
<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'>
<div>
<label for='tabT-stick-1' data-text='Tab 1'></label>
<label for='tabT-stick-2' data-text='Tab 2'></label>
</div>
<div class='tabC-1'><p>Konten tab 1.</p></div>
<div class='tabC-2'><p>Konten tab 2.</p></div>
</div>Tabs Dengan Lebih Dari 4 Input (Hingga 9 Tab dalam Satu Grup)
Kalau konten kamu butuh lebih dari 4 tab, bisa sampai 9 tab sekaligus dalam satu grup.
Pattern-nya sama — makin banyak input, makin banyak label dan content div-nya.
Ingat: setiap input butuh id unik dan label yang tepat!
<!DOCTYPE html>
<html>
<head><title>Hello HTML!</title></head>
<body><h1>Hello, World!</h1></body>
</html>body {
background: #0d0f14;
color: #dce3f5;
font-family: sans-serif;
}console.log('Hello, World!');
// Output: Hello, World!<?php
echo "Hello, World!";
?>print("Hello, World!")
# Output: Hello, World!<!-- Bisa sampai 9 tab, pola-nya sama, tinggal tambah -->
<div class='tabs stick'>
<input id='tabTBig-1' type='radio' name='postTabs-big' checked>
<input id='tabTBig-2' type='radio' name='postTabs-big'>
<input id='tabTBig-3' type='radio' name='postTabs-big'>
<!-- ... sampai id tabTBig-9 -->
<div>
<label for='tabTBig-1' data-text='Tab 1'></label>
<label for='tabTBig-2' data-text='Tab 2'></label>
<label for='tabTBig-3' data-text='Tab 3'></label>
</div>
<div class='tabC-1'><p>Konten 1</p></div>
<div class='tabC-2'><p>Konten 2</p></div>
<div class='tabC-3'><p>Konten 3</p></div>
</div>Dua Grup Tabs Berbeda di Satu Halaman (name Unik)
Kalau ada dua atau lebih grup tabs di halaman yang sama,
setiap grup WAJIB punya name yang berbeda di radio input-nya.
Kalau sama, klik tab di satu grup akan nge-reset grup lain — chaos total!
Grup Tabs A (name='grupA103'):
Framework Frontend: React, Vue, Svelte, Angular — pilih sesuai preferensi dan kebutuhan project.
Framework Backend: Node.js/Express, Django, Laravel, Spring Boot — masing-masing punya kekuatan sendiri.
Grup Tabs B (name='grupB103') — Berdiri sendiri, tidak saling mempengaruhi:
Instalasi di Windows: Download installer .exe, jalankan setup wizard, ikuti petunjuk sampai selesai.
Instalasi di Linux/Mac: Buka terminal, jalankan curl -fsSL install.sh | sh, tunggu selesai.
<!-- Grup A — name='postTabs-grupA' -->
<div class='tabs stick'>
<input id='tabT-grupA-1' type='radio' name='postTabs-grupA' checked>
<input id='tabT-grupA-2' type='radio' name='postTabs-grupA'>
<div>
<label for='tabT-grupA-1' data-text='Tab A1'></label>
<label for='tabT-grupA-2' data-text='Tab A2'></label>
</div>
<div class='tabC-1'><p>Konten grup A, tab 1.</p></div>
<div class='tabC-2'><p>Konten grup A, tab 2.</p></div>
</div>
<!-- Grup B — name='postTabs-grupB' (BEDA dari Grup A!) -->
<div class='tabs stick'>
<input id='tabT-grupB-1' type='radio' name='postTabs-grupB' checked>
<input id='tabT-grupB-2' type='radio' name='postTabs-grupB'>
<div>
<label for='tabT-grupB-1' data-text='Tab B1'></label>
<label for='tabT-grupB-2' data-text='Tab B2'></label>
</div>
<div class='tabC-1'><p>Konten grup B, tab 1.</p></div>
<div class='tabC-2'><p>Konten grup B, tab 2.</p></div>
</div>Accordion Dengan Isi ol.steps Di Dalamnya (Nested Steps)
Langkah-langkah yang tersembunyi di dalam accordion. Klik summary untuk expand, dan isinya adalah tutorial step-by-step yang terstruktur. Nested komponen gini bikin halaman lebih bersih tanpa mengorbankan detail!
🔧 Cara Setup Cloudflare Worker dari Nol
- Daftar atau login ke Cloudflare Dashboard.
- Klik menu Workers & Pages di sidebar kiri.
- Klik tombol Create Application lalu pilih Create Worker.
- Beri nama worker kamu dan klik Deploy untuk generate kode Hello World default.
- Klik Edit code untuk mulai nulis logika worker kamu yang sebenarnya.
🌐 Cara Tambahkan Custom Domain ke Worker
- Pastikan domain kamu sudah dikelola di Cloudflare (nameserver sudah diarahkan).
- Buka worker yang ingin dikonfigurasi, pergi ke tab Settings.
- Scroll ke bagian Domains & Routes, klik Add.
- Pilih Custom Domain, masukkan subdomain yang kamu inginkan.
- Klik Add Domain dan tunggu propagasi DNS (biasanya instan di Cloudflare).
<div class='showH'>
<details class='ac'>
<summary>Langkah-langkah proses</summary>
<div>
<ol class='steps'>
<li>Langkah pertama di sini.</li>
<li>Langkah kedua di sini.</li>
<li>Langkah ketiga di sini.</li>
</ol>
</div>
</details>
</div>Accordion Grouped Dengan Mix ac dan ac alt
Campurkan accordion default (ac) dan alternatif (ac alt) dalam satu grup.
Bisa bikin visual yang lebih menarik — misalnya bedain category atau tingkat urgensi
dengan style accordion yang berbeda!
🟢 Fitur yang Sudah Stabil
Download Box, Table of Contents, Accordion, Alert Box, Code Block — semua sudah stable dan siap pakai di production.
🟢 Fitur yang Aktif di Default
Lazy Load Gambar, Dark Mode, Responsive Design, Schema SEO — aktif secara default tanpa konfigurasi tambahan.
🟡 Fitur yang Masih Beta
Multi-tab code block, Lazy YouTube, Custom Download Box v2 — sudah bisa dipakai tapi mungkin ada sedikit bug. Laporkan kalau ada masalah!
🔴 Fitur yang Direncanakan
Comment system custom, Newsletter widget, Portfolio grid v2 — dalam roadmap tapi belum ada ETA. Stay tuned!
<div class='showH'>
<details class='ac'>
<summary>Pertanyaan 1 (style default)</summary>
<div><p>Jawaban 1.</p></div>
</details>
<details class='ac'>
<summary>Pertanyaan 2 (style default)</summary>
<div><p>Jawaban 2.</p></div>
</details>
<details class='ac alt'>
<summary>Pertanyaan 3 (style alt)</summary>
<div><p>Jawaban 3.</p></div>
</details>
</div>Spoiler Dengan data-show dan data-hide Kustom
Teks tombol "Show" dan "Hide" pada spoiler bisa dikustomisasi pakai
data-show dan data-hide.
Bikin UX lebih kontekstual — bukan cuma "Show all" / "Hide all" yang generik!
Checklist Persyaratan Pengajuan Beasiswa
Pastikan kamu sudah menyiapkan semua dokumen berikut sebelum submit aplikasi:
- Fotocopy KTP yang masih berlaku (2 lembar).
- Transkrip nilai semester terakhir yang sudah dilegalisir.
- Surat rekomendasi dari 2 dosen (format PDF, maks 5MB).
- Essay motivasi 500-800 kata dalam bahasa Indonesia.
- Bukti kegiatan ekstrakurikuler atau organisasi (jika ada).
Info:
Semua dokumen harus dikumpulkan sekaligus dalam satu file ZIP. Pengumpulan parsial tidak akan diproses!
<details class='sp'>
<summary data-show='Lihat Persyaratan Lengkap' data-hide='Tutup Persyaratan'>Checklist Persyaratan</summary>
<div>
<ol class='steps'>
<li>Dokumen pertama.</li>
<li>Dokumen kedua.</li>
</ol>
</div>
</details>Paragraf Dengan class pIndent (Indent Gaya Buku/Majalah)
Kalau artikel kamu berupa narasi panjang — cerpen, esai, atau konten editorial —
class pIndent ngasih indentasi baris pertama yang bikin tulisan tampak lebih elegan
dan mudah dibaca, persis kayak buku fisik!
Teknologi berkembang dengan kecepatan yang menakjubkan. Hari ini kita bicara tentang AI yang mampu menulis kode, besok mungkin AI yang mampu mendesain arsitektur sistem sendiri. Dalam situasi seperti ini, yang paling penting bukan sekadar menguasai tools-nya, melainkan memahami fondasi konseptual yang mendasarinya.
Developer yang bertahan bukan yang paling hafal syntax, melainkan yang paling cepat beradaptasi dan paling kuat fondasi logika berpikirnya. Framework boleh berganti setiap tahun, tapi prinsip-prinsip fundamental seperti separation of concerns, DRY, dan SOLID tetap relevan lintas zaman.
<!-- Pakai untuk konten narasi panjang seperti artikel editorial -->
<p class='pIndent'>
Paragraf ini memiliki indentasi di baris pertama, lazim dipakai untuk konten narasi panjang.
</p>Heading H2 Dengan Tag <u> Di Dalamnya (Underline Parsial)
Heading dengan garisbawah pada sebagian kata saja — untuk memberi penekanan visual yang lebih dramatik atau untuk menonjolkan kata kunci utama dalam judul. Teknik ini sering dipakai di konten jurnalistik atau editorial!
Siapa Saja Dosen Pemberi Rekomendasi yang Paling Berpengaruh?
Cara Membuat Blog Profesional dengan Blogger di Tahun 2026
<h2>Siapa Saja <u>Dosen Pemberi Rekomendasi</u>?</h2>Heading H3 Dengan Tag <i> dan Teks Gabungan
Judul H3 yang campuran teks italic dan normal. Biasanya dipakai buat judul yang punya nama karya/buku/istilah di dalamnya — italic untuk nama karya, normal untuk teks deskriptifnya.
Roadmap Hidup Mahasiswa yang Aku Susun Sendiri
Teks pertama di bawah heading ini menjelaskan latar belakang kenapa kamu susun roadmap tersebut.
Review Buku: The Pragmatic Programmer
Ini buku yang wajib dibaca setiap developer, terutama yang baru terjun ke dunia professional.
<h3><i>Roadmap Hidup Mahasiswa</i> yang Aku Susun Sendiri</h3>Anchor Link Read More (Penanda Blogger Klasik)
Versi lama dari anchor "Read More" — tetap valid dan kompatibel di semua versi Blogger.
Ini adalah cara Blogger lama memotong konten di homepage.
Sama fungsinya dengan <!--more--> tapi versi HTML-nya.
Demo #110
Dua cara buat bikin "Read More" di Blogger. Pilih salah satu — jangan keduanya sekaligus dalam satu post!
<!-- Cara 1: anchor tag klasik -->
<a name='more'></a>
<!-- Cara 2: komentar HTML modern (lebih direkomendasikan) -->
<!--more-->
<!-- Cara 3: pakai tombol Read More di toolbar editor Blogger (paling mudah!) -->Inline Style Pada Paragraf (Font Kecil untuk Catatan Kaki)
Teks kecil di bawah tabel, gambar, atau konten lain sebagai catatan kaki.
Pakai inline style font-size:12px dan margin-top:8px
untuk spacing yang pas. Simple tapi penting buat transparansi data!
| Program | Kuota | Deadline |
|---|---|---|
| Beasiswa Reguler | 50 orang | 30 Maret 2026 |
| Beasiswa Prestasi | 20 orang | 15 April 2026 |
*Kuota dan tanggal deadline dapat berubah sewaktu-waktu tanpa pemberitahuan sebelumnya. Selalu cek website resmi untuk informasi terbaru.
<p style='font-size:12px;margin-top:8px'>
*Estimasi tanggal pelaksanaan dapat berubah sewaktu-waktu.
</p>UL Biasa Dengan Mixed Formatting (Bold, Italic, Underline dalam li)
Daftar unordered biasa tapi setiap item punya formatting yang berbeda-beda — bold, italic, underline, semua bisa dicampur dalam satu list item. Pakai emoji sebagai custom bullet point buat tampilan yang lebih menarik!
- ✔ Kontribusi di 15+ project open source dengan total 500+ commit di GitHub.
- ✔ Mendapat beasiswa penuh dari perusahaan tech Fortune 500.
- ✔ Aktif sebagai pembicara di 5 konferensi developer tingkat nasional.
- 🏆 Juara 1 Hackathon Nasional 2025 kategori Best Use of AI.
- 📚 Menulis buku "Modern Web Development dengan Blogger" yang sudah didownload 10.000+ kali.
<ul>
<li>✔ <b>Bantu lebih dari 10 dosen</b> dalam riset dan pengabdian.</li>
<li>✔ <i>PKM lolos pendanaan nasional.</i></li>
<li>✔ Aktif di <u>organisasi kampus dan luar kampus</u>.</li>
</ul>Alert Error Dipakai Sebagai "Informasi!" (Bukan Selalu Error)
Meski namanya "error", class alert error bisa dipakai buat konten yang
butuh perhatian maksimal — bukan selalu berarti ada error.
Warna merah yang mencolok bikin pembaca langsung fokus ke sana!
<div class='alert error'><b>Informasi!</b>
Silakan klik tab di bawah untuk melihat isian apa saja yang perlu dilengkapi.
</div>Note Polos Tanpa Tag <b> (Catatan Ringan Tanpa Judul)
Versi paling simpel dari note box — tanpa judul tebal, hanya teks aja. Cocok buat catatan singkat, reminder kecil, atau info tambahan yang sifatnya opsional dan ringan.
Pastikan kamu menggunakan Node.js versi 18 ke atas. Cek versi dengan perintah node --version di terminal.
Semua contoh kode di halaman ini sudah ditest di Blogger dengan tema HHC v3.0 dan berfungsi dengan baik per Februari 2026.
<!-- Note tanpa judul — langsung teks aja -->
<p class='note'>
Ini adalah catatan tambahan tanpa judul tebal.
</p>Card Class alt (Kartu Konten Alternatif)
Elemen card dengan style alternatif — biasanya untuk highlight konten, ucapan penutup, atau blok teks yang perlu "kotak" tersendiri tapi berbeda dari card biasa. Tampilannya lebih subtle dan elegan.
Terima kasih sudah membaca sampai sini! Kalau dokumentasi ini membantu kamu, jangan lupa share ke teman-teman developer lainnya. Setiap share membantu komunitas Blogger developer Indonesia makin berkembang. 🙏
💡 Pro Tip: Bookmark halaman ini dan jadikan referensi saat membuat konten. Semua 136 komponen di sini terus diupdate seiring perkembangan tema HHC.
<div class='card alt'>
<p>Konten kartu dengan style alternatif di sini. Bisa untuk highlight atau penutup bagian.</p>
</div>Variable Tag Blogger XML — Favicon
Setting URL favicon blog lewat Variable tag di template XML Blogger. Favicon yang baik: PNG 512x512px, sudah dioptimasi ukurannya. Pakai tools seperti Squoosh atau TinyPNG sebelum upload ke CDN!
Info #116
Tag Variable ini hanya valid di Edit HTML template Blogger. Tambahkan di dalam <b:skin>...</b:skin> area atau sesuai lokasi yang ditentukan tema HHC.
<!-- Favicon — PNG 512x512, ditaruh di area Variable definition template -->
<Variable name="meta.icon"
description="Favicon URL"
type="string"
default=""
value="https://cdn.kamu.com/favicon-512x512.png"/>Variable Tag Blogger XML — Meta Keywords
Set meta keywords untuk seluruh blog via Variable tag. Meski Google sudah tidak terlalu memperhatikan meta keywords, beberapa search engine lain masih menggunakannya. Worth it buat dipasang!
<Variable name="meta.keywords"
description="Keywords Meta Tag content"
type="string"
default=""
value="blogger theme, tema blogger, han haoyu, hhc theme, blogger template premium"/>Variable Tag Blogger XML — Meta Default Image
Gambar default yang muncul ketika artikel di-share dan gak punya featured image sendiri. Ukuran yang ideal: 1280x720px (16:9), format JPG/PNG, ukuran file maks 200KB.
<!-- Gambar default OG, minimal 1280px lebar, rasio 16:9 -->
<Variable name="meta.image"
description="Image Meta Tag URL"
type="string"
default=""
value="https://cdn.kamu.com/og-default-1280x720.jpg"/>Variable Tag Blogger XML — OpenGraph Image
Gambar khusus untuk Open Graph (Facebook, LinkedIn, WhatsApp preview). Ukuran ideal OG image: 1200x630px. Bisa beda dengan meta.image standar kalau kamu mau optimasi khusus untuk social share.
<!-- Open Graph image — 1200x630px untuk Facebook dan WhatsApp preview -->
<Variable name="opengraph.image"
description="Open Graph Image URL"
type="string"
default=""
value="https://cdn.kamu.com/og-image-1200x630.jpg"/>Variable Tag Blogger XML — Twitter Card Image
Gambar khusus untuk Twitter/X Card preview. Twitter punya format sendiri — bisa sama atau berbeda dengan OG image. Ukuran yang direkomendasikan: 1200x675px untuk large image card.
<!-- Twitter/X Card image — 1200x675px untuk large card preview -->
<Variable name="twitter.image"
description="Twitter Card Image URL"
type="string"
default=""
value="https://cdn.kamu.com/twitter-card-1200x675.jpg"/>Variable Tag Blogger XML — Schema Organization Logo
Logo yang digunakan di Schema.org structured data untuk Organization. Google Search Console suka ini — bisa narik up Knowledge Panel di hasil pencarian. Ukuran: minimal 512x512px (1:1 ratio), preferably PNG transparan.
<!-- Logo untuk Schema Organization — square, min 512x512px -->
<Variable name="metadata.organizationLogo"
description="Metadata Organization Logo"
type="string"
default=""
value="https://cdn.kamu.com/logo-512x512.png"/>Variable Tag Blogger XML — Metadata Default Thumbnail
Thumbnail default untuk artikel yang tidak punya featured image. Berbeda dari meta.image (#118), ini khusus dipakai di listing artikel, related posts, dan feed — bukan untuk OG/meta tag.
<!-- Default thumbnail untuk listing dan feed — 16:9 ratio -->
<Variable name="metadata.defaultThumbnail"
description="Metadata Default Thumbnail"
type="string"
default=""
value="https://cdn.kamu.com/thumbnail-default-800x450.jpg"/>Pre Code Dengan data-lines (Highlight Baris Tertentu)
Highlight baris-baris tertentu dalam code block pakai attribute data-lines.
Format nilainya: nomor baris dipisah koma ('3,4,5').
Cocok banget buat nunjukin perubahan yang perlu diperhatikan dalam kode yang panjang!
// Konfigurasi Database — bagian yang perlu kamu ubah ada di baris 3-5!
const dbConfig = {
host: 'localhost', // ← Ganti dengan hostname server kamu
port: 5432, // ← Ganti dengan port PostgreSQL kamu
database: 'myapp_db', // ← Ganti dengan nama database kamu
username: 'admin',
password: process.env.DB_PASSWORD, // Jangan hardcode password!
pool: { min: 2, max: 10 }
};<!-- Highlight baris 3, 4, dan 5 -->
<pre data-lines='3,4,5'><code>baris 1 biasa
baris 2 biasa
baris 3 di-highlight
baris 4 di-highlight
baris 5 di-highlight
baris 6 biasa</code></pre>Code Block Dengan Class Language Eksplisit
Paksa syntax highlighting ke bahasa tertentu dengan class language-xxx.
Berguna kalau auto-detect bahasa gagal atau memberikan hasil yang salah.
Support: xml, html, js, css, json, python, bash, dan banyak lagi!
<Variable name="theme.primaryColor"
description="Warna primer tema"
type="string"
default="#5b7bff"
value="#5b7bff"/>// JavaScript dengan syntax highlighting eksplisit
const fetchData = async (url) => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return await response.json();
} catch (error) {
console.error('Fetch gagal:', error);
return null;
}
};/* CSS dengan syntax highlighting eksplisit */
.hero {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
padding: clamp(3rem, 8vw, 6rem) 2rem;
text-align: center;
}<pre><code class='language-xml'>kode XML / Blogger template</code></pre>
<pre><code class='language-js'>kode JavaScript</code></pre>
<pre><code class='language-css'>kode CSS</code></pre>B:Comment Tag Blogger (Komentar Khusus Template XML)
Tag komentar khusus Blogger XML yang hilang dari output HTML final.
Berbeda dari komentar HTML biasa yang masih terlihat di source,
<b:comment> benar-benar tidak ada jejaknya di HTML yang dikirim ke browser!
<!-- Komentar ini masih kelihatan di source HTML browser -->
<!-- Ini komentar Blogger yang TIDAK kelihatan di output HTML: -->
<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- taruh kode custom di sini -->
<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>Custom Code Placement — Sebelum </head> (CSS/JS Global)
Cara pasang CSS atau JS eksternal yang jalan di semua halaman blog.
Tempatkan kode di antara dua marker b:comment yang sudah disediakan tema —
ini yang paling aman dan tidak akan kehapus saat update tema!
<!-- Di Edit HTML template, cari komentar ini dan taruh kode di antaranya: -->
<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- Google Fonts -->
<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link href='https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap' rel='stylesheet'/>
<!-- CSS kustom dari CDN -->
<link rel='stylesheet' href='https://cdn.kamu.com/custom.css'/>
<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>Custom Code Placement — Sebelum </body> (JS Global)
Tempat yang tepat untuk JS yang butuh DOM sudah selesai dirender. Script di sini jalan setelah seluruh halaman selesai dimuat — aman, tidak bikin halaman lambat, dan tidak ada masalah "element belum ada"!
<!-- Di Edit HTML template, cari komentar ini: -->
<b:comment><!--[ </body> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- Service Worker untuk PWA -->
<script src='/register-sw.js'></script>
<!-- Kode analytics custom -->
<script>
console.log('Blog HHC siap beraksi! 🚀');
</script>
<b:comment><!--[ </body> | <!> [above] Custom codes (Global) ]--></b:comment>Custom CSS Global — Ditulis di Edit HTML Tanpa Tag <style>
Area khusus di template XML Blogger buat nulis CSS kustom langsung —
tanpa perlu tag <style>.
CSS ini diperlakukan sebagai bagian dari stylesheet tema, bukan inline style!
<!-- Di Edit HTML, cari komentar ini dan tulis CSS langsung di bawahnya: -->
/*--[ Custom CSS Global (NO AMP) ]--*/
/* Widget sidebar kustom */
.my-custom-widget {
background: var(--bg3);
border-radius: 8px;
padding: 1rem;
}
/* Override warna CTA button */
.button.cta {
background: var(--accent2);
font-weight: 700;
letter-spacing: 0.5px;
}Custom JS Global — Di Atas </body> Tanpa Tag <script>
Area khusus di template XML Blogger untuk menulis JavaScript langsung
tanpa tag <script>. Ini digabung ke bundel JS tema —
lebih efisien dari inject script terpisah!
<!-- Di Edit HTML, cari komentar ini: -->
/*--[ Custom JS Global (placed above </body>) ]--*/
// Custom tracking event
document.querySelectorAll('a[href^="https"]').forEach(link => {
link.addEventListener('click', () => {
console.log('External link clicked:', link.href);
});
});
// Smooth scroll untuk anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href'))
?.scrollIntoView({ behavior: 'smooth' });
});
});Custom JS Global — Di Atas </head> (Sebelum Body Tersedia)
JavaScript yang jalan sangat awal — sebelum DOM selesai dibangun. Gunakan hanya untuk hal yang harus jalan sebelum halaman render, seperti set theme preference atau blocking anti-flicker untuk dark mode!
<!-- Di Edit HTML, cari komentar ini: -->
/*--[ Custom JS Global (placed above </head>) ]--*/
// Anti-flicker untuk dark mode — harus jalan sebelum render!
(function() {
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
// INGAT: document.body belum tersedia di sini!
// console.log(document.body); // → undefined ❌Custom Meta Tag Global (Di Zona Khusus Edit HTML)
Pasang meta tag kustom yang berlaku di semua halaman blog —
seperti Google Site Verification, Pinterest verification, atau meta tag khusus lainnya.
Tempatkan di antara dua marker b:comment yang sudah disediakan!
<!-- Di Edit HTML, cari dan taruh meta tag di antara komentar ini: -->
<b:comment><!--[ <!> [below] Custom Meta tags (Global) ]--></b:comment>
<!-- Google Site Verification -->
<meta name='google-site-verification' content='KODE-VERIFIKASI-DARI-GOOGLE'/>
<!-- Pinterest Verification -->
<meta name='p:domain_verify' content='KODE-VERIFIKASI-PINTEREST'/>
<!-- Facebook Domain Verification -->
<meta name='facebook-domain-verification' content='KODE-VERIFIKASI-FB'/>
<b:comment><!--[ <!> [above] Custom Meta tags (Global) ]--></b:comment>Robots.txt Kustom Untuk Blogger
Konfigurasi robots.txt yang optimal untuk Blogger — block URL duplicate dari parameter pagination dan sorting yang tidak perlu di-index Google, tapi tetap allow halaman utama dan post.
Cara Pasang #132
Di dashboard Blogger, buka Settings > scroll ke bagian Crawlers and indexing > aktifkan Custom robots.txt > klik Edit dan paste kode di bawah.
# Robots.txt optimal untuk Blogger
# Taruh di: Settings → Crawlers and indexing → Custom robots.txt
User-agent: *
Disallow: /search*updated-max=*
Disallow: /search*max-results=*
Disallow: /search*q=*
Allow: /
Sitemap: https://www.namadomain.com/sitemap.xml
Sitemap: https://www.namadomain.com/sitemap-pages.xml
# Blokir Googlebot Images dari folder tertentu jika perlu:
User-agent: Googlebot-Image
Allow: /Jump Break / Read More Tag Blogger (di HTML View Post)
Cara ketiga buat bikin "Read More" — langsung dari HTML view di editor post.
Paste <!--more--> di tempat kamu mau konten dipotong.
Ini lebih proper dibanding anchor a name="more" (#2 dan #110).
Cara Pakai #133
Di editor Blogger, switch ke mode HTML (klik tombol </>), lalu paste <!--more--> di tempat yang kamu inginkan. Atau lebih mudah: pakai Insert > Jump Break dari toolbar editor visual!
<!-- Taruh ini di HTML view editor post, di tempat konten mau dipotong -->
<p>Paragraf pengantar artikel yang tampil di homepage...</p>
<!--more-->
<p>Konten lengkap yang hanya tampil di halaman artikel penuh...</p>Label "News" Pada Post (Schema NewsArticle untuk Google Discover)
Cara ajaib nambahin schema NewsArticle ke post tanpa kode tambahan!
Cukup tambahkan label bernama persis News (kapital N) ke post di Blogger,
dan tema HHC otomatis switch schema ke NewsArticle.
Bisa boost visibilitas di Google Discover!
2. Di panel kanan, klik Labels.
3. Ketik label:
News (persis, kapital N).4. Klik Enter dan Publish.
Tidak ada kode HTML yang perlu ditambahkan — tema HHC yang ngurus semuanya!
<!-- Tidak ada kode HTML yang diperlukan! -->
<!-- Cukup tambahkan label "News" (dengan kapital N) di sidebar editor post Blogger -->
<!-- Sebelum ada label News: Schema = BlogPosting -->
<!-- Setelah ada label News: Schema = NewsArticle (otomatis!) -->Multi-Tab Code Block Before/After Pattern (Dokumentasi Perubahan)
Pola terbaik buat dokumentasi perubahan kode — nampilin versi "sebelum" dan "sesudah" secara berdampingan dalam satu blok tab. Pembaca langsung paham apa yang berubah tanpa baca teks panjang!
/* CSS lama — tidak responsive, warna hardcoded */
.post-body {
font-size: 16px;
color: #333333;
background: #ffffff;
max-width: 800px;
padding: 20px;
margin: 0 auto;
}/* CSS baru — responsive, pakai CSS variables tema */
.post-body {
font-size: clamp(15px, 2vw, 17px);
color: var(--text);
background: var(--bg);
max-width: min(860px, 100% - 2rem);
padding: clamp(1rem, 4vw, 2rem);
margin: 0 auto;
}<div class='pre tabs'>
<input id='preT-doc-1' type='radio' name='preTab-doc' checked/>
<input id='preT-doc-2' type='radio' name='preTab-doc'/>
<div>
<label for='preT-doc-1' data-text='Before'></label>
<label for='preT-doc-2' data-text='After'></label>
</div>
<pre class='preC-doc-1'><code>/* kode sebelum perubahan */</code></pre>
<pre class='preC-doc-2'><code>/* kode sesudah perubahan */</code></pre>
</div>- Pergi ke Blogger HTML Editor.
-
Temukan kode berikut dan tambahkan kode kustom di antaranya.
/* kode sebelum *//* kode sesudah */ .custom {}Tips!
Tambahkan komentar yang menjelaskan fungsi CSS yang ditambahkan.
