Docs

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
Post Image
Blockquote
Note Block
Alert
Table
Tabel of Content
Syntax Highlighter
Collapse
Accordion
External Links
Button Link
Download Link
Lazy Youtube
Post Reference
Header Subtitle
Related Post

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.

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

iCenter 12 December 2023 at 11:39

Delete Comment …

Gello
1. iCenter 12 December 2023 at 11:40
  
  Delete Comment …
  
  Code
iCenter 12 December 2023 at 11:41

Delete Comment …

Test

សាឡាមកម្ពុជា

Search Suggest

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

You may like these posts

3 comments

Prayer Times

Salam Cambodia

Cookie Consent

Oops!