UI Component

Typographic format and UI component for posts, applies to all themes

The appearance may be slightly different for each theme, you can see in the demo of the theme you are currently using

Image with caption Adding a snippet to an image

Lightbox image Displays a large image preview

Grid images Display multiple images in a grid layout Scroll images Display multiple images with scroll function (only active on mobile view) Show/hide images Show multiple images while hiding/showing the rest Lazy load image Defer image loading until visible in viewport to improve site performance Related posts (manual) Display related article recommendations in the middle of the post (manually) Post break Delimiter between 2 or more paragraphs Text indent Specifies the indentation of the first line in a text-block. Drop cap Make the first letter in a paragraph larger than the rest of the text Blockquote A section that is quoted from another source Note block Sentences or paragraphs in special color blocks Guide list List of tutorials or post guides Pros/cons list Display content that lists the pros or cons of the product Tables Data tables display sets of data Tabs Organize content across different screens, data sets, and other interactions Table of content Outlines the chapters or sections names of the post Toggle show/hide Additional details that the user can open and close on demand Accordion Toggle between hiding and showing large amount of content Syntax highlighter Blocks for displaying code such as HTML, CSS or Javascript Multitabs syntax Display multiple codes in a single block Links Hyperlink, used to link from one page to another Download card Information box of additional files that users can download Button Buttons allow users to take actions, and make choices, with a single tap Lazy Youtube Defer loading Youtube videos to improve blog performance Post reference References, sources or footnotes at the end of the post

After clicking "Show all", the image cannot be hidden anymore

Show all

Writing format:

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Show all</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Make sure that the id='...' and for='...' attributes have the same value, in this example we're using for-hideImage
Don't switch to Compose Mode/Writing View while using this feature, otherwise this widget may not work properly.

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

2. Without colomn line

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

3. With background color

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

4. Add background color on hover

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

Writing format:

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>tille_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>

noWrap is used to disable newlines, meaning that the text in the column will be written on only one line.
w100 means the table will have a width of 100% or equal to the width of the post page, other options available are w90 for a width of 90% or remove this className for an auto-adjustable width.
Add class='table noLine' to remove the vertical line in the column,
use class='table withBg' to add background color to row,
use class='table hoverBg' to display the background color when the cursor hovers over the table row,
combinations of class='table noLine withBg' or class='table noLine hoverBg' are allowed.

You can add up to a maximum of 4 tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae. Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.

Nullam non sapien sit amet ex consequat tempor ut nec risus. Phasellus non justo eget ex faucibus mattis. Vivamus vestibulum interdum consectetur. Morbi pulvinar ut lectus eu semper. Ut et sagittis leo. Pellentesque vitae posuere orci. Praesent sit amet egestas tortor, vel consectetur nulla. Duis feugiat consectetur nisl. Nunc interdum a sapien sed commodo. Maecenas porttitor dictum mi quis luctus. Vestibulum turpis quam, laoreet in dignissim dapibus, ullamcorper in tortor. Morbi malesuada massa sapien, sagittis ullamcorper quam pharetra ultrices.

Donec laoreet fringilla mattis. Proin vitae scelerisque neque, nec imperdiet sem. Aliquam pellentesque euismod eros, eget pharetra est vehicula eu. Nulla ligula orci, pellentesque sed quam vel, posuere sodales neque. Nulla turpis justo, lobortis vel imperdiet ut, viverra id nunc. Aliquam ipsum lectus, rutrum vel blandit sed, commodo ut ligula. Ut in condimentum eros. Duis in elit ultricies, molestie metus ac, dapibus augue. Pellentesque eu feugiat risus, sed rhoncus urna. Quisque viverra tellus nec placerat ullamcorper. Sed nec volutpat est, at pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu ultrices metus. Morbi placerat tempus nibh nec ultricies.

Writing format:

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Chapter 1'></label>
  <label for='fTabs-2' data-text='Chapter 2'></label>
  <label for='fTabs-3' data-text='Chapter 3'></label>
  <label for='fTabs-3' data-text='Chapter 4'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    content_here
  </div>
</div>

In some themes the Table of Content can be written semi-automatically

Contents

Writing format:

<details class='sp toc' open=''>
  <summary>Contents</summary>
  <div class='toC'>
    <ol>
      <li><a href='#your_url'>heading_1</a></li>
      <li><a href='#your_url'>heading_2</a></li>
      <li>
        <a href='#your_url'>heading_3</a>
        <ol>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

open='' is used to keep the widget open, remove this attribute to make the widget close when the page is loaded.
Replace the text 'Contents' to change the widget title

This may be a little more complicated because it was written manually, but you can decide where to put this widget, follow the steps below:

Adding the ID attribute:
The heading tags in posts are marked with <h2>, <h3>, <h4>, or in Compose Mode/Writing Mode select Title, Subtitle, Small Title. Add a special ID in each heading tag found.
Here's an example of the correct writing:
```
<h2>Main Heading</h2>
```
```
<h2 id='main_heading'>Main Heading</h2>
```
Each ID must be unique, repetition of the same ID is prohibited.
Linking to the heading tags:
Add # before each ID you want to call, for example: a heading tag with ID id='main_heading' can be called with href='#main_heading'.
Example of correct writing:
```
<li><a href='#main_heading'>Main Heading</a></li>
```
```
<li><a href='main_heading'>Main Heading</a></li>
```

The rows are unlimited, you can even add up to >100 rows

Mauris vel diam pellentesque lorem lacinia luctus

Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Donec in massa vitae quam lobortis cursus

Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

Ut sodales lobortis sollicitudin

Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Suspendisse imperdiet nibh eget odio posuere maximus

Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae. Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.

Writing format:

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ line 1 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 2 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 3 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 4 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
</div>

Standard

<pre>Your_code_is_here</pre>

.html

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

.css

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
a:hover{opacity:.9;transition:opacity .1s}

.js

function downloadJSAtOnload() {
    var d = document.createElement('script');
    d.src = 'https://www.googletagmanager.com/gtag/js?id=00000', document.body.appendChild(d)
}
window.addEventListener ? window.addEventListener('load', downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent('onload', downloadJSAtOnload) : window.onload = downloadJSAtOnload;
window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '00000');

Custom

'IntersectionObserver'in window||document.write('<script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'><\/script>');

The color code in the syntax is written manually, we do not provide an automatic colored syntax feature.

Writing format:

<!--[ Change classname to html, css, or js ]-->
<div class='pre'>
  <pre>code_here</pre>
</div>

Replace class='pre' with class='pre html' to define .html code format, there are 3 options available: pre html, pre css, pre js.
replace class='pre' with class='pre custom' data-text='custom_code' to write a custom title.
Add a style='' attribute in the <pre> tag to modify it, for example add style='white-space: pre-wrap;' to disable the side scrolling function, the long code will be written in a new line. Add style='max-height: 400px;' to define a maximum height of only 400px widget, or combine both to style='white-space: pre-wrap; max-height: 400px;'.
Manual color addition:
- <i class='red'>code</i>: for red,
- <i class='blue'>code</i>: for blue,
- <i class='geen'>code</i>: for green,
- <i class='gray'>code</i>: for gray,
- <i class='block'>code</i>: for blue block,
Or use the HLJS Parse tool to add color automatically.