UI Components and Typography

Co-authors: Nguyễn Khánh Tân

Most components require HTML View in the Blogger post editor. Avoid switching back to Writing view after adding advanced markup, because the editor may change or remove custom HTML.

1. In post editor view, click icon at the bottom right of the title.
2. Two options will appear: HTML view and Writing view.
3. Select HTML View.
4. Copy and paste the component code wherever you want to add it and make appropriate changes.

Headings and Section Titles

Use semantic headings to organize an article. Start the main sections of your post with h2, then use h3 through h6 for subsections in a logical hierarchy.

Warning!
In Plus UI, the post title is already rendered as an <h1> on individual post pages. Avoid adding another <h1> inside the post body. Although multiple <h1> elements are allowed in HTML, using one clear main heading per page is generally recommended for a well-structured, accessible document.

<!--[ Headings and Section Titles ]-->
<h2>This is a heading level 2.</h2>
<h3>This is a heading level 3.</h3>
<h4>This is a heading level 4.</h4>
<h5>This is a heading level 5.</h5>
<h6>This is a heading level 6.</h6>

Decorative Text Before or After a Heading

Use data-before or data-after to add short visual labels. These decorations are generated by CSS; put meaningful words in the actual heading text.

This is a heading with decorative text before.

This is a heading with decorative text after.

<!--[ Decorative Text Before or After a Heading ]-->
<h3 data-before='★ '>This is a heading with decorative text before.</h3>
<h3 data-after=' ✓'>This is a heading with decorative text after.</h3>

Tip! Use headings in logical order for accessibility and a more useful automatic Table of Contents. CSS-generated text is not a replacement for meaningful heading content.

Paragraph

Use p tag to add paragraphs to the article.

<!--[ Paragraph ]-->
<p>This is a paragraph</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.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>This is a paragraph with text indent.</p>

Paragraph with Drop Cap

The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.

Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>T</span>his is a paragraph with drop cap.</p>

Post Reference Paragraph

Use a compact reference line for short source credits or supplementary notes. For structured footnotes, use explicit links or numbered references within the article.

Source:
www.example.com

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

Text Highlight

Use the mark tag to highlight important text within a paragraph. In Plus UI v3.3, the highlight background automatically follows the theme's link color.

This is a paragraph with highlighted text.

<!--[ Text Highlight ]-->
<p>This is a paragraph with <mark>highlighted text</mark>.</p>

Good to know:
The highlight color automatically adapts to the selected theme color. The mark tag used in regular text is styled differently from the one used inside code blocks.

Post Image

Following is a standard image without any container which means there will be no lightbox for this image.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Tips!
Have you noticed the classname full? Adding this classname to img tag removes horizontal margin and adapts full screen width in Mobile Devices.

Good to know:

• We recommend adding alt, width and height attributes to img tags.

Accessibility:
Describe informative images using alt; decorative images can use an empty alt=''. Providing accurate dimensions helps prevent content layout shifts.

Image with Caption

Captions provide context for readers. The post summary Blogger generates can vary depending on its snippet settings; do not rely on a caption being included or excluded from summaries.

The image caption is here! Where were you looking for it?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

Warning!
Blogger's image editor may create the table-based caption markup automatically. If you insert a caption manually, prefer semantic figure and figcaption, shown below; Plus UI supports both structures.

You might be wondering why should you use the table tag just for adding caption to image even though there are figure and figcaption HTML tags available?

Let me sort it out for you! It is because when we add caption to an image through Blogger post editor and not manually by editing HTML, it uses the above code snippet for an image having caption. Therefore, it is necessary to support them.

You can also use the figure and figcaption tags instead of table tag as shown below.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Image with Automatic Lightbox

Lightbox helps to scale the image up and make it fully focusable on click. The lightbox also contains the contents of alt attribute of the image when it appears on image click.

Where are you finding the lightbox? Click on this image!

Good to know:

• Automatic Lightbox is applied to supported images inside containers such as .psImg, .glImg, .lbx and figure, as well as images in supported Blogger image and caption structures. The .btImg class alone does not enable Lightbox.
• If an image with lightbox is wrapped under anchor tag, clicking on image will only open link when lightbox is shown.
• To explicitly opt-out automatic lightbox function for a particular image, add attribute data-lightbox='false' to the img tag.
• To explicitly opt-out lightbox automatically containing the alt attribute contents, add attribute data-caption='false' to the img tag.

