All UI Component and Typhography

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.

In post editor view, click icon at the bottom right of the title,
Two options will appear: HTML view and Writing view
Select '' HTML View.

Table of Content

Paragraph

Use the p tag to add a paragraph to the article.

<!-- paragraph -->
<p>example paragraph, lorem ipsum dolor sit amet consectetur adipisicing elit.</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.

<p class="pIndent">example paragraph, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraph with Drop Cap

A large capital letter used as decorative element in the first paragraph, the size is usually two lines or more.

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

<p><span class="dropCap">E</span>xample paragraph, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Post Image

Image post format:

Automatic image captions and lightboxes

Standard Image (no lightbox).

<img alt="image_title" class="full" src="image_link" />

Adding className full to the img tag functions to remove the margin between the image and the screen, only works for mobile displays.

Image with lightbox + caption (from img tag alt attribute).

<div class="lbx">
  <img alt="image_title" class="full c sz" src="image_link"/>
</div>

Information:

All images in posts will automatically have a lightbox function provided that the parentElement has one of the classNames lbx, separator, psImg, btImg, galWrp. Or selector : .pS .tr-caption-container td > a, .pS .tr-caption-container td > img. And the img tag doesn't have a className n.
Adding the c class to the img tag functions to display the img alt attribute value as a lightbox caption.
And adding the sz class to the img tag functions to change the image size when the lightbox is loaded or the image is clicked.

Images with captions in table tags.

description - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae numquam quaerat voluptatibus.

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <img alt="image_title" class="full" src="image_link"/>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">image_caption</td>
    </tr>
  </tbody>
</table>

Images with Grid Layout

<!--[ Grid Image ]-->
<div class="psImg grImg">
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
</div>

Images with show all function

Show All

<!--[ Show All Image ]-->
<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>

  <div class="btImg">
    <img alt="image_title" src="image_link"/>

    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all image">tampilkan semua</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <img alt="image_title" src="image_link"/>
    <img alt="image_title" src="image_link"/>
    <img alt="image_title" src="image_link"/>
    <img alt="image_title" src="image_link"/>
  </div>
</div>

The 'Show All' function can only be clicked once, images cannot be hidden again once you have activated it.

Images with Scroll Layout

Scroll Layout - Type 1.

<!--[ Scroll Image Type 1]-->
<div class="galWrp">
  <img alt="lightbox image without caption" src="image_link"/>
  <img class="c" alt="image lightbox with caption" src="image_link"/>
  <img class="c sz" alt="lightbox by resizing the image" src="image_link"/>
  <img class="c sz n" alt="image without lightbox" src="image_link"/>
  <img class="c sz" alt="image_title" src="image_link"/>
</div>

You can change the height of the Scroll Image by adding one of the classNames: h150 / h200 / h250, in the element div.galWrp.

Scroll Layout - Type 2.

Added a scroll function to images that will only be active in mobile view.

<!--[ Scroll Image Type 2]-->
<div class="psImg scImg scrlH">
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src="image_link"/>
  <img alt="image_title" src='image_link"/>
</div>

lazyLoad Images

This feature is useful for increasing PageSpeed blog scores, image loading will be delayed until the user scrolls the page to that image area.

<!-- Lazy Image -->
<img class="lazy" alt="image_title" data-src="image_link" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

Information:

className lazy is the name of the class as the lazyLoad element selector.
The value of attributeName data-src, is the source or link of the image.
If you use lazy Load, the value of the Name attribute source becomes optional. because later the value will automatically be changed with attributeName data-src

All images in the post will automatically be lazyLoad, except for the first image. So you can write the img tag as usual. And if you don't want to use lazyLoad, you can add className nolazy to the img tag.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <span>Anonymous</span>
</blockquote>

If you are bored with the standard blockquote appearance, we provide 2 other styles. Add className: s1 or s2 to the blockquote tag.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

Note Block

Used to add important information, warning sentences or highlight sentences. There are two styles that you can try:

Info!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum rem quisquam deserunt quaerat, labore ipsum ab. Vel perspiciatis distinctio cumque.

<p class="note"><b>Info!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad iusto totam animi?
</p>

In different colors:

Warning!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur veniam nemo blanditiis laboriosam dolorum amet aliquid? Minus reiciendis voluptatem possimus.

<p class="note wr"><b>Warning!</b><br/>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod atque sequi dolorem.
</p>

Alert

Same as Note Block, only Alert has a more varied style:

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

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

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

