Yo, selamat datang di babak final dari seri paling epic ini! 🎯 Kalau kamu udah ngikutin dari bagian 1 sampai 4, berarti kamu udah ngantongin lebih dari 120 komponen siap pakai. Sekarang di bagian kelima ini kita nutup seri dengan komponen #121 sampai #136 — yang isinya bukan sembarang komponen, melainkan fitur-fitur advanced yang bikin blog kamu beda kelas dari yang lain.
Di sini kita bakal ngomongin soal variable lanjutan Blogger XML, cara highlight baris kode tertentu biar pembaca langsung ngerti yang mana yang penting, sistem penempatan CSS dan JS custom yang bener, robots.txt yang aman buat SEO, sampe fitur multi-tab code block yang bikin tutorial kamu terlihat sekelas dokumentasi GitHub. Panjang? Iya. Worth it? Absolutely. 🔥
📌 Catatan: Ini adalah bagian kelima dan terakhir dari seri Cheat Sheet Komponen Han Haoyu. Semua komponen yang dibahas ada di base tema hanhaoyu.com. Untuk bagian 1–4, cek artikel sebelumnya ya!
Variable Schema Organization Logo
Oke, kita mulai dari komponen yang kelihatannya sepele tapi dampaknya ke SEO tuh lumayan besar — yaitu metadata.organizationLogo. Ini adalah variable di XML template Blogger yang dipakai tema Han Haoyu untuk mengisi data schema Organization berbasis JSON-LD. Intinya, ini adalah logo resmi "organisasi" atau brand blog kamu yang dibaca oleh mesin pencari — bukan yang tampil di header, tapi yang dimasukkan ke dalam schema markup tersembunyi di balik layar.
Google menggunakan logo ini untuk Knowledge Panel dan Rich Results. Jadi kalau blog kamu udah mulai naik level dan Google mulai ngenalin brand kamu, logo ini yang bakal nongol di sidebar hasil pencarian. Gokil kan? 😎 Dan syaratnya cuma satu: gambarnya harus rasio 1:1 (kotak), minimal 512×512px.
⚠️ Ingat: Komponen ini diisi di Edit HTML template XML, bukan di postingan. Jangan keliru ya!
Demo Code:
<Variable name="metadata.organizationLogo"
description="Metadata Organization Logo"
type="string"
default=""
value="https://namadomain.com/img/logo-512x512.png"/>Beda sama meta.icon (favicon #116) yang dipakai buat ikon tab browser, logo ini khusus dikonsumsi oleh crawler mesin pencari untuk keperluan schema markup. Jadi dua-duanya perlu diisi, ya beda fungsinya!
Relevansi & Kombinasi: Variable ini bekerja dalam ekosistem bareng meta.icon (#116), meta.image (#118), opengraph.image (#119), dan twitter.image (#120). Kelimanya adalah fondasi visual dan branding blog kamu di berbagai platform — dari browser tab sampai Google Knowledge Panel. Pastikan semua terisi agar kesan pertama blog kamu di mana-mana itu konsisten dan profesional!
Variable Metadata Default Thumbnail
Nah ini saudaranya yang tadi — masih dari keluarga variable XML template. metadata.defaultThumbnail adalah gambar thumbnail default yang dipakai ketika sebuah artikel tidak punya gambar sendiri. Jadi kalau kamu nulis artikel cepat tanpa sempat nyari gambar cover, thumbnail default inilah yang bakal nampil di card preview, related posts, atau list artikel di homepage.
Bedanya sama meta.image (#118)? Kalau meta.image lebih ke konteks meta tag HTML (buat social sharing), metadata.defaultThumbnail ini lebih ke konteks internal sistem tema — misalnya dipakai komponen related posts atau card artikel di homepage. Jadi keduanya harus diisi dengan gambar yang representatif!
Gunakan rasio 16:9 untuk hasil terbaik karena sebagian besar card dan thumbnail di web modern pakai rasio ini. Ukuran minimal yang direkomendasikan adalah 1280×720px.
Demo Code:
<Variable name="metadata.defaultThumbnail"
description="Metadata Default Thumbnail (16:9)"
type="string"
default=""
value="https://namadomain.com/img/default-thumbnail-1280x720.jpg"/>Relevansi & Kombinasi: Variable ini berpasangan erat dengan Related Posts (#94) dan sistem auto-thumbnail di tema. Kalau kamu rajin nulis artikel dan selalu upload gambar cover, variable ini jarang kepakai. Tapi kalau ada artikel yang keselip tanpa gambar, inilah safety net-nya. Wajib diisi!
Code Block dengan Highlight Baris Tertentu (data-lines)
Ini salah satu fitur yang bikin artikel tutorial di Han Haoyu terlihat sekelas dokumentasi library profesional. Bayangin kamu nunjukin blok kode yang panjang, tapi yang perlu diperhatiin pembaca cuma baris 3, 4, dan 5. Tanpa highlight, pembaca harus baca semua dulu baru nemuin yang penting. Capek!
Dengan atribut data-lines pada tag <pre>, kamu bisa menandai baris-baris tertentu yang akan secara visual dibedakan dari baris lainnya — biasanya dengan background yang lebih terang atau border kiri berwarna. Pembaca langsung tau: "Oh, ini nih bagian yang krusial!" 🎯
Format nilainya: nomor baris dipisah koma. Bisa angka tunggal, bisa range dengan koma. Misalnya data-lines='3,4,5' untuk highlight baris 3, 4, dan 5.
📺 Demo Langsung — Code Block dengan Highlight Baris:
// Konfigurasi awal — baris ini aman, tidak perlu diubah
const appName = 'HanHaoyu Platform';
const apiKey = 'ISI-API-KEY-KAMU-DISINI'; // ← baris ini yang kamu ubah!
const baseUrl = 'https://api.namadomain.com'; // ← dan ini juga!
const timeout = 5000; // ← ini juga perlu disesuaikan
const retryCount = 3;Demo Code:
<!-- Highlight baris 3, 4, dan 5 -->
<pre data-lines='3,4,5'><code>// Konfigurasi awal — tidak perlu diubah
const appName = 'HanHaoyu Platform';
const apiKey = 'ISI-API-KEY-KAMU-DISINI';
const baseUrl = 'https://api.namadomain.com';
const timeout = 5000;
const retryCount = 3;</code></pre>
<!-- Highlight baris tunggal -->
<pre data-lines='2'><code>// baris ini biasa
// BARIS INI YANG PENTING!
// baris ini biasa lagi</code></pre>
<!-- Highlight baris tidak berurutan -->
<pre data-lines='1,3,6'><code>const a = 1; // ← highlight
const b = 2;
const c = 3; // ← highlight
const d = 4;
const e = 5;
const f = 6; // ← highlight</code></pre>Relevansi & Kombinasi: data-lines bisa dikombinasikan dengan data-source (label nama file) dan data-comment (label bahasa) untuk code block yang super informatif. Juga bisa dipakai di dalam ol.steps untuk tutorial langkah per langkah di mana setiap langkah punya kode dengan baris yang di-highlight berbeda. Ini trio terkuat buat nulis tutorial teknis! 🏆
Syntax Highlighting Eksplisit dengan Class language-xxx
Oke, ini komponen yang kelihatannya kecil tapi dampaknya ke readability tuh gede banget. Tema Han Haoyu dilengkapi syntax highlighter yang otomatis mewarnai kode berdasarkan bahasa pemrogramannya. Tapi supaya highlighter-nya tau kamu nulis bahasa apa, kamu perlu kasih tahu dia lewat class language-xxx di tag <code>-nya.
Tanpa class ini, highlighter mungkin salah tebak atau tidak mewarnai sama sekali. Dengan class yang tepat, kode kamu jadi penuh warna, mudah dibaca, dan terlihat profesional kayak IDE sungguhan di dalam artikel. ✨
Bahasa yang tersedia antara lain: language-xml / language-html, language-js / language-javascript, language-css, language-json, language-bash, language-python, dan masih banyak lagi tergantung library yang dipakai tema.
📺 Demo Langsung — Tiga Bahasa Berbeda:
<!-- Contoh kode XML / HTML -->
<Variable name="contoh.config"
description="Contoh konfigurasi"
type="string"
value="nilai-default"/>// Contoh kode JavaScript
const greet = (name) => {
return `Halo, ${name}! Selamat datang di hanhaoyu.com 🎉`;
};
console.log(greet('Bro'));/* Contoh kode CSS */
.card-keren {
background: linear-gradient(135deg, #6C3CE1, #F7C948);
border-radius: 12px;
padding: 24px;
color: white;
}Demo Code:
<!-- XML / HTML -->
<pre><code class='language-xml'>...kode XML kamu di sini...</code></pre>
<!-- JavaScript -->
<pre><code class='language-js'>...kode JS kamu di sini...</code></pre>
<!-- CSS -->
<pre><code class='language-css'>...kode CSS kamu di sini...</code></pre>
<!-- Python -->
<pre><code class='language-python'>...kode Python kamu di sini...</code></pre>
<!-- JSON -->
<pre><code class='language-json'>...kode JSON kamu di sini...</code></pre>
<!-- Bash / Shell -->
<pre><code class='language-bash'>...kode Bash kamu di sini...</code></pre>Pro Tip Penulisan: Selalu sertakan komentar singkat di baris pertama kode yang menjelaskan apa yang dilakukan blok kode tersebut. Ini membuat pembaca langsung orientasi tanpa perlu baca semua dulu!
Relevansi & Kombinasi: Class language-xxx ini wajib dikombinasikan sama data-lines (#123) untuk code block yang punya highlight baris, dan sama data-source untuk menampilkan nama file. Kalau kamu pakai multi-tab code block (#135), setiap tab bisa punya class bahasa yang berbeda — misalnya tab 1 adalah versi HTML, tab 2 adalah versi JavaScript-nya. Epic!
Tag b:comment — Komentar Khusus Blogger XML yang Invisible!
Ini fitur yang sering dipakai sama developer tema Blogger tapi jarang dijelasin ke pengguna biasa. b:comment adalah tag komentar khusus yang hanya ada di dalam template XML Blogger — ini bukan komentar HTML biasa <!-- -->. Perbedaan utamanya: komentar b:comment ini tidak akan pernah muncul di source HTML final yang dikirim ke browser pengguna. Totally invisible!
Di tema Han Haoyu, b:comment dipakai sebagai landmark atau penanda zona di dalam file XML template — kayak rambu jalan buat developer. Ada zona untuk custom CSS global, zona untuk custom JS, zona untuk custom meta tag, dan sebagainya. Kamu tinggal cari landmark ini di Edit HTML, lalu taruh kode kamu di antara dua landmark yang tepat.
⚠️ Penting: Tag b:comment hanya valid di dalam file XML template Blogger. Jangan taruh di postingan — tidak akan berfungsi dan bisa bikin error!
Demo Code — Contoh b:comment sebagai penanda zona:
<!-- Pola penanda zona di template XML Han Haoyu -->
<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- kode custom kamu di sini, akan dipasang sebelum </head> -->
<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>
<!-- ----------------------------------------------- -->
<b:comment><!--[ </body> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- kode custom kamu di sini, akan dipasang sebelum </body> -->
<b:comment><!--[ </body> | <!> [above] Custom codes (Global) ]--></b:comment>Relevansi & Kombinasi: Tag b:comment ini adalah fondasi dari sistem placement kode di komponen #126, #127, dan #131. Ketiganya pakai pola landmark b:comment ini untuk menentukan di mana kode kamu dipasang. Pahami ini dulu, maka komponen-komponen selanjutnya jadi super mudah dimengerti!
Tempat Kode Custom Sebelum </head> — CSS & Font Global
Nah ini yang paling sering dicari orang tapi sering salah tempat: "Gimana cara nambahin Google Fonts atau CSS eksternal ke tema Blogger custom?". Jawabannya ada di zona ini! Di tema Han Haoyu, ada zona khusus di dalam file XML template di mana kamu bisa naruh link stylesheet, preconnect, atau apapun yang perlu di-load sebelum konten halaman tampil (render-blocking resources).
Kenapa harus sebelum </head>? Karena CSS itu perlu diproses lebih awal sebelum browser mulai nge-render halaman. Kalau CSS-nya terlambat dimuat, halaman bisa flash of unstyled content (FOUC) — kelihatan sebentar tanpa style, baru kemudian style-nya masuk. Tidak bagus untuk UX dan kesan pertama!
Demo Code — Cara Tambah Kode Sebelum </head>:
<!-- Di Edit HTML template, temukan landmark ini: -->
<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- Taruh kode custom kamu di sini. Contoh: -->
<!-- Google Fonts -->
<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin/>
<link href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap' rel='stylesheet'/>
<!-- CSS Library Eksternal -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css'/>
<!-- CSS Kustom via CDN -->
<link rel='stylesheet' href='https://url-css-kamu.com/styles.css'/>
<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>media="print" lalu swap ke all via JS untuk non-critical CSS, atau pake rel="preload" untuk resource penting.Relevansi & Kombinasi: Zona ini adalah pasangan dari zona sebelum </body> (#127). CSS di sini, JS di sana — itu prinsip dasar optimasi loading halaman. Kalau kamu nambahin font baru lewat sini, pastikan juga update variable CSS di tema buat menggunakannya. Dan kalau mau tambahin meta tag global (bukan CSS/JS), gunakan zona khusus meta tag (#131).
Tempat Kode Custom Sebelum </body> — JavaScript Global
Ini pasangannya komponen #126 — tapi untuk JavaScript. Kenapa JS harus di sini dan bukan di <head>? Karena JS yang diletakkan di akhir <body> dieksekusi setelah seluruh konten halaman sudah ter-render. Ini penting banget! Kalau JS kamu dijalankan terlalu awal (di <head>), elemen yang perlu dimanipulasi oleh JS belum ada di DOM, dan kode kamu bakal error.
Analogi simpelnya: kamu ngga bisa ngecat tembok yang belum dibangun, kan? Sama persis. JS perlu tunggu HTML-nya selesai dulu. 🏗️
Demo Code — Cara Tambah JS Sebelum </body>:
<!-- Di Edit HTML template, temukan landmark ini: -->
<b:comment><!--[ </body> | <!> [below] Custom codes (Global) ]--></b:comment>
<!-- Taruh script kamu di sini. Contoh: -->
<!-- Library eksternal (AOS animation) -->
<script src='https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js'></script>
<!-- Service Worker untuk PWA -->
<script src='/register-sw.js'></script>
<!-- Script kustom inline -->
<script>
// Inisialisasi AOS setelah semua elemen siap
AOS.init({ duration: 800, once: true });
// Custom analytics event
document.querySelectorAll('a.extL').forEach(link => {
link.addEventListener('click', () => {
gtag('event', 'outbound_click', { url: link.href });
});
});
</script>
<b:comment><!--[ </body> | <!> [above] Custom codes (Global) ]--></b:comment>✅ Best Practice: Kalau script kamu perlu dijalankan sesegera mungkin (misalnya theme switcher biar tidak flicker saat load), gunakan zona </head> tapi tambahkan atribut defer atau async. Tapi untuk kebanyakan kasus, taruh JS sebelum </body> sudah cukup dan lebih aman.
Relevansi & Kombinasi: Zona ini bekerja bareng zona </head> (#126). Pola klasiknya: CSS/font di head, JS di body. Kalau kamu pakai JS yang butuh DOM ready, taruh di sini. Kalau pakai JS yang perlu jalan lebih awal (pre-render analytics, critical theme logic), pakai zona head dengan defer.
Custom CSS Global Langsung di Edit HTML (Tanpa Tag <style>)
Ini salah satu hal yang paling sering bikin orang bingung pertama kali ngoprek tema Blogger custom. Di tema Han Haoyu, ada zona khusus di Edit HTML di mana kamu bisa nulis CSS secara langsung tanpa perlu nambah tag <style></style> di luar. Temanya sudah menyediakan "wadah" CSS-nya sendiri — kamu tinggal isi kontennya di tempat yang tepat.
Kenapa begini? Karena tema sudah punya blok <style>-nya sendiri yang dikelola dengan baik. Kalau kamu nambah <style> baru secara sembarangan, bisa terjadi konflik atau duplikasi yang bikin file jadi berat. Dengan sistem zona ini, semua CSS custom terpusat di satu tempat yang terorganisir. Rapi, bersih, mudah di-maintain! 🧹
Demo Code — Cara Nulis CSS di Zona Kustom:
<!-- Di Edit HTML template, cari komentar penanda ini: -->
<!-- /*--[ Custom CSS Global (NO AMP) ]--*/ -->
<!-- Langsung tulis CSS di bawahnya, tanpa tag <style>: -->
/* Custom widget keren kamu */
.widget-saya {
background: linear-gradient(135deg, #6C3CE1 0%, #3a1c9e 100%);
border-radius: 16px;
padding: 24px;
color: white;
}
/* Override style tombol default */
.button.custom-merah {
background: #E74C3C;
border-color: #E74C3C;
}
.button.custom-merah:hover {
background: #c0392b;
}
/* Animasi masuk untuk card */
.card-animate {
animation: slideInUp 0.5s ease forwards;
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}style, tidak perlu kurung kurawal pembungkus ekstra. Persis seperti nulis file .css biasa, tapi langsung di dalam Edit HTML template Blogger.Relevansi & Kombinasi: CSS yang ditulis di zona ini akan berlaku untuk seluruh halaman blog secara global. Cocok untuk style widget, override class bawaan tema, atau animasi custom yang kamu tambahkan. Ingat, CSS di sini prioritasnya bisa kalah sama CSS bawaan tema kalau specificity-nya sama — tambah satu level selector atau gunakan !important dengan bijak.
Custom JS Global di Atas </body> Langsung Tanpa Tag <script>
Mirip dengan CSS di komponen #128, tema Han Haoyu juga punya zona khusus buat JavaScript kustom yang langsung bisa kamu tulis tanpa perlu membungkusnya dengan tag <script></script>. Temanya sudah nyiapin tag script-nya, kamu tinggal isi konten JS-nya.
JavaScript yang ditulis di zona ini akan dieksekusi setelah DOM siap (karena letaknya di atas </body>), jadi kamu bisa langsung manipulasi elemen HTML tanpa perlu DOMContentLoaded listener. Praktis! 🎉
Demo Code — Cara Nulis JS di Zona Kustom (di Atas </body>):
<!-- Cari penanda zona ini di Edit HTML: -->
<!-- /*--[ Custom JS Global (placed above </body>) ]--*/ -->
<!-- Langsung tulis JS di bawahnya, tanpa tag <script>: -->
// Cek apakah user prefer dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
document.body.classList.add('auto-dark');
}
// Smooth reveal untuk semua gambar lazy
document.querySelectorAll('img.lazyload').forEach(img => {
img.addEventListener('load', () => {
img.style.opacity = '1';
img.style.transition = 'opacity 0.4s ease';
});
});
console.log('Script custom berhasil dimuat! 🚀');Bedanya sama <script> biasa? Kalau kamu pake tag <script> mandiri di dalam postingan, itu hanya berlaku untuk postingan itu saja. Script di zona ini berlaku untuk seluruh halaman blog secara global — homepage, halaman label, halaman arsip, semua kena. Pilih sesuai kebutuhan!
Relevansi & Kombinasi: Zona JS ini adalah pasangan dari zona CSS (#128). Keduanya dikerjakan di Edit HTML template di zona yang berbeda. Juga berpasangan sama zona JS di head (#130) — bedanya di timing eksekusi. Untuk script yang butuh DOM sudah ada, pakai zona body ini. Untuk script yang perlu jalan super awal, pakai zona head.
Custom JS di Atas </head> — Eksekusi Super Awal, Tapi Hati-Hati!
Ini zona JavaScript yang paling awal dari semua zona yang ada di tema Han Haoyu. Script yang ditaruh di sini dieksekusi sebelum browser selesai membangun DOM — artinya document.body belum tersedia, dan kalau kamu coba manipulasi elemen HTML di sini, kamu akan ketemu null atau undefined. Error tapi senyum pahit! 😅
Lalu kapan zona ini berguna? Ada beberapa skenario spesifik: theme switcher (dark/light mode) yang harus jalan sebelum konten tampil supaya tidak ada "flash" mode yang salah, early analytics yang butuh nangkep data sesegera mungkin, atau feature flags yang menentukan tampilan sebelum render. Pendeknya: untuk hal-hal yang benar-benar time-sensitive!
Demo Code — Cara Nulis JS di Zona Head:
<!-- Cari penanda zona ini di Edit HTML: -->
<!-- /*--[ Custom JS Global (placed above </head>) ]--*/ -->
<!-- Langsung tulis JS di bawahnya: -->
// PERHATIAN: document.body belum tersedia di sini!
console.log(document.body); // Output: null ← ini normal di zona head
// Yang bisa dilakukan di sini:
// 1. Set CSS variable atau class di <html> element (sudah tersedia)
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
// 2. Early performance marking
performance.mark('customScriptStart');
// 3. Feature detection yang akan dipake kemudian
window.supportsWebP = (function() {
const elem = document.createElement('canvas');
return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
})();document.getElementById(), document.querySelector(), atau manipulasi DOM apapun — semua akan return null karena HTML belum selesai di-parse. Simpan untuk zona body (#129)!Relevansi & Kombinasi: Gunakan zona head ini hanya untuk kasus-kasus di mana timing benar-benar krusial. Untuk 99% kebutuhan JS biasa, zona body (#129) atau zona eksternal (#127) sudah lebih dari cukup. Pahami perbedaan keduanya, dan kamu ngga akan pusing lagi soal "kenapa script-ku ngga jalan?" 💪
Custom Meta Tag Global — Verifikasi Google Search Console, dll.
Di tema Han Haoyu, ada zona khusus lagi khusus buat penambahan meta tag global — terpisah dari zona CSS dan JS. Ini adalah tempat yang tepat untuk menaruh hal-hal seperti: Google Search Console verification tag, Bing Webmaster verification, meta tag custom yang spesifik untuk platform tertentu, atau apapun yang berbentuk <meta> dan perlu ada di semua halaman.
Kenapa perlu zona terpisah? Supaya lebih terorganisir! Meta tag itu beda dari CSS dan JS — dia tidak perlu dieksekusi, hanya dibaca oleh bot/crawler. Menaruhnya di zona yang tepat bikin template kamu bersih dan mudah diaudit. 📋
Demo Code — Cara Tambah Meta Tag Global:
<!-- Di Edit HTML, temukan landmark ini: -->
<b:comment><!--[ <!> [below] Custom Meta tags (Global) ]--></b:comment>
<!-- Taruh meta tag kamu di sini: -->
<!-- Google Search Console Verification -->
<meta name='google-site-verification' content='KODE-VERIFIKASI-GSC-KAMU'/>
<!-- Bing Webmaster Verification -->
<meta name='msvalidate.01' content='KODE-VERIFIKASI-BING'/>
<!-- Pinterest Verification -->
<meta name='p:domain_verify' content='KODE-VERIFIKASI-PINTEREST'/>
<!-- Theme Color untuk mobile browser -->
<meta name='theme-color' content='#6C3CE1'/>
<!-- Referrer Policy -->
<meta name='referrer' content='strict-origin-when-cross-origin'/>
<b:comment><!--[ <!> [above] Custom Meta tags (Global) ]--></b:comment>💡 Cara Dapat Kode GSC: Buka Google Search Console → Add Property → masukkan URL blog → pilih HTML Tag → copy kode di atribut content → paste ke zona ini. Setelah disimpan dan terverifikasi, GSC akan konfirmasi ownership blog kamu!
Relevansi & Kombinasi: Zona meta tag ini adalah pelengkap dari variable meta yang sudah dibahas (#116–#122). Variable mengontrol konten meta yang dikelola tema secara dinamis, zona ini untuk meta tag statis yang kamu tambahkan secara manual. Keduanya bekerja bersama untuk membentuk kepala dokumen HTML yang komprehensif dan SEO-optimal.
Robots.txt Kustom untuk Blogger — SEO Protection Level 100!
Ini satu yang level-nya agak beda dari komponen lain — bukan kode yang ditaruh di template atau postingan, tapi di pengaturan Blogger. Robots.txt adalah file teks sederhana yang kasih tahu bot mesin pencari: halaman mana yang boleh di-crawl dan mana yang tidak. Di Blogger, secara default beberapa URL yang seharusnya tidak di-index (kayak halaman filter tanggal, halaman pencarian, dsb) malah di-crawl juga — ini bisa bikin duplikasi konten dan merusak SEO!
Tema Han Haoyu sudah menyiapkan template robots.txt yang optimal untuk Blogger. Isinya memblokir URL-URL berparameter yang bikin Googlebot muter-muter tanpa manfaat, tapi tetap membiarkan halaman label dan postingan utama di-crawl dengan bebas. 🛡️
Cara menggunakannya: Buka Blogger Dashboard → Settings → di bagian "Crawlers and indexing", aktifkan "Custom robots.txt" → paste kode di bawah ini.
📺 Demo Langsung — Isi Robots.txt Optimal untuk Blogger:
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.xmlPenjelasan tiap baris:
User-agent: *— Berlaku untuk semua bot (Google, Bing, dll)Disallow: /search*updated-max=*— Blokir halaman archive berdasarkan tanggal — tidak ada value SEO-nyaDisallow: /search*max-results=*— Blokir halaman pencarian dengan parameter jumlah hasilDisallow: /search*q=*— Blokir halaman hasil pencarian internal BloggerAllow: /— Izinkan akses ke semua halaman lain (termasuk label, postingan, homepage)Sitemap:— Kasih tahu bot di mana sitemap-nya! Ganti domain dengan domain kamu yang asli.
⚠️ Ganti Domain! Pastikan kamu ganti namadomain.com di baris Sitemap dengan domain blog kamu yang sebenarnya. Kalau masih pakai subdomain Blogspot, ganti dengan namablog.blogspot.com.
Relevansi & Kombinasi: Robots.txt ini bekerja bareng sitemap yang sudah otomatis digenerate Blogger (/sitemap.xml dan /sitemap-pages.xml). Setelah setting robots.txt, submit URL sitemap ke Google Search Console supaya Googlebot tahu jalur crawl yang optimal. Kombinasi ini adalah fondasi teknikal SEO yang solid untuk blog Blogger kamu!
Jump Break <!--more--> — Shortcode Read More Blogger
Ini pasangannya komponen #110 (<a name='more'></a>) yang sudah kita bahas sebelumnya. Di Blogger, ada dua cara untuk menandai titik potong "Read More": bisa pakai tag <a name='more'></a> (cara HTML manual), atau shortcode <!--more--> (cara yang lebih clean dan singkat).
Keduanya punya fungsi yang sama persis: konten sebelum tag ini yang tampil di homepage sebagai preview, konten sesudahnya tersembunyi di balik tombol "Read More". Tapi ada nuansa kecil yang bikin orang pilih satu di atas yang lain:
<a name='more'></a>— Lebih verbose, tapi bisa kamu positioning lebih presisi karena itu elemen HTML<!--more-->— Lebih clean, singkat, dan ini adalah shortcode "resmi" bawaan Blogger
Demo Code — Cara Pakai di HTML View Postingan:
<!-- Teks pembuka yang tampil di homepage -->
<p>Artikel ini membahas tentang cara setup environment development yang
optimal untuk produktivitas maksimal. Dari pemilihan IDE hingga plugin
wajib yang mengubah cara kamu coding selamanya...</p>
<!-- Shortcode jump break — konten di bawah ini tersembunyi di homepage -->
<!--more-->
<!-- Konten lengkap yang muncul saat buka artikel penuh -->
<h2>1. Pilih IDE yang Tepat</h2>
<p>VS Code adalah pilihan yang paling fleksibel karena...</p>💡 Strategi Preview: Idealnya, teks preview yang tampil di homepage itu bikin pembaca penasaran tapi tidak reveal terlalu banyak — kayak sinopsis film yang bikin pengen nonton. Taruh <!--more--> di titik paling "penasaran" dari artikelmu!
Relevansi & Kombinasi: Sama fungsinya dengan <a name='more'></a> (#110). Pilih salah satu, tidak perlu pakai keduanya sekaligus. Kalau kamu nulis di Composer view (bukan HTML), Blogger biasanya otomatis insert tag ini saat kamu klik tombol "Insert Jump Break" di toolbar editor.
Label "News" — Satu Label Kecil, Dampak SEO yang Besar!
Ini mungkin komponen paling ajaib dari semua yang ada di seri ini — karena tidak ada kode HTML yang perlu kamu tulis sama sekali! 🤯 Tema Han Haoyu punya fitur cerdas: kalau sebuah postingan punya label bernama persis "News" (kapital N, case-sensitive!), tema akan otomatis mengubah schema type artikel dari Article menjadi NewsArticle di dalam JSON-LD markup yang di-generate.
Kenapa ini penting? Google punya dua jenis rich result untuk konten artikel: Article (untuk artikel umum) dan NewsArticle (untuk berita dan konten yang time-sensitive). Konten dengan schema NewsArticle berpeluang lebih besar masuk ke Top Stories carousel di Google — itu slot premium yang muncul di bagian teratas hasil pencarian. Nilainya? Tidak ternilai!
Dan caranya? Tinggal tambah label "News" di postingan. Selesai. Tema yang mengurus sisanya secara otomatis. 🪄
📺 Demo Visual — Cara Tambah Label "News" di Blogger Editor:
📋 Tampilan sidebar editor Blogger (simulasi):
Labels
Label "News" (kapital N) aktifkan schema NewsArticle secara otomatis
⚠️ Case-Sensitive! Harus persis "News" dengan N kapital. Kalau kamu tulis "news" (huruf kecil semua), "NEWS" (semua kapital), atau "Berita" — fitur otomatis ini tidak akan aktif. Pastikan labelnya tepat!
Tidak Ada Kode HTML — Cukup Tambah Label di Editor:
<!-- Tidak ada kode HTML yang perlu ditambahkan!
Cukup tambahkan label "News" di sidebar editor Blogger.
Label: News ← persis begini, case-sensitive
Tema akan otomatis generate:
"articleType": "NewsArticle" di JSON-LD schema
Hasilnya: postingan berpeluang masuk Google Top Stories! -->Relevansi & Kombinasi: Untuk mendapat manfaat maksimal dari schema NewsArticle, artikel kamu juga harus punya: gambar berkualitas tinggi (isi metadata.defaultThumbnail #122), judul yang jelas, waktu publikasi yang akurat, dan konten yang benar-benar newsworthy. Schema-nya bagus, tapi kontennya tetap harus berkualitas!
Multi-Tab Code Block dengan Pola Before/After — Dokumentasi Level Pro!
Ini adalah salah satu komponen paling visually impressive di seluruh platform Han Haoyu — dan juga yang paling sering dipakai di artikel dokumentasi perubahan kode. Idenya sederhana tapi powerful: tampilkan dua (atau lebih) versi kode dalam satu block yang bisa di-switch dengan tab. Pembaca bisa langsung compare "kode sebelum" dan "kode sesudah" tanpa harus scroll naik-turun. Game changer buat artikel tutorial!
Ini beda dari multi-tab konten biasa (#101) — ini khusus untuk kode, pakai class pre tabs (bukan tabs saja), dan setiap tab berisi <pre><code>. Strukturnya juga sedikit berbeda dalam penamaan class kontennya.
📺 Demo Langsung — Before/After Code Tabs:
/* Kode CSS SEBELUM dioptimasi — terlalu verbose */
.button {
display: inline-block;
background-color: #6C3CE1;
color: white;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}/* Kode CSS SESUDAH dioptimasi — clean & shorthand */
.button {
display: inline-block;
background: #6C3CE1;
color: white;
padding: 12px 20px; /* shorthand! */
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}Demo Code — Cara Bikin Multi-Tab Before/After:
<div class='pre tabs'>
<!-- Input radio untuk kontrol tab (nama unik!) -->
<input id='preT-artikel1-1' type='radio' name='preTab-artikel1' checked/>
<input id='preT-artikel1-2' type='radio' name='preTab-artikel1'/>
<!-- Label tab yang tampil -->
<div>
<label for='preT-artikel1-1' data-text='❌ Before'></label>
<label for='preT-artikel1-2' data-text='✅ After'></label>
</div>
<!-- Konten tab pertama (Before) -->
<pre class='preC-artikel1-1'><code class='language-css'>/* kode sebelum */
.element { color: blue; }</code></pre>
<!-- Konten tab kedua (After) -->
<pre class='preC-artikel1-2'><code class='language-css'>/* kode sesudah */
.element { color: red; }</code></pre>
</div>Pola Penamaan ID dan Class: Kunci dari multi-tab yang berfungsi dengan benar adalah konsistensi penamaan. Kalau ID input dimulai dengan preT-namaGrup-, maka class kontennya harus preC-namaGrup- dengan angka tab yang sama. Dan setiap grup di satu halaman harus punya nama unik di atribut name!
Relevansi & Kombinasi: Multi-tab code block ini adalah senjata pamungkas ketika dikombinasikan dengan data-lines (#123) dan language-xxx (#124). Bayangkan: tab Before dengan beberapa baris yang di-highlight merah (yang salah), tab After dengan baris yang benar. Pembaca langsung paham perubahan yang terjadi tanpa penjelasan panjang. Ini dokumentasi sekelas framework open-source! 🚀
Nested Pre Tabs di dalam Steps — Pinnacle of Tutorial Writing! 🏔️
Dan akhirnya — komponen #136, komponen terakhir dari seluruh seri ini. Ini adalah kombinasi paling advance dari semua yang sudah kita pelajari: ol.steps yang di dalamnya punya elemen div.pre.tabs. Alias: langkah-langkah tutorial yang masing-masing bisa punya kode before/after di dalamnya.
Ini adalah puncak dari tutorial writing di Han Haoyu. Cocok untuk panduan migrasi (dari versi A ke versi B), panduan refactoring kode, atau tutorial step-by-step yang setiap langkahnya punya perubahan kode. Tidak ada platform blog lain yang punya komponen se-rich ini secara built-in! 💎
📺 Demo Langsung — Steps dengan Pre Tabs di Dalamnya:
- Buka file
theme.cssdi template editor kamu. -
Temukan kode berikut, lalu ganti dengan versi yang sudah dioptimasi.
/* Versi lama — tidak responsive */ .container { width: 800px; margin: 0 auto; }/* Versi baru — fully responsive */ .container { width: min(800px, 100%); margin: 0 auto; padding-inline: 20px; }Tips!
Fungsimin()di CSS modern bikin container otomatis menyesuaikan layar tanpa media query! - Simpan perubahan dan refresh halaman untuk melihat hasilnya.
Demo Code — Template Lengkap OL Steps + Pre Tabs:
<ol class='steps'>
<li>Langkah pertama tanpa kode — cukup teks instruksi.</li>
<li>
Langkah kedua dengan perbandingan kode before/after.
<div class='pre tabs'>
<!-- Input radio -- nama harus unik per grup! -->
<input id='preT-steps1-1' type='radio' name='preTab-steps1' checked/>
<input id='preT-steps1-2' type='radio' name='preTab-steps1'/>
<div>
<label for='preT-steps1-1' data-text='Sebelum'></label>
<label for='preT-steps1-2' data-text='Sesudah'></label>
</div>
<pre class='preC-steps1-1'><code class='language-css'>/* kode sebelum */</code></pre>
<pre class='preC-steps1-2'><code class='language-css'>/* kode sesudah */</code></pre>
</div>
<p class='note'><b>Tips!</b><br>
Tambahkan catatan relevan di bawah kode untuk langkah ini.
</p>
</li>
<li>Langkah terakhir — instruksi penutup.</li>
</ol>⚠️ Penting Soal Penamaan!
Setiap div.pre.tabs yang ada di dalam satu halaman — baik yang standalone maupun yang nested di dalam ol.steps — HARUS punya nilai name yang unik di input radio-nya. Kalau ada dua grup dengan name yang sama, mereka akan saling ganggu dan tab-nya tidak akan berfungsi dengan benar.
Relevansi & Kombinasi: Ini adalah apex predator dari semua kombinasi komponen di Han Haoyu. Gabungin ini sama data-lines (#123), language-xxx (#124), dan note box di setiap langkah — artikel tutorialmu bakal setara dengan dokumentasi Tailwind CSS atau Next.js. Serius! Dan ingat, kamu bisa juga bikin steps di dalam accordion (#104) untuk artikel yang levelnya bahkan lebih advance lagi! 🎯
Selesai! Kita Resmi Tamatkan Semua 136 Komponen! 🎓🎉
Yo, selamat! Kalau kamu baca ini dari bagian 1 sampai bagian 5 ini, berarti kamu udah resmi tamat seri Cheat Sheet Komponen Han Haoyu yang totalnya mencakup 136 komponen siap pakai. Dari komponen se-simpel tag <u> sampai sistem nested pre tabs yang kompleks — semuanya sudah kamu kuasai sekarang! 💪
Di bagian 5 terakhir ini, kita sudah explore:
- ✅ metadata.organizationLogo — Logo untuk Google Knowledge Panel dan schema markup
- ✅ metadata.defaultThumbnail — Thumbnail fallback yang branded dan konsisten
- ✅ data-lines — Highlight baris kode spesifik yang bikin tutorial jelas banget
- ✅ language-xxx class — Syntax highlighting eksplisit untuk berbagai bahasa
- ✅ b:comment — Landmark tak terlihat untuk navigasi template XML
- ✅ Zona </head> — Placement CSS, font, dan resource early-load
- ✅ Zona </body> — Placement JS global post-DOM
- ✅ Custom CSS langsung — Nulis CSS tanpa tag <style> ekstra
- ✅ Custom JS langsung (body) — JS global yang bisa akses DOM
- ✅ Custom JS langsung (head) — JS early-execution untuk theme-critical ops
- ✅ Custom meta tag — GSC verification, theme-color, dan sebagainya
- ✅ Robots.txt kustom — Proteksi SEO dari duplicate content Blogger
- ✅ Jump break shortcode — Cara clean memotong preview artikel
- ✅ Label "News" — Satu label kecil, peluang masuk Google Top Stories
- ✅ Multi-tab Before/After — Code comparison yang sekelas dokumentasi pro
- ✅ Nested Pre Tabs dalam Steps — Pinnacle of tutorial writing di Han Haoyu
Dari semua komponen yang ada, platform Han Haoyu membuktikan bahwa Blogger — yang sering dianggap platform blogging yang "jadul" dan terbatas — bisa diubah menjadi sebuah publishing platform yang kaya fitur, SEO-optimal, dan punya developer experience yang solid. Tidak perlu pindah ke WordPress atau Medium kalau kamu tahu cara memanfaatkan semua komponen ini! 🚀
🙏 Terima Kasih! Udah baca seri ini sampai akhir. Kalau ada yang mau ditanyakan, ada yang masih bingung, atau ada komponen yang ingin dibahas lebih dalam — drop komentar di bawah. Komunitas yang belajar bareng adalah komunitas yang tumbuh bareng! ✨
Satu hal terakhir sebelum kamu pergi: jangan cuma simpan artikel ini — praktikkan langsung. Coba satu komponen hari ini, coba lagi besok. Konsistensi itu lebih powerful dari marathon belajar sekali duduk. Selamat ngoprek, dan semoga blogmu makin kece dari hari ke hari! 💜
Copyright (c):
hanhaoyu.com