Images with Grid Layout

Grid layout in the context of images typically refers to arranging multiple images in a structured grid format on a webpage or in a document. This layout is popular for galleries, portfolios, or any collection of images where you want to display several images in a neat and organized manner.

<!--[ Images with Grid Layout ]-->
<div class='psImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Images with Show All Function

Used to hide some images and will be shown when the user clicks the Show All button. Show All function can only be activated once, images cannot be hidden again when you activate it.

Show All

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' src='image_link'/>
    
    <!--[ Button to activate ]-->
    <label for='hideImg1' aria-label='Show all images'>Show All</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Images with Scroll Layout

Images with scroll layout typically refers to a design technique where images are displayed in a horizontally or vertically scrolling manner within a container. This approach is often used when you have a collection of images that may exceed the available space on the screen, and you want users to be able to scroll through them.

<!--[ Images with Scroll Layout (Style 1) ]-->
<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Tips!
You can change the height of the scroll image by adding one of the classnames h150, h200, h250, to the gallery container div.glImg.

This scroll layout style will only be active in mobile view. Please try opening this page on your mobile device.

<!--[ Images with Scroll Layout (Style 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Lazyload Image

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. This example uses the lazysizes integration available to the theme. For ordinary images, consider Blogger's built-in lazy-loading setting or browser-native loading='lazy' instead of manually managing placeholders.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_title' data-src='image_link' src='data:image/gif;base64,R0lGODlhAQABAIEAAAAAAAAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAgEAAEEBAA7'/>

Warning!
Avoid manually lazy-loading an above-the-fold image (often the first large image in a post), especially when it may become the Largest Contentful Paint element.
Prefer Lazy load images in Blogger settings for normal post images. Add width and height to reserve layout space. Do not combine a manually managed data-src placeholder with a normal src pointing at the same full image.

External Link

Notifies users if the link will lead to another site.

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

Alternative styles:

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

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

Button

Defines buttons that can be clicked by the user.

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

Download Link

To provide information about downloaded files to users.

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

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, questions or highlighted sentences, there are several 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>

Question?
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 question ]-->
<p class='note qs'><b>Question?</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Warning!
The qs Question style is only available in Plus UI v3.3 or later. It will not work as expected in older versions.

Alert

Similar to Note Block, the only difference is Alert has different style and has more variants:

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant tip ]-->
<div class='alert tip'><b>Tip!</b>
  A simple tip alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant question ]-->
<div class='alert question'><b>Question?</b>
  A simple question alert - Lorem ipsum dolor sit amet.
</div>

Warning!
The tip and question Alert variants are only available in Plus UI v3.3 or later. These styles are not supported in older versions.

Outlined Alerts

You can add the outline classname to use the outlined version of an Alert.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant tip outlined ]-->
<div class='alert tip outline'><b>Tip!</b>
  A simple tip alert - Lorem ipsum dolor sit amet.
</div>

<!--[ Alert variant question outlined ]-->
<div class='alert question outline'><b>Question?</b>
  A simple question alert - Lorem ipsum dolor sit amet.
</div>

Good to know:
The outline classname can be combined with Alert variants. For example, alert tip outline will display the outlined version of the Tip Alert.

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:

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <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 (also supported by bordered).
• bordered / noborder (choose one): table content border.
• clr / primary / warning / success / error : background heading table.
• stripped : alternating row background (the actual classname is stripped, not striped).
• hovered : hover table row.
• mh100 / mhvh / mh200 / mh300 : max-height of the table in px (exception: mh100 sets max-height: 100%).
• sp5 / sp10 / sp20 : table cell padding scale.
• sticky : keep table header visible while scrolling inside its container.
• vab : align table body content to its text baseline.
• full : a full-width table option used by the theme layout.

stripped and hovered classnames were added in v3.1.0

Lists

Plus UI supports ordinary ordered and unordered lists, as well as several styles intended for tutorials and comparisons. The examples below use only classes present in the v3.3 source.

• First item
• Second item
• Third item

<!--[ Standard List ]-->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

• First feature
• Second feature
  • Nested item
• Third feature

