Permudah Penulisan Postingan menggunakan Tipografi, Fitur dan Komponen di hanhaoyu.com

Support the project "Great projects survive because of community support - not piracy."
We've poured countless hours into building Han Haoyu Platform - optimizing performance, adding new features, and pushing the limits of what's possible on Blogger. But sadly, many people download it from unauthorized sites without realizing the harm it causes.
Piracy not only disrespects our efforts, but it also slows down future updates, kills motivation, and discourages innovation.
If you love Han Haoyu Platform or have benefited from it, support the project by purchasing the official version - it directly supports ongoing development.

Tentang Platform Ini Kumpulan komponen, gaya penulisan (typography), dan fitur di atas dibuat khusus untuk ekosistem hanhaoyu.com beserta seluruh program dan project resminya — termasuk kebutuhan penulisan artikel bagi penulis resmi maupun penulis tamu, panduan penulisan (writing guideline), dan dukungan teknis lainnya untuk seluruh mitra/partner yang terafiliasi resmi dengan hanhaoyu.com. Jika kamu ingin mendukung pengembangan platform ini, kamu bisa memberikan dukungan melalui Trakteer - trakteer.id/hanhaoyu.
Untuk pemberitahuan, laporan, maupun aduan, silakan hubungi kami melalui hanhaoyu.com/contact.

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

Table of Contents

Most of these features can only be used in HTML View mode, nor can you switch to 'Writing view' mode while using some of these features.

1. In post editor view, click icon at the bottom right of the title.
2. Two options will appear: HTML view and Writing view.
3. Select HTML View.
4. Copy and paste the component code wherever you want to add it and make appropriate changes.

---

Paragraph

Use p tag to add paragraphs to the article.

<!--[ Paragraph ]-->
<p>This is a paragraph</p>

Paragraph with Text Indent

This feature functions to make the first line of a paragraph indented with a predetermined value. You can also apply it to several other paragraphs.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>This is a paragraph with text indent.</p>

Paragraph with Drop Cap

The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.

Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>T</span>his is a paragraph with drop cap.</p>

Post Reference Paragraph

To write a list of references or footnotes below the post.

Source:
www.example.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Source:<br> www.example.com</p>

---

Post Image

Following is a standard image without any container which means there will be no lightbox for this image.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Tips!
Have you noticed the classname full? Adding this classname to img tag removes horizontal margin and adapts full screen width in Mobile Devices.

Good to know:

• We recommend adding alt, width and height attributes to img tags.

Gambar Utama vs Gambar Berikutnya (SEO & Indexing)

Mulai versi ini, setiap gambar di dalam post — apa pun jenisnya (standard image, image with caption, grid image, dsb) — wajib memiliki atribut alt, title, width, dan height agar dapat diindeks dengan baik oleh mesin pencari.

Gunakan struktur berikut sebagai kontainer standar untuk gambar utama/thumbnail (gambar pertama pada post):