<!-- alert outline -->
<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.

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

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

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

<!-- alert variant with solid background -->
<div class="alert info"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<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.

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

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

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

<!-- alert variant with outline -->
<div class="alert info outline"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning outline"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success outline"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<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
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

<div class="table">
  <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 tag, 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 : maxHeight of the table.
sticky : sticky table header.
sp5 / sp10 / sp20 : table content padding.

Tabel of Content

This feature will display all the heading tags in your post (three levels h2 - h4), so make sure you write the heading tags sequentially. See example on this page.

Code to determine the location of the ToC widget:

<details class="sp toc">
  <summary>Tabel of Content</summary>
  <div class="toC" id="toContent"></div>
</details>

Add className s1 to the details tag to change the disc list style

Add a number or symbol/marker to the Heading:

<!-- before -->
<h2>Title_here</h2>

<!-- after adding -->
<h2 class="h" data-text="1. ">Title_here</h2>

Information:

className for heading numbering.
change the Name data-text attribute value to change the number or symbol.

To hide headings in the Table of Content, you can add className n to the heading tag.

Syntax Highlighter

Used to define lines of computer code such as (HTML, CSS, Javascript, etc.) in posts. Here's the code format:

<div class="pre notranslate" data-text="html" data-tx="deskripsi">
  <pre>code_here</pre>
</div>

Information:

defines the code format
as title or code description
parsed code.

To create a post code / Syntax Highlighter, you can easily use HLJS Tools.

MultiTabs Syntax Highlighter

[HTML] code_here

[CSS] code_here

[JS] code_here

<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked />
  <input class="prei hidden" id="preT-2" type="radio" name="preTab" />
  <input class="prei hidden" id="preT-3" type="radio" name="preTab" />
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>

  <!--[ Content ]-->
  <div class="preC-1">
    <pre>[HTML] code_here</pre>
  </div>
  <div class="preC-2">
    <pre>[CSS] code_here</pre>
  </div>
  <div class="preC-3">
    <pre>[JS] code_here</pre>
  </div>
</div>

Information:

make sure the Name id and for attributes have the same value, and one page cannot have more than one ID.
attributeName checked defines the first tab that appears as the default.
change the value of the attributeName data-text according to the tab title.
className must have the name format C-* (* = sequence number).
parsed code.

Collapse

Used to create interactive widgets that users can open and close on demand. By default this widget is closed, and will display its contents when the user presses the command button.

Spoiler:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quo aliquid praesentium est dolores molestias. Nobis porro corrupti necessitatibus ipsa.

<details class='sp'>
  <summary>title_here</summary>
  <p>content_here</p>
</details>

Information:

as content title collapse.
You can use any content. and make sure the code is under the tagName summary.

To make Collapse content open by default, you can add the attributeName open to the details tag.

Accordion

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

Accordion_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi vero dolorem nesciunt eum ipsa corrupti recusandae provident aspernatur debitis unde.

<details class="ac">
  <summary>title_here</summary>
  <div>
    <p>content_here</p>
  </div>
</details>

Accordion_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, delectus! Vel, voluptatem aut atque placeat illo velit fugiat delectus possimus.

Add className alt to the details tag for an alternative summary icon like the accordion example above. And to make the accordion open by default, you can add the attributeName open to the details tag.

If you want to group or create a group accordion, you can wrap the accordion content in the div.showH element container. Examples are as below:

Accordion_first_title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos illum officiis blanditiis quam maiores totam.

Accordion_second_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non culpa voluptates blanditiis, libero temporibus nihil.

Accordion_third_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit possimus dicta officia exercitationem sequi veritatis.

Accordion_fourth_title (alt)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta pariatur mollitia officia sint nihil expedita.

<div class="showH">
  <!--[ Accordion ]-->
  <details class="ac">
    <summary>title_here</summary>
    <div>
      <p>content_here</p>
    </div>
  </details>

  <!--[ More accordions here ]-->
  <!-- <details class="ac"> ... </details>-->
</div>

External Links

Notifies the user if the link will lead to another site or page.

Example_External_Link

<a class="extL" href="link_here" rel="noreferrer" target="_blank">link_title</a>

Button Link

Defines buttons that can be clicked by the user.

Button

<a class="button" href="link_here">link_title</a>

Alternative styles:

Button

<a class="button ln" href="link_here">link_title</a>

With icon:

Download
Demo

<a class="button" href="link_here"><i class="icon dl"></i>link_title</a>
<a class="button" href="link_here"><i class="icon demo"></i>link_title</a>

