|
Table of Contents
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,widthandheightattributes toimgtags.
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
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,glImgor 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 theimgtag. - To explicitly opt-out lightbox automatically containing the
altattribute contents, add attributedata-caption='false'to theimgtag.
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.
<!--[ 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><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 outlined ]-->
<a class='button ln' href='link_here'>link_title</a><!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a><!--[ 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.
<!--[ 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:
<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
A simple default alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
A simple outline alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
A simple info alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
A simple warning alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
A simple success alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
A simple error alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
A simple info alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
A simple warning alert - Lorem ipsum dolor sit amet.
</div><!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
A simple success alert - Lorem ipsum dolor sit amet.
</div><!--[ 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:mh100sets height to100%).sp5/sp10/sp20: table content padding
stripped and hovered classnames were added in v3.1.0
Steps
Used to define steps for a guide.
- step_1
- step_2
- 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 classnamelanguage-jsorlanguage-javascriptto 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.
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.
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.aRelelement. - If attribute
data-labelis not specified or there is no post with label specified indata-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='LINK IMAGE'/>
<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='LINK IMAGE'/>
<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.alertbeserta variannya (info,warning,success,error,outline) — kotak peringatan dengan berbagai tingkat urgensi.tablebeserta 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.