<!--[ Gambar Utama / Thumbnail (urutan pertama) ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <figure itemscope itemtype='https://schema.org/ImageObject' class='separator' style='clear: both;'>
          <img height='1080' width='1920'
            data-original-height='1080' data-original-width='1920'
            alt='image_alt'
            title='image_title'
            class='responsive'
            decoding='async'
            loading='eager'
            fetchpriority='high'
            itemprop='contentUrl'
            style='max-width: 100%; height: auto;'
            src='image_link' />
          <meta itemprop='width' content='1920'/>
          <meta itemprop='height' content='1080'/>
          <figcaption class='tr-caption' itemprop='caption'>image_caption</figcaption>
        </figure>
      </td>
    </tr>
  </tbody>
</table>

Untuk gambar kedua dan seterusnya, gunakan kontainer yang sama, tetapi ganti loading='eager' menjadi loading='lazy' dan hapus atribut fetchpriority='high' (cukup decoding='async'):

<!--[ Gambar Kedua dan Seterusnya ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <figure itemscope itemtype='https://schema.org/ImageObject' class='separator' style='clear: both;'>
          <img height='1080' width='1920'
            data-original-height='1080' data-original-width='1920'
            alt='image_alt'
            title='image_title'
            class='responsive'
            decoding='async'
            loading='lazy'
            itemprop='contentUrl'
            style='max-width: 100%; height: auto;'
            src='image_link' />
          <meta itemprop='width' content='1920'/>
          <meta itemprop='height' content='1080'/>
          <figcaption class='tr-caption' itemprop='caption'>image_caption</figcaption>
        </figure>
      </td>
    </tr>
  </tbody>
</table>

Warning!
Jika sebuah post/halaman belum memiliki thumbnail atau gambar apa pun, atau ada bagian yang membutuhkan gambar tetapi belum tersedia asetnya, gunakan gambar fallback berikut sebagai pengganti sementara:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghN-cN1BDfXgPYn33Gl3keUBzIJtPYB7bXuwYe1CGSMbeXkVIiHbsZODIV41ZnrctXATrHpIIYo1N_1-9wg_sWZwpwATzVkaOnjKtl5uSuuwYsQjn5_j5CiQrDTqdOvq-ig53ZpD-eh1jITZCzWnKgPigp5J3iUDSySaKhfYPvVJGo06rEXvXTqZmNzG4/s1600/Foto%20Muhammad%20Hayyu%20Hani%20Nuril%20-%20Han%20Haoyu%20-%20Thumbnail%20hanhaoyu.com.png

Image with Caption

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

The image caption is here! Where were you looking for it?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

Warning!
You should not manually add this component to post or page because it is HTML code snippet used by Blogger for images with caption. Therefore, we recommend you to use the below approach when adding images with caption component manually.

You might be wondering why should you use the table tag just for adding caption to image even though there are figure and figcaption HTML tags available?

Let me sort it out for you! It is because when we add caption to an image through Blogger post editor and not manually by editing HTML, it uses the above code snippet for an image having caption. Therefore, it is necessary to support them.

You can also use the figure and figcaption tags instead of table tag as shown below.

Image caption using figcaption tag.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Image with Automatic Lightbox

Lighbox helps to scale the image up and make it fully focusable on click. The lightbox also contains the contents of alt attribute of the image when it appears on image click.

Where are you finding the lightbox? Click on this image!

Good to know:

• All the images in the post will automatically have a lightbox function if the image is wrapped under a parent container having one of the classnames lbx, separator, psImg, btImg, glImg or satisfies one of the selectors .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
• If an image with lightbox is wrapped under anchor tag, clicking on image will only open link when lightbox is shown.
• To explicitly opt-out automatic lightbox function for a particular image, add attribute data-lightbox='false' to the img tag.
• To explicitly opt-out lightbox automatically containing the alt attribute contents, add attribute data-caption='false' to the img tag.

Images with Grid Layout

Grid layout in the context of images typically refers to arranging multiple images in a structured grid format on a webpage or in a document. This layout is popular for galleries, portfolios, or any collection of images where you want to display several images in a neat and organized manner.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
</div>

Images with Show All Function

Used to hide some images and will be shown when the user clicks the Show All button. Show All function can only be activated once, images cannot be hidden again when you activate it.

Show All

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>

  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>

    <!--[ Button to activate ]-->
    <label for='hideImg1' aria-label='Show all images'>Show All</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
    <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
    <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
    <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  </div>
</div>

Images with Scroll Layout

Images with scroll layout typically refers to a design technique where images are displayed in a horizontally or vertically scrolling manner within a container. This approach is often used when you have a collection of images that may exceed the available space on the screen, and you want users to be able to scroll through them.

<!--[ Images with Scroll Layout (Style 1) ]-->
<div class='glImg'>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
</div>

Tips!
You can change the height of the scroll image by adding one of the classnames h150, h200, h250, to the element div.galWrp.

This scroll layout style will only be active in mobile view. Please try opening this page on your mobile device.

<!--[ Images with Scroll Layout (Style 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
  <img alt='image_alt' title='image_title' width='1280' height='720' src='image_link'/>
</div>

Lazyload Image

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. This feature uses @aFarkas/lazysizes to lazyload images.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_alt' title='image_title' width='1280' height='720' data-src='image_link' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Warning!
Never manually lazyload the first image of the post. Doing so, results in unexpected behaviours.
It is also recommended to not to use it, instead you can enable Lazy load images in Blog settings. It will automatically lazyload your post images for you.

---

External Link

Notifies users if the link will lead to another site.

External Link

<a class='extL' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Alternative styles:

External Link

<a class='extL alt' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

External Link

<a class='extL sec' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

---

Button

Defines buttons that can be clicked by the user.

Button Text

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

Button Text

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

Download

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

Demo

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

---

Download Link

To provide information about downloaded files to users.

file_name.zip 200kb

<!--[ Download Box ]-->
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200KiB</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='link_here' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

---

Blockquote

Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.

Albert Einstein

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.

Bernard M. Baruch

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

---

Note Block

This feature serves to add important info, warning sentences or highlight sentences, there are two styles as shown below.

Info!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Warning!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

---

Alert

Similar to Note Block, the only difference is Alert has different style and has more variants:

Default A simple default alert - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

Outline A simple outline alert - Lorem ipsum dolor sit amet.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

---

Table

Using tables is a little more complicated in HTML, we recommend that you learn more about HTML tables before using them. The following is an example of a table with data:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

For table styles, you can add a classname to the .table element, including:

• cborder : border for the table container.
• bordered / noborder (choose one): table content border.
• clr / primary / warning / success / error : background heading table.
• stripped : table row stripped style.
• hovered : hover table row.
• mh100 / mhvh / mh200 / mh300 : max-height of the table in px (exception: mh100 sets height to 100%).
• sp5 / sp10 / sp20 : table content padding

stripped and hovered classnames were added in v3.1.0

---

Steps

Used to define steps for a guide.

1. step_1
2. step_2
3. step_3

<!--[ Steps ]-->
<ol class='steps'>
  <li>step_1</li>
  <li>step_2</li>
  <li>step_3</li>
</ol>

---

Code Block

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

<pre data-comment='.html' data-source='src/index.html'><code>escaped_code_here</code></pre>

code tag can be used to define inline code like this: escaped_code_here.

<code>escaped_code_here</code>

kbd tag can be used to define keyboard input like this: ⌘ + A.

<kbd>⌘ + A</kbd>

Inside <code> tag, a part can be marked by wrapping it with <mark> tag.

// mark examples
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// mark codes
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Message before'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Message after'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

Good to know:

• You need to use escaped code inside <code> elements, which means you have to replace all & to &, < to < and > to >.
• All the code blocks are automatically highlighted using @highlightjs/highlight.js, one of the popular libraries for code highlighting and a custom plugin. Copy button and lines number are also automatically appended.
• The library is loaded if and only if there is at-least one code block in the post to make sure we don't make extra requests.
• Inline codes are also highlighted.
• The library automatically detects the best language matched for your code and highlights it, but sometimes it may not detect the correct language.
• If the library is detecting the language incorrectly or you want to explicitly specify the code language, you can add a classname in the manner, the language name prefixed with language-, to the <code> element. For an example, if your code is written in javascript, you can add a classname language-js or language-javascript to the <code> element.

Multi-tabs Code Block

Used to group multiple code blocks together.

[HTML] escaped_code_here

[CSS] escaped_code_here

[JS] escaped_code_here

[JSON] escaped_code_here

<!--[ Multi-tabs Code Block Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>

  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] escaped_code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] escaped_code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] escaped_code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] escaped_code_here</code></pre>
</div>

---

Spoiler

Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button. Any content can be included in this widget.

Spoiler:

text_here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

---

Accordion

Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).