Two buttons in one row:

Demo Download

<div class="btnF">
  <a class="button ln" href="link_here">Demo</a>
  <a class="button" href="link_here"><i class="icon dl"></i>Download</a>
</div>

Download Link

To provide information about downloaded files to users.

file_name.zip 200kb

<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">200kb</span>
  </div>

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

Lazy Youtube

Useful for delaying the loading of Youtube videos after the user has scrolled the page.

<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="Youtube_video_ID">
  <div class="play">
    <svg viewbox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon> <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

Defer iframe loading with the defer.js function:

<!--[ Lazysize iframe ]-->
<div class="videoYt">
  <iframe title="Lazy Iframe" class="lazy" data-src="url_embed_iframe" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Post Reference

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

Source:
https://www.example.com

<p class="pRef">Source:<br> https://www.example.com</p>

Header Subtitle

To change the Subtitle Header on a particular post or page.

<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"Typography"}
/*]]>*/</style>

You may want to read this post :

How to Replace Blogger Comments
Replace or Add New Fonts
Guide to Adding Tab Function in Post

<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>

Auto Related Post

<details class="sp toc s1" open="">
<summary>Related Post</summary>
<div class="toC" id="aRel" data-label="Docs" data-mrst="7" data-sby="published"></div>
</details>

Information:

title of related post
(optional): label name for related posts, the default value is random from the label of that post.
(optional): maximum posts to be displayed, default value is 6.
(optional): posts are ordered by date published, the default value is updated.

Sebagian besar fitur ini hanya bisa digunakan dalam mode 'Tampilan HTML', Anda juga tidak bisa berganti ke mode 'Tampilan menulis' selama menggunakan beberapa fitur ini.

Pada tampilan editor postingan, klik ikon yang ada pada bagian kanan bawah judul,
akan muncul 2 pilihan: Tampilan HTML dan Tampilan menulis,
pilih '' Tampilan HTML.

Daftar isi

Paragraf

Gunakan tag p untuk menambahkan paragraf pada artikel.

<!-- paragraph -->
<p>contoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraf dengan Text Indent

Fitur ini berfungsi untuk membuat sebuah baris pertama pada paragraf memiliki indentasi dengan nilai yang sudah ditentukan. Anda juga bisa menerapkannya ke beberapa paragraf lain.

<p class="pIndent">contoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraf dengan Drop Cap

Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf, ukuran biasanya adalah dua baris atau lebih.

Drop cap akan mengubah ukuran huruf pertama sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tarik visual.

<p><span class="dropCap">C</span>ontoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Gambar

Format postingan gambar:

Caption gambar dan lightbox otomatis

Gambar Standar (tanpa lightbox).

<img alt="judul_gambar" class="full" src="tautan_gambar" />

Menambahkan className full pada tag img berfungsi untuk menghilangkan jarak batas antara gambar dan layar, hanya berfungsi untuk tampilan seluler.

Gambar dengan lightbox + caption (dari atribut alt tag img).

<div class="lbx">
  <img alt="judul_gambar" class="full c sz" src="tautan_gambar"/>
</div>

Keterangan:

Semua gambar dalam postingan akan otomatis memiliki fungsi lightbox dengan catatan parentElement memiliki salah satu className lbx, separator, psImg, btImg, galWrp. Atau selector : .pS .tr-caption-container td > a, .pS .tr-caption-container td > img. Dan tag img tidak memiliki className n.
Menambahkan class c pada tag img berfungsi untuk menampilkan attribute value alt img sebagai caption lighbox.
Dan menambahkan class sz pada tag img berfungsi untuk mengubah ukuran gambar saat lighbox diload atau gambar diklik.

Gambar dengan caption dalam tag table.

descripksi - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae numquam quaerat voluptatibus.

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <img alt="judul_gambar" class="full" src="tautan_gambar"/>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">caption_gambar</td>
    </tr>
  </tbody>
</table>

Gambar dengan Tata Letak Grid

<!--[ Grid Image ]-->
<div class="psImg grImg">
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
</div>

Gambar dengan fungsi tampilkan semua

Tampilkan Semua

<!--[ Show All Image ]-->
<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>

  <div class="btImg">
    <img alt="judul_gambar" src="tautan_gambar"/>

    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all image">tampilkan semua</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <img alt="judul_gambar" src="tautan_gambar"/>
    <img alt="judul_gambar" src="tautan_gambar"/>
    <img alt="judul_gambar" src="tautan_gambar"/>
    <img alt="judul_gambar" src="tautan_gambar"/>
  </div>
