Beranda

UI Components

Table of Contents

Automatic

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>

Code Block

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

Multi Code Block

[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

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

Style 1

Title_here

text_here


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

Style 2

Title_here

text_here


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

Style 3

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>

FAQ

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here


  <!--[ 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' 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>
  </div>

Related Posts

Manual Related Post

You may want to read this 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>

Automatic Related Posts

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>

Defer YouTube


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

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:


  <!--[ Explicitly sets post thumbnail ]-->
  <!--[
    <div class='separator'><img src='image_src'/></div>
  ]-->
  
  <!--more-->

Steps

  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>

Table

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'>
    <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.
  • mh100 / mhvh / mh200 / mh300 : max-height of the table.
  • sp5 / sp10 / sp20 : table content padding

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

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

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>

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>

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

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

Post Reference Paragraph

Source:
www.example.com


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