Components

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

Lazy Youtube Defer loading Youtube videos to improve blog performance

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

Post reference References, sources or footnotes at the end of the post

Post break Delimiter between 2 or more paragraphs

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

Table of content Outlines the chapters or sections names of the post

Tabs Organize content across different screens, data sets, and other interactions

Toggle show/hide Additional details that the user can open and close on demand

Accordion Toggle between hiding and showing large amount of content

Related posts (manual) Display related article recommendations in the middle of the post (manually)

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

Syntax highlighter Blocks for displaying code such as HTML, CSS or Javascript

Multitabs syntax Display multiple codes in a single block

Captions are short texts that appear under pictures in books, magazines, or newspapers that describe a picture or explain what the people in it are doing or saying.

— Example:

This is an example of a caption on the image

You can add it directly from the Blogger post editor or use this code:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='lazy full' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Text_here</td>
    </tr>
  </tbody>
</table>

Used to display a large (fullscreen) image preview when a thumbnail is clicked.

HTML code:

<div class='imBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img alt='image_title' class='lazy noscript' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <!--[ backup if javascript is disabled ]-->
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Displays an image gallery with a 2-column grid layout on desktop or on mobile view.

— Example:

HTML code:

<div class='psImg grImg'>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Displays image galleries in a 3-column grid layout on desktop and carousel format on mobile.

— Example:

HTML code:

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Hide some of the images in the gallery with the toggle function and show all images when the button is clicked.

— Example:

Show all

The button can only be clicked once, when all images are shown, it cannot be hidden again.

HTML code:

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <!--[ backup if javascript is disabled ]-->
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <!--[ backup if javascript is disabled ]-->
      <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 noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <!--[ backup if javascript is disabled ]-->
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <!--[ backup if javascript is disabled ]-->
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <!--[ backup if javascript is disabled ]-->
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <!--[ backup if javascript is disabled ]-->
      <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.

Images are the type of resource that consumes the most bandwidth compared to other assets, this will affect site performance, you may find your site's PageSpeed score down because of this.

The good news is that in Chrome version 76 onwards, the attribute loading='lazy' was introduced to solve this problem, this attribute can be used directly to load images slowly without adding Javascript.

But browsers that don't support the loading='lazy' attribute will simply ignore it. That's why Javascript lazy loading is still needed as an alternative.

Example of an image with defer loading:

Images with delayed loading will not be displayed when the user disables Javascript in their browser. On Blogger, thumbnails won't appear if all images on the page using defer loading.

HTML code:

<div class='separator'>
  <img class='lazy noscript' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <!--[ backup if javascript is disabled ]-->
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

It's important to replace the alt='image_title' attribute with a suitable title for your image.
Replace image url in data-src and src attributes in <noscript> parent tag.
<noscript> is important as an alternative in case the user has Javascript disabled in their browser, so the image field stays populated.
To make thumbnails appear on the homepage, leave one image without lazyLoad.

There are two methods that can be used to delay loading of Youtube videos, with the default script or defer.js from shinesenter.

— Using the theme's built-in features

This feature changes the video interface by replacing the default Youtube play button. The video will play with autoplay=1 function when the frame field is clicked.

HTML code:

<div class='lazyYt' data-embed='Youtube_videoID'>
  <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>

Replace Youtube_videoID with your preferred Youtube ID.
Video ID can be found on Youtube url, e.g. youtube.com/watch?v=OG7w0ILhqB4.

— Using defer.js

Basically this feature works to delay <iframe> loading. But not only youtube, all iframes in a page can be delayed loading including Blogger comments.

HTML code:

<!--[ Defer iframe ]-->
<div class='videoYt noscript'>
  <iframe title='video_title' class='lazy noscript' data-src='https://www.youtube.com/embed/Youtube_videoID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Replace the src attribute with Youtube video url.
Replace title attribute value with Youtube video title.

Text indentation is used to set the first line of a paragraph to provide space between the margin and the text, this helps to visually separate paragraphs from each other.