</div>

Fungsi 'Show All' hanya bisa di klik satu kali, gambar tidak bisa disembunyikan kembali ketika Anda sudah mengaktifkannya.

Gambar dengan Tata Letak Gulir

Gulir Tata Letak - Tipe 1.

<!--[ Scroll Image Type 1]-->
<div class="galWrp">
  <img alt="lighbox gambar tanpa caption" src="tautan_gambar"/>
  <img class="c" alt="lighbox gambar dengan caption" src="tautan_gambar"/>
  <img class="c sz" alt="lighbox dengan mengubah ukuran gambar" src="tautan_gambar"/>
  <img class="c sz n" alt="gambar tanpa lighbox" src="tautan_gambar"/>
  <img class="c sz" alt="judul_gambar" src="tautan_gambar"/>
</div>

Anda bisa menggubah ukuran tinggi Scroll Image dengan menambahkan salah satu className: h150 / h200 / h250, di element div.galWrp.

Gulir Tata Letak - Tipe 2.

Menambahkan fungsi gulir pada gambar yang hanya akan aktif di tampilan seluler.

<!--[ Scroll Image Type 2]-->
<div class="psImg scImg scrlH">
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src="tautan_gambar"/>
  <img alt="judul_gambar" src='tautan_gambar"/>
</div>

lazyLoad Gambar

Fitur ini berguna untuk meningkatkan skor PageSpeed blog, pemuatan gambar akan ditunda sampai pengguna menggulir halaman ke area gambar tersebut.

<!-- Lazy Image -->
<img class="lazy" alt="judul_gambar" data-src="tautan_gambar" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

Keterangan:

className lazy adalah nama class sebagai selector element lazyLoad.
nilai dari attributeName data-src, merupakan source atau tautan dari gambar.
jika menggunakan lazyLoad, nilai dari attributeName src menjadi opsional. karena nanti otomatis akan diubah nilainya dengan attributeName data-src

Semua gambar dalam postingan akan otomatis menjadi lazyLoad, terkecuali untuk gambar yang pertama. Jadi anda bisa menulis tag img seperti biasa. Dan jika tidak ingin menggunakan lazyLoad, Anda bisa menambahkan className nolazy pada tag img.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <span>Anonymous</span>
</blockquote>

Jika Anda bosan dengan tampilan blockquote standar, kami memberikan 2 style lain. Tambahkan className: s1 atau s2 pada tag blockquote.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

Note Block

Digunakan untuk menambahkan info penting, kalimat warning atau kalimat sorotan. Ada dua style yang bisa anda coba:

Info!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum rem quisquam deserunt quaerat, labore ipsum ab. Vel perspiciatis distinctio cumque.

<p class="note"><b>Info!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad iusto totam animi?
</p>

Dengan warna berbeda:

Warning!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur veniam nemo blanditiis laboriosam dolorum amet aliquid? Minus reiciendis voluptatem possimus.

<p class="note wr"><b>Warning!</b><br/>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod atque sequi dolorem.
</p>

Alert

Sama seperti Note Block, hanya saja Alert memiiki style yang lebih bervariasi:

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

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

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

<!-- alert outline -->
<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.

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

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

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

<!-- alert variant with solid background -->
<div class="alert info"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<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.

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

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

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

<!-- alert variant with outline -->
<div class="alert info outline"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning outline"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success outline"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert error outline"><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Tabel

Penggunaan tabel sedikit lebih rumit pada HTML, kami merekomendasikan Anda untuk mempelajari lebih lanjut tentang table HTML sebelum menggunakannya. Berikut contoh tabel dengan 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
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

<div class="table">
  <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>

Untuk style tabel Anda bisa menambahkan className pada tag table, diataranya:

cborder : border untuk kontainer tabel.
bordered / noborder (pilih salah satu) : border konten tabel.
clr / primary / warning / success / error : background heading tabel.
stripped : style stripped baris tabel.
hovered : hover baris tabel.
mh100 / mhvh / mh200 / mh300 : maxHeight tabel.
sticky : sticky header tabel.
sp5 / sp10 / sp20 : padding konten tabel.

Tabel of Content

Fitur ini akan menampilkan semua tag heading dalam postingan Anda (tiga tingkat h2 - h4), untuk itu pastikan Anda menulis tag heading secara berurutan. Lihat contoh dihalaman ini.