Title_here

text_here

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

FAQs in microdata

A Frequently Asked Question (FAQ) page contains a list of questions and answers pertaining to a particular topic. Properly marked up FAQ pages may be eligible to have a rich result on Search and an Action on the Google Assistant, which can help your site reach the right users.

<!--[ Accordion (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
</div>

Warning!
You cannot use this component at more than one places in a single post or page, consider grouping all of FAQs in a single component.

---

Table of Contents

The TOC (acronym of Table of Contents) helps users quickly navigate through the content of a webpage by providing direct links to different sections. This is especially useful for longer articles or pages with multiple distinct sections.

There are two ways to define a TOC.

Manual Table of Contents

Using Manual TOC is very complicated, you have to add a different id attribute in each heading tag and write it in content list.

Automatic Table of Contents

It is not very easy to use the Manual TOC, therefore we provide an Automatic TOC which looks for all the headings in the post and populate the content list in an organized manner.

Table of Contents

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
  <div class='aToc'></div>
</details>

---

Pagination (Baru)

Fitur ini digunakan untuk membagi satu post/halaman menjadi beberapa halaman (page), berguna untuk artikel yang sangat panjang agar lebih ringan dimuat dan lebih nyaman dibaca per bagian.

<!--[ Pagination ]-->
<div id='postSplit'>
  isi_halaman_1
  <!--nextpage-->
  isi_halaman_2
  <!--nextpage-->
  isi_halaman_3
  <!--nextpage-->
  isi_halaman_4
</div>

Good to know:

• Seluruh konten post/halaman wajib dibungkus dengan <div id='postSplit'>...</div>.
• Gunakan komentar HTML <!--nextpage--> untuk menandai batas antar halaman.
• Jumlah halaman tidak dibatasi, tinggal tambahkan <!--nextpage--> sebanyak yang dibutuhkan.
• Navigasi halaman (nomor halaman/tombol next-prev) akan muncul otomatis di bagian bawah konten.

Tips!
Demo penggunaan fitur ini bisa kamu lihat langsung pada artikel ini — seluruh isi cheat sheet di atas berada di halaman 1, sedangkan kumpulan variasi typography baru di bawah berada di halaman 2 (lihat navigasi paginasi di bawah).

---

Related Posts

Related posts are links or content suggestions on a webpage that connect to similar topics or articles, helping users discover more relevant information.

There are two ways to define this component.

Manual Related Posts

Manual related posts are selected and added by the author based on relevance, giving full control over the suggestions.

You may want to read this post :

• post_title
• post_title
• post_title

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>
  <ul>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
  </ul>
</div>

Automatic Related Posts

Automatic related posts are generated by algorithms using categories, saving time but with less precision.

Related Posts

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
  <div class='aRel'></div>
</details>

Good to know:

• This feature shows a list of posts having a particular label.
• To specify a label, add attribute data-label='My Label' to .aRel element.
• If attribute data-label is not specified or there is no post with label specified in data-label, then it will fallback to a random label from the current post if it is used in a post otherwise fallback to random label from the blog if used in page.
• It will filter out the post which is being viewed.
• To set the maximum number of posts, add attribute data-max-posts='6', where 6 is the number of maximum posts.

---

Lazy YouTube

Loads iframe once the play button is clicked otherwise shows the thumbnail image as placeholder which is lazyloaded using @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Defer YouTube

Defers iframe loading using @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' 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>

---

Essentials

This section does not provide you any components, but contains general HTML code snippet which can be used for different purposes.

Explicit Post Snippet

Post snippet shows a few lines of text content of post. It automatically selects texts from beginning of the post. If you would like to set a custom post snippet, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--more-->

Explicit Post Thumbnail

Blogger automatically selects the first image of the post as its thumbnail. If you would like to set custom post thumbnail which should not appear in the post, you can add the following code snippet at the beginning of the post. Struktur ini juga menjadi standar untuk gambar utama/thumbnail resmi Han Haoyu Platform (eager loading + fetchpriority tinggi + atribut lengkap untuk SEO):

<!--[ Explicitly sets post thumbnail ]-->
<!--[
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <figure itemscope itemtype='https://schema.org/ImageObject' class='separator' style='clear: both;'>
          <img height='1080' width='1920'
            data-original-height='1080' data-original-width='1920'
            alt='image_alt'
            title='image_title'
            class='responsive'
            decoding='async'
            loading='eager'
            fetchpriority='high'
            itemprop='contentUrl'
            style='max-width: 100%; height: auto;'
            src='image_src'/>
          <meta itemprop='width' content='1920'/>
          <meta itemprop='height' content='1080'/>
          <figcaption class='tr-caption' itemprop='caption'>image_caption</figcaption>
        </figure>
      </td>
    </tr>
  </tbody>
</table>
]-->

<!--more-->

You can set custom post snippet and post thumbnail by combining the above two code snippets as shown below:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <figure itemscope itemtype='https://schema.org/ImageObject' class='separator' style='clear: both;'>
          <img height='1080' width='1920'
            data-original-height='1080' data-original-width='1920'
            alt='image_alt'
            title='image_title'
            class='responsive'
            decoding='async'
            loading='eager'
            fetchpriority='high'
            itemprop='contentUrl'
            style='max-width: 100%; height: auto;'
            src='image_src'/>
          <meta itemprop='width' content='1920'/>
          <meta itemprop='height' content='1080'/>
          <figcaption class='tr-caption' itemprop='caption'>image_caption</figcaption>
        </figure>
      </td>
    </tr>
  </tbody>
</table>
]-->

<!--more-->

Header Subtitle

Adds subtitle next to header title in a particular post or page.

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>

---

Ringkasan Classname Umum

Berikut ringkasan classname yang sering dipakai berulang di berbagai komponen di atas, supaya lebih mudah diingat saat menulis HTML secara manual.

• extL / extL alt / extL sec — tautan eksternal beserta variasinya.
• button / button ln — tombol solid dan tombol outline.
• dlBox — kotak unduhan file lengkap dengan nama dan ukuran file.
• note / note wr — catatan biasa dan catatan peringatan.
• alert beserta variannya (info, warning, success, error, outline) — kotak peringatan dengan berbagai tingkat urgensi.
• table beserta modifier (sticky, bordered, stripped, hovered, dll) — pembungkus tabel responsif.
• steps — daftar langkah bernomor.
• sp / ac / ac alt — spoiler dan accordion (termasuk grup FAQ).
• psImg, grImg, glImg, hdImg, scImg — berbagai layout galeri gambar (grid, scroll, show all).
• lazyYt / videoYt — embed YouTube dengan lazyload atau defer loading.
• pRelate / aRel — related posts manual maupun otomatis.
• aToc — daftar isi otomatis.
• postSplit — pembungkus paginasi multi-halaman.

Tips!
Selalu cek dulu apakah classname sudah tersedia di CSS template sebelum dipakai di HTML, agar tampilan komponen tidak polos/tidak terformat.

20+ Variasi Kombinasi Typography Baru

Bagian ini (halaman 2, hasil dari fitur postSplit + <!--nextpage--> di atas) berisi kombinasi kreatif dari komponen-komponen yang sudah ada. Semua contoh di bawah hanya menggunakan classname yang sudah tersedia di template — tidak ada CSS/class baru yang ditambahkan.

1. Alert Sukses + Tombol Aksi

Selamat! Kombinasikan alert dengan tombol untuk call-to-action yang lebih menonjol. Lihat Selengkapnya

<div class='alert success outline'><b>Selamat!</b>
  Teks pendukung di sini.
  <br><br>
  <a class='button' href='link_here'>Lihat Selengkapnya</a>
</div>

2. Blockquote Bersumber Link Eksternal

Referensi kutipan bisa dipadukan dengan link sumber agar lebih kredibel.

Sumber Kutipan

<blockquote class='s2'>
  <p>kutipan_di_sini</p>
  <span><a class='extL sec' href='link_sumber' rel='nofollow noreferrer noopener' target='_blank'>nama_sumber</a></span>
</blockquote>

3. Accordion Berisi Steps

Cara Instalasi

1. Unduh file melalui Download Box.
2. Ekstrak file ZIP.
3. Ikuti panduan pada file README.

<details class='ac'>
  <summary>judul_here</summary>
  <div>
    <ol class='steps'>
      <li>step_1</li>
      <li>step_2</li>
      <li>step_3</li>
    </ol>
  </div>
</details>

4. Steps + Note Warning di Tiap Bagian Penting

1. Backup data sebelum memulai.

2. Warning!
   Jangan lewati langkah ini, resiko kehilangan data.

3. Selesai, lakukan verifikasi.

<ol class='steps'>
  <li>step_1</li>
  <li>
    <p class='note wr'><b>Warning!</b><br/>pesan_penting</p>
  </li>
  <li>step_3</li>
</ol>

5. Tabel Perbandingan dengan Warna Warning

Paket	Harga	Fitur
Basic	Gratis	Terbatas
Pro	Berbayar	Lengkap

<div class='table sticky bordered stripped hovered warning'>
  ...
</div>

6. Download Box Berjejer dalam Spoiler

Daftar Unduhan

panduan.pdf1.2MB

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Daftar Unduhan</summary>
  <div>
    <div class='dlBox'>...</div>
  </div>
</details>

7. Note Info dengan Kode Inline & Kbd

Info!
Tekan Ctrl + S lalu jalankan perintah npm run build untuk build ulang.

<p class='note'><b>Info!</b><br/>
  Tekan <kbd>Ctrl + S</kbd> lalu jalankan <code>npm run build</code>.
</p>

8. Grid Image + Caption Gabungan

Contoh gabungan grid image di dalam caption container.

<table class='tr-caption-container'>
  <tbody>
    <tr><td><div class='psImg grImg'>...</div></td></tr>
    <tr><td class='tr-caption'>caption_here</td></tr>
  </tbody>
</table>

9. Multi-tabs Berisi Code Block & Note

console.log("Cara 1");

Info!
Cara 2 lebih direkomendasikan untuk performa lebih baik.

<div class='tabs'>
  <input id='tabT2-1' type='radio' name='tabC2' checked>
  <input id='tabT2-2' type='radio' name='tabC2'>
  <div>
    <label for='tabT2-1' data-text='Cara 1'></label>
    <label for='tabT2-2' data-text='Cara 2'></label>
  </div>
  <div class='tabC-1'><pre><code>...</code></pre></div>
  <div class='tabC-2'><p class='note'>...</p></div>
</div>

10. Related Posts Manual di Dalam Alert

Baca Juga

• post_title
• post_title

<div class='alert outline'><b>Baca Juga</b>
  <div class='pRelate'><ul>...</ul></div>
</div>

11. Drop Cap + Text Indent Digabung

Han Haoyu Platform menggabungkan gaya drop cap klasik dengan text indent modern untuk paragraf pembuka yang lebih elegan.

<p class='pIndent'><span class='dropCap'>H</span>isi_paragraf</p>

12. Spoiler Berisi Tabel

Lihat Tabel Harga

Paket A

Rp0

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Lihat Tabel Harga</summary>
  <div><div class='table bordered stripped'>...</div></div>
</details>

13. Button Ganda: Solid + Outline Berdampingan

Download Demo

<a class='button' href='link_download'><i class='icon dl'></i>Download</a>
<a class='button ln' href='link_demo'><i class='icon demo'></i>Demo</a>

14. Lazy YouTube di Dalam Accordion

Tonton Video Panduan

<details class='ac alt'>
  <summary>Tonton Video Panduan</summary>
  <div><div class='lazyYt' data-embed='video_id'></div></div>
</details>

15. External Link Alternate di Dalam Note

Referensi!
Baca dokumentasi resmi di situs resmi.

<p class='note'><b>Referensi!</b><br/>
  Baca di <a class='extL alt' href='link' rel='nofollow noreferrer noopener' target='_blank'>situs resmi</a>.
</p>

16. Tabel dengan Padding Besar & Max Height

Baris contoh dengan padding lega.

<div class='table bordered mh200 sp20'>...</div>

17. Alert Error + Kode Inline untuk Debug

Error! Jika muncul pesan undefined is not a function, pastikan file JS sudah dimuat dengan benar.

<div class='alert error'><b>Error!</b>
  Jika muncul <code>pesan_error</code>, ...
</div>

18. Show All Image Diletakkan dalam Tabs

<div class='tabs'>
  <input id='tabT3-1' type='radio' name='tabC3' checked>
  <div><label for='tabT3-1' data-text='Galeri'></label></div>
  <div class='tabC-1'><div class='psImg grImg'>...</div></div>
</div>

19. Post Reference Digabung dengan External Link

Source:
www.example.com

<p class='pRef'>Source:<br> <a class='extL sec' href='link' rel='nofollow noreferrer noopener' target='_blank'>nama_sumber</a></p>

20. Alert Outline + Steps + Note (Kombinasi Penuh)

Panduan Cepat

1. Buka dashboard.
2. Pilih menu pengaturan.

3. Warning!
   Simpan perubahan sebelum keluar halaman.

<div class='alert info outline'><b>Panduan Cepat</b>
  <ol class='steps'>
    <li>step_1</li>
    <li>step_2</li>
    <li><p class='note wr'><b>Warning!</b><br/>pesan_here</p></li>
  </ol>
</div>

21. FAQ Accordion + Related Posts Otomatis

Pertanyaan pertama?

Jawaban singkat di sini.

Related Posts

<div class='showH'>...</div>
<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
  <div class='aRel' data-max-posts='3'></div>
</details>

22. Dukungan Platform + Tombol Trakteer (Penutup)

Terima kasih sudah membaca sampai akhir! Semua fitur di atas tersedia untuk seluruh partner resmi hanhaoyu.com. Dukung via Trakteer Hubungi Kami

<div class='alert success outline'><b>Terima kasih!</b>
  ...
  <a class='button' href='https://trakteer.id/hanhaoyu' rel='nofollow noreferrer noopener' target='_blank'>Dukung via Trakteer</a>
  <a class='button ln' href='https://hanhaoyu.com/contact' rel='nofollow noreferrer noopener' target='_blank'>Hubungi Kami</a>
</div>

Panduan Lengkap: Maksimalin Semua Fitur Biar Artikel Kamu Auto SEO Friendly

Oke, jadi di halaman ketiga ini kita bahas tuntas gimana caranya memaksimalkan semua komponen, typography, dan fitur bawaan Blogger yang udah dijelasin di halaman 1 dan 2, biar artikel kamu enak dibaca, gampang di-index Google, aman dari plagiarisme, dan nggak keliatan "bau AI". Simpan halaman ini sebagai cheat sheet wajib sebelum publish artikel ya, gaes!

Daftar Isi Panduan

---

1. Struktur Wajib Artikel (Urutan Baku)

Supaya artikel kamu rapi, konsisten, dan sesuai pedoman Google Search Central maupun platform besar lainnya, urutan penulisan di HTML View harus seperti ini dari atas ke bawah:

1. Post Snippet — deskripsi singkat tersembunyi untuk meta description otomatis.
2. Post Thumbnail — gambar utama/cover dalam komentar HTML (tidak tampil di body, tapi terbaca sistem).
3. <!--more--> — pemisah wajib supaya snippet & thumbnail nggak numpuk di halaman index/beranda.
4. Prolog / Pembuka — 1-2 paragraf hook pembuka sebelum masuk konten inti.
5. Gambar Utama Tampil (opsional, jika thumbnail juga mau tampil di body, gunakan loading='eager').
6. Table of Contents (TOC) otomatis — biar Google kasih sitelink & user gampang navigasi.
7. Isi Artikel — heading terstruktur (H2 → H3), paragraf, gambar, komponen pendukung.
8. Related Posts / Penutup / CTA — di bagian paling bawah.

Penting! Urutan Post Snippet → Thumbnail → <!--more--> → Prolog ini wajib dan nggak boleh dibolak-balik. Kalau salah urutan, Google bisa salah ambil snippet meta description, dan thumbnail juga bisa nggak kebaca dengan benar sama Blogger.

<!--[ 1. Post Snippet ]-->
<div hidden aria-hidden='true'>deskripsi_singkat_120-155_karakter</div>

<!--[ 2. Post Thumbnail ]-->
<!--[
<table class='tr-caption-container'>...</table>
]-->

<!--more-->

<!--[ 3. Prolog ]-->
<p>paragraf_pembuka_yang_menarik_perhatian</p>

<!--[ 4. TOC ]-->
<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Daftar Isi</summary>
  <div class='aToc'></div>
</details>

<!--[ 5. Isi Artikel ]-->
<h2>subjudul_pertama</h2>
<p>isi_paragraf</p>

---

2. Aturan Label, Judul & Deskripsi (Biar Auto Fast Index)

Ini bagian yang sering disepelekan padahal paling ngaruh ke SEO. Perhatiin baik-baik:

Bagian	Aturan	Contoh
Judul Postingan	Maks. 60 karakter, mengandung keyword utama di depan, hindari clickbait berlebihan.	Cara Membuat Budget dengan Google Sheets (Panduan Lengkap 2026)
Label / Kategori	Pakai 1–3 label saja, konsisten dengan topik utama blog, hindari label random/spam.	Tutorial, Google Sheets, Finansial
Meta Description (Post Snippet)	120–155 karakter, mengandung keyword utama, berisi manfaat/isi artikel, bukan spam kata kunci.	Panduan step-by-step membuat budget pribadi pakai Google Sheets, cocok untuk pemula.
Permalink (URL)	Pendek, mengandung keyword, huruf kecil semua, pisah pakai tanda strip (-).	/cara-membuat-budget-google-sheets.html
Alt & Title Gambar	Deskriptif, mengandung keyword relevan, tidak asal "image1.jpg" atau kosong.	alt="Tampilan dashboard budget di Google Sheets"

Tips!
Konsisten pakai label yang sama di setiap postingan bertema sama. Ini bikin Google gampang ngelompokin topik blog kamu jadi satu "cluster", yang efeknya bisa mempercepat proses index dan naikin topical authority blog kamu.

---

3. Maksimalin Fitur Gambar Biar 100% Ke-index

Supaya semua gambar di artikel kamu bisa dibaca sempurna sama Google Images dan bantu SEO On-Page, wajib penuhi checklist ini di setiap tag <img>:

1. alt — wajib diisi, deskriptif, mengandung keyword natural (bukan spam).
2. title — isi dengan judul/konteks gambar, membantu aksesibilitas & tooltip.
3. width & height — wajib diisi sesuai ukuran asli, mencegah Cumulative Layout Shift (CLS) yang bisa nurunin Core Web Vitals.
4. loading='eager' + fetchpriority='high' — khusus gambar pertama/utama saja.
5. loading='lazy' + decoding='async' — untuk gambar kedua dan seterusnya.
6. Bungkus dengan figure/figcaption atau table.tr-caption-container — supaya ada context caption yang dibaca Google.

<!--[ Checklist Wajib Setiap Gambar ]-->
<img
  alt='deskripsi_gambar_natural'
  title='judul_gambar'
  width='1920'
  height='1080'
  loading='lazy'
  decoding='async'
  src='link_gambar'/>

Krusial! Kalau kamu belum punya link gambar (misal masih draft atau nunggu asset dari tim), jangan biarkan atribut src kosong! Wajib isi sementara pakai gambar bawaan resmi hanhaoyu.com di bawah ini supaya nggak muncul broken image icon dan tetap aman untuk SEO:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghN-cN1BDfXgPYn33Gl3keUBzIJtPYB7bXuwYe1CGSMbeXkVIiHbsZODIV41ZnrctXATrHpIIYo1N_1-9wg_sWZwpwATzVkaOnjKtl5uSuuwYsQjn5_j5CiQrDTqdOvq-ig53ZpD-eh1jITZCzWnKgPigp5J3iUDSySaKhfYPvVJGo06rEXvXTqZmNzG4/s1600/Foto%20Muhammad%20Hayyu%20Hani%20Nuril%20-%20Han%20Haoyu%20-%20Thumbnail%20hanhaoyu.com.png

Sama halnya kalau ada atribut href yang masih kosong (misalnya di tombol Download, External Link, atau CTA), jangan dibiarin href='#' pas mau publish — nanti dianggap broken link sama Google. Ganti dulu ke halaman resmi hanhaoyu.com seperti https://hanhaoyu.com/contact atau https://trakteer.id/hanhaoyu sebagai placeholder sementara.

---

4. Panduan Tulisan Bawaan Editor Blogger (Toolbar Klasik)

Selain komponen custom di atas, jangan lupakan juga fitur dasar bawaan toolbar Blogger. Ini kode HTML-nya biar kamu bisa langsung salin tanpa perlu klik-klik toolbar satu-satu:

4.1 Heading

Contoh Heading 2 (Subjudul Utama)

Contoh Heading 3 (Sub-subjudul)

Contoh Heading 4 (Detail Poin)

<h2>Judul Bagian Utama</h2>
<h3>Sub Bagian</h3>
<h4>Detail Poin</h4>

Tips!
Selalu pakai H2 untuk section utama dan H3/H4 untuk sub-bagian. Jangan lompat dari H2 langsung ke H4 tanpa H3, ini bikin struktur heading "berantakan" di mata crawler Google.

4.2 Teks Tebal, Miring, Garis Bawah, Coret

Teks tebal (bold), teks miring (italic), teks garis bawah, teks coret (strikethrough).

<b>teks_tebal</b>
<i>teks_miring</i>
<u>teks_garis_bawah</u>
<s>teks_coret</s>

4.3 List Berurutan & Tidak Berurutan

• Poin pertama tanpa urutan
• Poin kedua tanpa urutan

1. Poin pertama berurutan
2. Poin kedua berurutan

<ul>
  <li>poin_1</li>
  <li>poin_2</li>
</ul>

<ol>
  <li>poin_1</li>
  <li>poin_2</li>
</ol>

4.4 Perataan Teks (Align)

Rata kiri (default)

Rata tengah

Rata kanan

Rata kanan-kiri (justify), cocok untuk paragraf panjang biar enak dibaca dan terlihat rapi di semua ukuran layar.

<p style='text-align:left;'>rata_kiri</p>
<p style='text-align:center;'>rata_tengah</p>
<p style='text-align:right;'>rata_kanan</p>
<p style='text-align:justify;'>rata_justify</p>

4.5 Link Standar (Bawaan Editor)

Contoh link internal biasa tanpa atribut tambahan (dipakai untuk link ke sesama postingan di blog sendiri).

<a href='link_internal_blog'>teks_link</a>

Warning!
Link internal (ke sesama halaman/postingan di blog kamu) tidak perlu pakai rel='nofollow noreferrer noopener' dan target='_blank'. Atribut itu khusus buat link eksternal (extL) aja, supaya Google tetap bisa "mengalirkan" SEO juice antar halaman blog kamu sendiri (internal linking).

4.6 Kutipan Bawaan (Quote Toolbar)

Ini adalah contoh kutipan bawaan toolbar Blogger tanpa styling custom tambahan.

<blockquote>isi_kutipan</blockquote>

---

5. Attention Point per Fitur (Biar Nggak Error/Rusak)

Nah ini bagian paling penting, gaes. Setiap komponen custom yang udah dibahas di halaman 1 & 2 punya "titik rawan" masing-masing kalau salah pakai. Perhatiin baik-baik list di bawah ini sebelum publish:

⚠️ Attention: Tabs (Style Scroll Image / Multi-tabs Code)

Setiap grup .tabs wajib punya name attribute yang unik dan berbeda di setiap grup radio button (misal tabC1, tabC2, dst). Kalau kamu pakai nama yang sama di dua grup tabs berbeda dalam satu artikel, klik salah satu tab bakal ikut ngubah tab di grup lain juga — ini bug klasik yang sering kejadian kalau asal copy-paste tanpa ganti ID/name.

⚠️ Attention: Show All Image (hdImg)

Atribut id pada <input class='inImg hidden'> dan for pada <label> harus sama persis dan unik per komponen. Kalau ada 2 komponen "Show All" dalam satu artikel pakai id yang sama, tombol "Show All" bakal ke-trigger bareng-bareng dan bikin tampilan berantakan.

⚠️ Attention: FAQ Accordion (FAQPage Microdata)

Komponen ini hanya boleh dipakai 1 kali per artikel/halaman. Kalau dipasang lebih dari sekali, microdata schema.org/FAQPage bakal konflik dan malah bisa bikin rich snippet FAQ kamu nggak muncul sama sekali di hasil pencarian Google, bukannya nambah malah ilang.

⚠️ Attention: Lazyload Manual Image

Jangan pernah pasang class='lazyload' di gambar pertama/utama artikel. Ini bikin Largest Contentful Paint (LCP) jadi lambat karena gambar utama harusnya dimuat secepat mungkin (loading='eager'), bukan ditunda. Cukup aktifkan fitur Lazy load images resmi dari Blog Settings, biar otomatis handle sisanya.

⚠️ Attention: External Link (extL)

Setiap link keluar dari blog (extL) wajib pakai rel='nofollow noreferrer noopener' target='_blank' lengkap. nofollow jaga reputasi SEO blog kamu dari link "beracun", noreferrer noopener jaga keamanan (mencegah tabsnabbing/security exploit) saat user klik ke situs lain.

⚠️ Attention: Automatic Related Posts (aRel)

Kalau data-label nggak diisi atau labelnya nggak ketemu, sistem bakal fallback random. Supaya related posts benar-benar relevan (bukan asal), selalu isi manual data-label='Nama_Label_Kamu' yang sama persis dengan label utama artikel.

Attention: Escaped Code di Code Block

Wajib escape karakter & → &, < → <, > → > di dalam tag <code>. Kalau lupa escape, kode yang kamu tampilkan bisa "kebaca" sebagai HTML asli sama browser dan bikin tampilan artikel rusak/error total.

---

6. Atribut Tambahan Blogger yang Sering Kelewat

Selain atribut custom di komponen di atas, ada juga beberapa atribut "bawaan" Blogger/HTML standar yang worth ditambahin biar makin maksimal dari sisi SEO & aksesibilitas:

Atribut	Fungsi	Dipasang di
rel='nofollow'	Cegah SEO juice mengalir ke situs eksternal yang tidak terpercaya.	Link keluar (<a>)
rel='sponsored'	Menandai link berbayar/afiliasi ke Google, wajib dipakai untuk link iklan/afiliasi.	Link afiliasi/iklan
rel='ugc'	Menandai link buatan user (misal dari kolom komentar).	Link user-generated content
aria-label	Deskripsi untuk pembaca layar (screen reader), tingkatkan aksesibilitas.	Tombol, ikon tanpa teks
itemprop / itemscope / itemtype	Microdata schema.org, bantu Google memahami konteks konten (rich snippet).	Gambar, FAQ, artikel
lang='id'	Menandai bahasa konten secara eksplisit di elemen tertentu jika beda bahasa dari default blog.	Paragraf/blok berbahasa asing
data-nosnippet	Mencegah bagian tertentu (misal boilerplate/disclaimer) ikut tampil di snippet Google.	Div/paragraf non-esensial

<!--[ Contoh kombinasi atribut lengkap ]-->
<a class='extL' href='link_afiliasi' rel='nofollow sponsored noreferrer noopener' target='_blank' aria-label='deskripsi_link_untuk_screen_reader'>teks_link</a>

---

7. Standar Penulisan Biar 0% Plagiarisme & 0% Terdeteksi AI

Fitur HTML doang nggak cukup kalau gaya nulisnya masih kaku atau template. Ini beberapa prinsip yang wajib kamu terapin biar tulisan kamu lolos Turnitin, lolos similarity checker, dan nggak "kebaca" AI detector kayak GPTZero atau sejenisnya:

1. Tulis dengan gaya sendiri — jangan translate langsung dari sumber lain atau parafrase kaku dari hasil AI generator. Pahami dulu materinya, baru tulis ulang pakai kata-kata sendiri.
2. Variasikan struktur kalimat — jangan semua kalimat panjangnya sama & pola subjek-predikat-objek monoton. Selingi kalimat pendek dan panjang biar ritme baca lebih natural, kayak orang ngobrol beneran.
3. Pakai Bahasa Indonesia baku sesuai KBBI untuk istilah formal, tapi boleh selipin istilah gaul/populer yang relevan biar nggak kaku dan tetap related sama pembaca kamu.
4. Hindari filler AI klasik seperti "Dalam era digital saat ini...", "Tidak dapat dipungkiri bahwa...", "Sebagai kesimpulan..." yang terlalu sering dipakai AI generator — ini pola yang gampang banget dikenalin AI detector.
5. Kasih insight personal / studi kasus nyata — pengalaman pribadi, opini, atau contoh konkret bikin tulisan otomatis lebih "manusiawi" dan susah dideteksi sebagai hasil generate AI.
6. Cek ulang manual sebelum publish — baca ulang dari awal sampai akhir, pastikan nyambung antar paragraf, nggak ada pengulangan ide yang sama berkali-kali.
7. Selalu cantumkan sumber kalau ambil data/statistik dari pihak lain, pakai komponen pRef (Post Reference) yang sudah disediakan di halaman 1.

Checklist Sebelum Publish

• Judul mengandung keyword utama, maks. 60 karakter
• Meta description (post snippet) terisi 120–155 karakter
• Label sudah sesuai kategori, maksimal 3
• Semua gambar punya alt, title, width, height
• Gambar pertama pakai eager, sisanya lazy
• Semua link kosong sudah diganti link resmi hanhaoyu.com
• Heading terstruktur rapi (H2 → H3 → H4)
• Sudah dibaca ulang manual, enak dibaca & nyambung
• Tidak ada kalimat template/filler khas AI
• TOC otomatis sudah terpasang

---

Penutup

Nah, itu dia panduan lengkap biar kamu bisa memaksimalkan setiap fitur, komponen, dan gaya penulisan di Han Haoyu Platform. Ikutin checklist di atas step-by-step, dan artikel kamu dijamin lebih rapi, SEO-friendly, cepat ke-index, sekaligus tetap enak dibaca sebagai tulisan manusia beneran — bukan template AI yang generik.

Butuh Bantuan Lebih Lanjut? Kalau masih ada yang bingung soal implementasi fitur ini di artikel kamu, jangan ragu buat kontak tim kami di hanhaoyu.com/contact. Dan kalau kamu ngerasa terbantu sama panduan & komponen di platform ini, dukung terus pengembangannya lewat Trakteer - trakteer.id/hanhaoyu ya. Setiap dukungan kamu berarti banget buat kami terus update fitur-fitur baru! 🚀