<!--[ List (Style 1) ]-->
<ul class='s1'>
  <li>First feature</li>
  <li>Second feature
    <ul><li>Nested item</li></ul>
  </li>
  <li>Third feature</li>
</ul>

Steps

Used to define steps for a guide.

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>

Code Block

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

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

code tag can be used to define inline code like this: escaped_code_here.

<code>escaped_code_here</code>

kbd tag can be used to define keyboard input like this: ⌘ + A.

<kbd>⌘ + A</kbd>

Inside <code> tag, a part can be marked by wrapping it with <mark> tag.

// mark examples
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// mark codes
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Message before'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Message after'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

Good to know:

• You need to use escaped code inside <code> elements, which means you have to replace all & to &, < to < and > to >.
• When the corresponding syntax-highlight options are enabled, Plus UI uses highlight.js for code highlighting. Line numbers and the copy button can be controlled separately in the theme configuration or using attributes on an individual block.
• Highlighting is initialized on code elements when the relevant Plus UI features are enabled; do not assume that a plain pre element without a code child will be highlighted.
• Inline code elements can also be syntax-highlighted when highlighting is enabled.
• The library automatically detects the best language matched for your code and highlights it, but sometimes it may not detect the correct language.
• If the library is detecting the language incorrectly or you want to explicitly specify the code language, you can add a classname in the manner, the language name prefixed with language-, to the <code> element. For an example, if your code is written in javascript, you can add a classname language-js or language-javascript to the <code> element.

Code Block Options

You can customize individual Code Blocks using the following attributes on the pre element. These settings can override the theme's default Syntax Highlighter options.

• data-syntax='false': Disable syntax highlighting and line numbers for the Code Block.
• data-highlight='false': Disable automatic syntax coloring while keeping other enabled features.
• data-copy='false': Disable the automatic copy button.
• data-lines='true': Enable line numbers. Use data-lines='2,4' to also highlight line numbers 2 and 4.
• data-comment='.js': Display a custom label in the Code Block header.
• data-source='src/example.js': Display a source file label in the Code Block header.

<!--[ Code Block Options ]-->
<pre data-comment='.js' data-source='src/example.js' data-lines='2,4' data-copy='true' data-highlight='true'><code class='language-javascript'>const a = 1;
const b = 2;
console.log(a + b);
console.log('Done');</code></pre>

Good to know:
Line numbers require syntax processing to be enabled and a compatible code layout. The data-syntax='false' option also disables line numbers and syntax coloring, but does not disable the copy button. Remember to escape HTML characters inside Code Blocks.

Multi-tabs Code Block

Used to group multiple code blocks together.

[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

Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button. Any content can be included in this widget.

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Blurred Text Spoiler

A blurred spoiler conceals a short passage of text until readers click or activate it using the keyboard. It is different from the expandable details.sp Spoiler above.

In this example, the hidden answer is revealed after one click.

<p>In this example, <span class='spoiler'>the hidden answer is revealed after one click</span>.</p>

Good to know:
Post spoilers are styled by the v3.3 theme and revealed by JavaScript. Revealing is one-way: clicking again does not blur the text. Without JavaScript, blurred content may remain obscured. Avoid placing essential content or complex interactive elements inside a spoiler.

Accordion

Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).

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

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