Kode untuk menentukan letak widget ToC:

<details class="sp toc">
  <summary>Daftar isi</summary>
  <div class="toC" id="toContent"></div>
</details>

Tambahkan className s1 pada tag details untuk mengubah style list disc

Menambahkan nomor atau simbol/marker pada Heading:

<!-- sebelum -->
<h2>Title_here</h2>

<!-- setelah ditambahkan -->
<h2 class="h" data-text="1. ">Title_here</h2>

Keterangan:

className untuk penomoran heading.
ubah nilai attributeName data-text untung mengubah nomor atau simbol.

Untuk menyembunyikan heading di Table of Content, Anda bisa menambahkan className n pada tag heading.

Syntax Highlighter

Digunakan untuk mendefinisikan baris kode komputer seperti (HTML, CSS, Javascript, dll.) dalam postingan. Berikut format kodenya:

<div class="pre notranslate" data-text="html" data-tx="deskripsi">
  <pre>kode_disini</pre>
</div>

Keterangan:

mendefinisikan format kode
sebagai judul atau deskripsi kode
kode yang sudah diparse.

Untuk membuat post kode / Syntax Highlighter, Anda bisa dengan mudah menggunakan HLJS Tools.

MultiTabs Syntax Highlighter

[HTML] kode_disini

[CSS] kode_disini

[JS] kode_disini

<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked />
  <input class="prei hidden" id="preT-2" type="radio" name="preTab" />
  <input class="prei hidden" id="preT-3" type="radio" name="preTab" />
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>

  <!--[ Content ]-->
  <div class="preC-1">
    <pre>[HTML] kode_disini</pre>
  </div>
  <div class="preC-2">
    <pre>[CSS] kode_disini</pre>
  </div>
  <div class="preC-3">
    <pre>[JS] kode_disini</pre>
  </div>
</div>

Keterangan:

pastikan atrributeName id dan for memiliki nilai yang sama, dan satu halaman tidak boleh lebih dari satu ID.
attributeName checked mendefinisikan tab pertama yang muncul sebagai default.
ganti nilai attributName data-text sesuai judul tab.
className kontainer kode harus memiliki format nama C-* (* = nomor urut).
kode yang sudah diparse.

Collapse

Digunakan untuk membuat widget interaktif yang dapat dibuka dan tutup oleh pengguna sesuai permintaan. Secara default widget ini ditutup, dan akan menampilkan konten didalamnya ketika pengguna menekan tombol perintah.

Spoiler:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quo aliquid praesentium est dolores molestias. Nobis porro corrupti necessitatibus ipsa.

<details class='sp'>
  <summary>judul_disini</summary>
  <p>konten_disini</p>
</details>

Keterangan:

sebagai judul konten collapse.
kamu bisa menggunakan konten apapun. dan pastikan kode berada dibawah tagName summary.

Untuk membuat konten Collapse secara default terbuka, Anda bisa menambahkan attributeName open pada tag details.

Accordion

Menentukan konten tambahan yang dapat dibuka dan tutup pengguna sesuai permintaan dalam beberapa kelompok, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Accordion_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi vero dolorem nesciunt eum ipsa corrupti recusandae provident aspernatur debitis unde.

<details class="ac">
  <summary>judul_disini</summary>
  <div>
    <p>konten_disini</p>
  </div>
</details>

Accordion_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, delectus! Vel, voluptatem aut atque placeat illo velit fugiat delectus possimus.

Tambahkan className alt pada tag details untuk alternatif icon summary seperti contoh accordion diatas. Dan untuk membuat accordion secara default terbuka, Anda bisa menambahkan attributeName open pada tag details.

Jika ingin mengelompokkan atau membuat group accordion, Anda bisa membungkus konten accordion dengan kontainer element div.showH. Contohnya seperti dibawah ini:

Accordion_first_title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos illum officiis blanditiis quam maiores totam.

Accordion_second_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non culpa voluptates blanditiis, libero temporibus nihil.

Accordion_third_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit possimus dicta officia exercitationem sequi veritatis.

Accordion_fourth_title (alt)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta pariatur mollitia officia sint nihil expedita.

<div class="showH">
  <!--[ Accordion ]-->
  <details class="ac">
    <summary>judul_disini</summary>
    <div>
      <p>konten_disini</p>
    </div>
  </details>

  <!--[ More accordions here ]-->
  <!-- <details class="ac"> ... </details>-->
</div>