No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.

No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.

HTML code:

<p class='pIndent'>text_paragraph</p>

A drop cap is a decorative element in the form of a large capital letter as the first paragraph of a chapter or document. The drop cap changes the size of the first letter of a paragraph so that it drops one or more lines down.

Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.

HTML code:

<p><span class='dropCap'>T</span>ext_paragraph</p>

The blockquote element defines "section [in the document] quoted from another source", indicating that the text enclosed is an expanded quote.

— Example:

Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.

HTML code:

<blockquote>text_paragraph</blockquote>

— Alternative style

Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.

HTML code:

<blockquote class='s-1'>text_paragraph</blockquote>

Used to highlight paragraphs as important or additional information or warnings regarding the previous paragraph/content.

— Information text

No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.

HTML code:

<p class='note'>text_paragraph</p>

— Warning text

Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.

HTML code:

<p class='note wr'>text_paragraph</p>

Used to provide footnotes/external links/reference information to readers regarding external sources cited in the document.

— Example:

Source:
Lipsum generator, loremipsum.io/

— Example with reference list:

Lorch 2008.
Falco 2007.
Rosenthal 1961.
O'Connor & Robertson 1999.
Rooney 2012, p. 39: "As a rigorous experimental physicist, he is sometimes credited with inventing the scientific method."
Ackerman (1978), p. 119.
Gaudah, 2012.

HTML code:

<p class='pRef'>post_reference</p>

// or

<div class='pRef'>post_reference</div>

Displayed as horizontal rules used to separate content [or define changes] or topic switches in HTML pages, available in 3 styles.

HTML code:

<hr>

HTML code:

<hr class='dot'>

HTML code:

<hr class='line'>

Write a list of guides or tutorials in a more decorative style.

— Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
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.
Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin.
Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis.

HTML code:

<ol class='step noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

A list of advantages and disadvantages related to the document/content written.

— pros:

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.

HTML code:

<b>pros:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

— cons:

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.

HTML code:

<b>cons:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

— Default table

Name	Position	Office	Age	Start date	Salary
John Doe	Front-end Developer	Jakarta	31	Januari 05, 2023	Rp 10.000.000
Jane Doe	Full-stack Developer	Jogjakarta	26	October 01, 2022	Rp 12.000.000

— Without column border

Name	Position	Office	Age	Start date	Salary
John Doe	Front-end Developer	Jakarta	31	Januari 05, 2023	Rp 10.000.000
Jane Doe	Full-stack Developer	Jogjakarta	26	October 01, 2022	Rp 12.000.000

— With background color

Name	Position	Office	Age	Start date	Salary
John Doe	Front-end Developer	Jakarta	31	Januari 05, 2023	Rp 10.000.000
Jane Doe	Full-stack Developer	Jogjakarta	26	October 01, 2022	Rp 12.000.000

— Add background color on mouseover

Name	Position	Office	Age	Start date	Salary
John Doe	Front-end Developer	Jakarta	31	Januari 05, 2023	Rp 10.000.000
Jane Doe	Full-stack Developer	Jogjakarta	26	October 01, 2022	Rp 12.000.000

HTML code:

<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 background color when the cursor hovers over the table row,
use class='table hoverTd' to display background color when the cursor hovers over the table cell,
combinations of class='table noLine withBg' or class='table noLine hoverBg' are allowed.

A table of contents that contains shortcut links to title or sub-heading tags in posts.

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

— Example:

Contents

HTML code:

<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.
— 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:
```
<li><a href='#main_heading'>Main Heading</a></li>
```
```
<li><a href='main_heading'>Main Heading</a></li>
```

Useful for dividing pages into tabs, you can add a maximum of 5 tabs.

— Example:

Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.

Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.

HTML code:

<!--[ 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='Chapt 1'></label>
  <label for='fTabs-2' data-text='Chapt 2'></label>
  <label for='fTabs-3' data-text='Chapt 3'></label>
  <label for='fTabs-4' data-text='Chapt 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>

Used to create interactive widgets that can be hidden or displayed by the user on demand.

— Example:

Spoiler [open]

Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers. Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.

HTML code:

<details class='sp notranslate'>
  <summary>Spoiler</summary>
  <p>text_paragraph</p>
</details>

Usually used to write down a list of questions from users and their answers, better known as FAQ (Frequently Asked Questions).

The lines that can be added are unlimited, in fact you can add more than 100 lines.

— Example:

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.

HTML code:

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

Contains lists of articles related to the content.

This component is written manually and doesn't automatically appear in every post, the advantage is that this widget can be placed in any paragraph you want.

— Example:

You may want to read this post:

HTML code:

<div class='pRelate notranslate'>
  <!--[ Related title ]-->
  <b>You may want to read this post:</b>
  <ul>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
  </ul>
</div>

Unique links with added decorative elements for external links.

— New! link:

get the latest version

— Fee! link:

Download here

— External link:

Buy legal version

HTML code:

<a class='new' href='your_url'>link_name</a>

<a class='free' href='your_url'>link_name</a>

<a class='extL' href='your_url'>link_name</a>

The content supporting file download link card contains information on the file name, type, size, or alternative download link.

— Text heading

file_name.zip

HTML code:

<div class='dlBox'>
  <span class='f' data-text='Download'></span>
  <div class='d'>
    <span class='m' data-text='200 Mb'>file_name.zip</span>

    <!--[ replace href='' attribute with your url ]-->
    <a class='button' aria-label='Download' href='your_url' rel='noreferrer' target='_blank'>
      <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
    </a>
  </div>
</div>

— Icon heading

file_name.zip

HTML code:

<div class='dlBox'>
  <span class='f'></span>
    <svg class='line' viewBox='0 0 24 24'><path d='M7 7H16.75C18.8567 7 19.91 7 20.6667 7.50559C20.9943 7.72447 21.2755 8.00572 21.4944 8.33329C22 9.08996 22 10.1433 22 12.25C22 15.7612 22 17.5167 21.1573 18.7779C20.7926 19.3238 20.3238 19.7926 19.7779 20.1573C18.5167 21 16.7612 21 13.25 21H12C7.28595 21 4.92893 21 3.46447 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38032 4.53806C2.65142 4.05227 3.05227 3.65142 3.53806 3.38032C4.21956 3 5.1278 3 6.94427 3C8.10802 3 8.6899 3 9.19926 3.19101C10.3622 3.62712 10.8418 4.68358 11.3666 5.73313L12 7'/></svg>
  <div class='d'>
    <span class='m' data-text='200 Mb'>file_name.zip</span>

    <!--[ replace href='' attribute with your url ]-->
    <a class='button' Download href='your_url' rel='noreferrer' target='_blank'>
      <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
    </a>
  </div>
</div>

— Text with icon heading

file_name.zip

HTML code:

<div class='dlBox'>
  <span class='f' data-text='Download'></span>
    <svg class='line' viewBox='0 0 24 24'><path d='M7 7H16.75C18.8567 7 19.91 7 20.6667 7.50559C20.9943 7.72447 21.2755 8.00572 21.4944 8.33329C22 9.08996 22 10.1433 22 12.25C22 15.7612 22 17.5167 21.1573 18.7779C20.7926 19.3238 20.3238 19.7926 19.7779 20.1573C18.5167 21 16.7612 21 13.25 21H12C7.28595 21 4.92893 21 3.46447 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38032 4.53806C2.65142 4.05227 3.05227 3.65142 3.53806 3.38032C4.21956 3 5.1278 3 6.94427 3C8.10802 3 8.6899 3 9.19926 3.19101C10.3622 3.62712 10.8418 4.68358 11.3666 5.73313L12 7'/></svg>
  <div class='d'>
    <span class='m' data-text='200 Mb'>file_name.zip</span>

    <!--[ replace href='' attribute with your url ]-->
    <a class='button' Download href='your_url' rel='noreferrer' target='_blank'>
      <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
    </a>
  </div>
</div>

— Text with image heading

file_name.zip

HTML code:

<div class='dlBox'>
  <span class='f' data-text='Download'></span>
    <span class='i lazy' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></span>
  <div class='d'>
    <span class='m' data-text='200 Mb'>file_name.zip</span>

    <!--[ replace href='' attribute with your url ]-->
    <a class='button' Download href='your_url' rel='noreferrer' target='_blank'>
      <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
    </a>
  </div>
</div>

— Text with icon heading and alternatif link

file_name.zip

via Dropbox (alternative) via Mega.nz (alternative)

HTML code:

<div class='dlBox'>
  <span class='f' data-text='Download'></span>
  <div class='d'>
    <span class='m' data-text='200 Mb'>file_name.zip</span>

    <div class='l'>
      <!--[ replace href='' attribute with your url ]-->
      <a class='button' aria-label='Download' href='your_url' rel='noreferrer' target='_blank'></a>
      <details>
        <summary class='n fc'>
          <span class='button'>
            <svg class='line' viewBox='0 0 24 24'><path d='M6 9L11.2929 14.2929C11.6262 14.6262 11.7929 14.7929 12 14.7929C12.2071 14.7929 12.3738 14.6262 12.7071 14.2929L18 9'/></svg>
          </span>
        </summary>
        <div class='b cInherit u'>
          <a aria-label='Download' href='your_url' rel='noreferrer' target='_blank'>via Dropbox (alternative)</a>
          <a aria-label='Download' href='your_url' rel='noreferrer' target='_blank'>via Mega.nz (alternative)</a>
        </div>
      </details>
    </div>
  </div>
</div>

rel='noreferrer' and target='_blank' are mandatory when using external links, otherwise remove them if you redirect the download button to another page on your site. Read the site optimization guide

*The links above is just a sample, it will not go to any page when clicked.

Some of the button styles available include:

— Standard button

Button

HTML code:

<a class='button' href='your_url'>Button</a>

— Outline style

Button

HTML code:

<a class='button ln' href='your_url'>Button</a>

— Without background

Button

HTML code:

<a class='button sc' href='your_url'>Button</a>

— With svg icon

Download
Download
Download

HTML code:

<a class='button' href='your_url'>
  <!--[ icon ]-->
  <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
  <span>Button</span>
</a>

— Two buttons in one row

Info Download

HTML code:

<div class='btnF'>
  <a class='button ln' href='your_url'>
    <svg class='line' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='16' y2='12'/><line x1='12' x2='12.01' y1='8' y2='8'/></svg>
    <span>Info</span>
  </a>
  <a class='button' href='your_url'>
    <!--[ icon ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12'/><path d='M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5'></path></svg>
    <span>Download</span>
  </a>
</div>

Used to write programming code such as HTML, CSS, JavaScript, etc.

— Standard

// your code is here

— .html

// your code is here

— .css;

// your code is here

— .js

// your code is here

— Custom title

// your code is here

The color code in the syntax is written manually, we don't provide an automatic colored syntax feature.

HTML code:

<!--[ 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: class='pre html', class='pre css', class='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.

Write syntax code with tab function to reduce content length.

— Example:

// your HTML code is here

// your CSS code is here

// your JavaScript code is here

The copy code to clipboard function doesn't work in Multitab syntax.

HTML code:

<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='Javascript'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>code_here</pre>
  </div>
  <div class='preC-2'>
    <pre>code_here</pre>
  </div>
  <div class='preC-3'>
    <pre>code_here</pre>
  </div>
</div>

The id='...' and for='...' attributes must be unique and have the same value, the name='...' attribute defines the widget group and must have the same value as well.
Replace all the attribute values above if you want to add two syntax tabs in one page.
checked is required to determine the first tab to appear.
Don't switch to Compose Mode/Writing view while using this, otherwise this widget will not work properly.