UI Component

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

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

— Example:

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

— Example:

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.

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.

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.

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

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.

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.

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.

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

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.

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

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:

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

— Standard

— Dot

— Line:

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

— Example:

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

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

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

— Default table

— Without column border

— With background color

— Add background color on mouseover

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:

This may be a little more complicated because it was written manually, but you can decide where to put this widget.

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

— Example:

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

— Example:

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:

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:

Unique links with added decorative elements for external links.

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

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

Some of the button styles available include:

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.

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.