<!--[ 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>

Table of Contents

The TOC (acronym of Table of Contents) helps users quickly navigate through the content of a webpage by providing direct links to different sections. This is especially useful for longer articles or pages with multiple distinct sections.

There are two ways to define a TOC.

Manual Table of Contents

A manual Table of Contents lets you create custom links to specific sections of your post. Each link must point to a heading with a unique id attribute.

<!--[ Manual Table of Contents ]-->
<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
  <div>
    <ol>
      <li><a href='#section-one'>Section One</a></li>
      <li><a href='#section-two'>Section Two</a></li>
      <li><a href='#section-three'>Section Three</a></li>
    </ol>
  </div>
</details>

<!--[ Target headings ]-->
<h2 id='section-one'>Section One</h2>
<h2 id='section-two'>Section Two</h2>
<h2 id='section-three'>Section Three</h2>

Tip! Each link's href must match the id of its target heading, including the # prefix in the link. You can also add the open attribute to the details tag to expand the Table of Contents by default.

Automatic Table of Contents

The Automatic Table of Contents automatically generates a list of headings from your post, allowing readers to navigate between sections without manually creating links.

Tip! Add the open attribute to the details tag to keep the Table of Contents expanded by default. Remove this attribute if you want it to be collapsed when the page loads. Readers can still expand or collapse it manually.

<!--[ 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>

Related Posts

Related posts are links or content suggestions on a webpage that connect to similar topics or articles, helping users discover more relevant information.

There are two ways to define this component.

Manual Related Posts

Manual related posts are selected and added by the author based on relevance, giving full control over the suggestions.

<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

Automatic related posts are selected using Blogger labels. You can specify a label or let Plus UI choose one automatically to display related content.

<!--[ 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>

Good to know:

• This feature shows a list of posts having a particular label.
• To specify a label, add attribute data-label='My Label' to .aRel element.
• If attribute data-label is not specified or there is no post with label specified in data-label, then it will fallback to a random label from the current post if it is used in a post otherwise fallback to random label from the blog if used in page.
• It will filter out the post which is being viewed.
• To set the maximum number of posts, add data-max-results='6' to the .aRel element, where 6 is the maximum number of posts to display.

Good to know:
Automatic Related Posts are not available in Blogger's preview mode. Publish the post to test this feature.

Audio and Video

Use the HTML audio and video elements to embed media files in a post. Both elements use the browser's built-in playback controls. Plus UI v3.3 also provides responsive styling for videos.

Audio Player

Use the audio tag to add an audio player to your post.

<!--[ Audio Player ]-->
<audio controls preload='metadata'>
  <source src='https://www.w3schools.com/html/horse.mp3' type='audio/mpeg'>
  Your browser does not support HTML5 audio.
</audio>

Video Player

Use the video tag to embed a video player. The player automatically adapts to the available width of the post content.

<!--[ Video Player ]-->
<video controls preload='metadata' playsinline style='width:100%;height:auto'>
  <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
  Your browser does not support HTML5 video.
</video>

Audio and Video Attributes

HTML provides several attributes to customize media playback. The following options can be used with native audio and video elements.

• controls: Display the browser's built-in playback controls.
• preload='metadata': Request basic media information, such as duration, before playback.
• preload='none': Request that the browser avoid preloading media.
• preload='auto': Allow the browser to preload more media data, potentially including the entire file.
• autoplay: Attempt to play the media automatically. Browsers may block autoplay, especially when audio is enabled.
• loop: Automatically replay the media when it ends.
• muted: Start playback with the audio muted.
• src: Specify the media file URL. It can be used directly on the media element or inside a source element.

The following attributes are also useful when embedding videos:

• playsinline: Request inline playback rather than automatic fullscreen playback on supported mobile browsers.
• width and height: Specify the video dimensions in CSS pixels. Providing both helps reserve layout space.
• poster: Specify an image URL to display before the video starts playing.

When using a source element, the type attribute identifies the media format, such as audio/mpeg for MP3 files or video/mp4 for MP4 files. Multiple source elements can be provided for alternative formats.

Good to know:
Replace the highlighted URLs with direct links to your own media files. The preload attribute is only a browser hint. Plus UI also automatically pauses HTML5 videos when they leave the viewport on supported browsers, except during fullscreen or Picture-in-Picture playback. Audio and embedded iframe players are not affected.

Lazy YouTube

Loads iframe once the play button is clicked otherwise shows the thumbnail image as placeholder which is lazyloaded using @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Good to know:

• You can set the iframe ratio as shown below:

  <!--[ Lazy YouTube ]-->
  <div class='lazyYt' style='--ratio: 4 / 3' data-embed='video_id'></div>

Defer YouTube

Defers iframe loading using @aFarkas/lazysizes.

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

Good to know:

• You can set the iframe ratio as shown below:

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

Essentials

This section does not provide you any components, but contains general HTML code snippet which can be used for different purposes.

Explicit Post Snippet

Post snippet shows a few lines of text content of post. It automatically selects texts from beginning of the post. If you would like to set a custom post snippet, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--more-->

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

You can set custom post snippet and post thumbnail by combining the above two code snippets as shown below:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

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

<!--more-->

Header Subtitle

Adds subtitle next to header title in a particular post or page.

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>