Tautan Eksternal

Memberitahu pengguna jika link tersebut akan menuju ke situs atau halaman lain.

Contoh_Tautan_Eksternal

<a class="extL" href="tautan_disini" rel="noreferrer" target="_blank">judul_tautan</a>

Tautan Tombol

Mendefinisikan tombol yang dapat di klik oleh pengguna.

Button

<a class="button" href="tautan_disini">judul_tautan</a>

Alternatif style:

Button

<a class="button ln" href="tautan_disini">judul_tautan</a>

Dengan icon:

Download
Demo

<a class="button" href="tautan_disini"><i class="icon dl"></i>judul_tautan</a>
<a class="button" href="tautan_disini"><i class="icon demo"></i>judul_tautan</a>

Dua tombol dalam satu baris:

Demo Download

<div class="btnF">
  <a class="button ln" href="tautan_disini">Demo</a>
  <a class="button" href="tautan_disini"><i class="icon dl"></i>Download</a>
</div>

Tautan Unduh

Untuk memberikan informasi berkas yang diunduh kepada pengguna.

file_name.zip 200kb

<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">200kb</span>
  </div>

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

Lazy Youtube

Berguna untuk menunda pemuatan video Youtube setelah pengguna menggulir halaman.

<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="Youtube_video_ID">
  <div class="play">
    <svg viewbox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon> <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

Menunda pemuatan iframe dengan fungsi defer.js:

<!--[ Lazysize iframe ]-->
<div class="videoYt">
  <iframe title="Lazy Iframe" class="lazy" data-src="url_embed_iframe" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Referensi Posting

Untuk menuliskan daftar referensi atau catatan kaki di bawah postingan.

Source:
https://www.example.com

<p class="pRef">Source:<br> https://www.example.com</p>

Header Subtitle

Untuk mengubah Subtitle Header pada postingan atau halaman tertentu.

<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"Typography"}
/*]]>*/</style>

You may want to read this post :

How to Replace Blogger Comments
Replace or Add New Fonts
Guide to Adding Tab Function in Post

<div class="pRelate">
  <!--[ Related title ]-->
  <b>Anda mungkin ingin membaca posting ini :</b>
  <ul>
    <li><a href="tautan_post">judul_post</a></li>
    <li><a href="tautan_post">judul_post</a></li>
    <li><a href="tautan_post">judul_post</a></li>
  </ul>
</div>

Auto Related Post

<details class="sp toc s1" open="">
  <summary>Related Post</summary>
  <div class="toC" id="aRel" data-label="Docs" data-mrst="7" data-sby="published"></div>
</details>

Keterangan:

judul related post
(opsional) : nama label untul related post, nilai defaultnya adalah random dari label postingan yang tersebut.
(opsional) : maksimal postingan yang akan ditampilkan, nilai defaultnya 6.
(opsional) : postingan diurutan berdasarkan tanggal published, nilai defaultnya updated.

2 comments

Comment message Media +

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.

Aruf Yudhistiar Fahza 11/26/2023 09:44:00 AM

Delete Comment …

test..
1. Aruf Yudhistiar Fahza 11/26/2023 09:45:00 AM
  
  Delete Comment …
  
  Aruf test reply..

Search Suggest

All UI Component and Typhography

Paragraph

Paragraph with Text Indent

Paragraph with Drop Cap

Post Image

Automatic image captions and lightboxes

Images with Grid Layout

Images with show all function

Images with Scroll Layout

lazyLoad Images

Blockquote

Note Block

Alert

Table

Tabel of Content

Syntax Highlighter

MultiTabs Syntax Highlighter

Collapse

Accordion

External Links

Button Link

Download Link

Lazy Youtube

Post Reference

Header Subtitle

Related Post

Auto Related Post

Paragraf

Paragraf dengan Text Indent

Paragraf dengan Drop Cap

Gambar

Caption gambar dan lightbox otomatis

Gambar dengan Tata Letak Grid

Gambar dengan fungsi tampilkan semua

Gambar dengan Tata Letak Gulir

lazyLoad Gambar

Blockquote

Note Block

Alert

Tabel

Tabel of Content

Syntax Highlighter

MultiTabs Syntax Highlighter

Collapse

Accordion

Tautan Eksternal

Tautan Tombol

Tautan Unduh

Lazy Youtube

Referensi Posting

Header Subtitle

Related Post

Auto Related Post

You may like these posts

2 comments

Cookie Consent

Oops!

AdBlock Detected