Plus Ui 2.7 UI Components and Typography

Table of Contents

Most of these features can only be used in 'HTML View' mode, nor can you switch to 'Writing view' mode while using some of these features.

In post editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view.
Select 'HTML View'.

Paragraph

Use p tag to add paragraphs to the article.

<!--[ Paragraph ]-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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'>Your_paragraph_is_here.</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'>Y</span>our_paragraph_is_here.</p>

Post Reference Paragraph

To write a list of references or footnotes below the post.

Source:
www.example.com

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

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

Image with Caption

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

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>

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

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

All the images in the post will automatically have a lightbox function if the image is wrapped under a parent container having one of the classnames lbx, separator, psImg, btImg, galWrp or satisfies one of the selectors .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
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 grImg'>
  <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 class='inImg hidden' id='for-hideImage-1' 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='for-hideImage-1' 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 (Type 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 element div.galWrp.

Here is another scroll layout style but it will only be active in mobile view. Please try opening this page on your mobile device.

<!--[ Images with Scroll Layout (Type 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 feature uses @aFarkas/lazysizes to lazyload images.

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

Good to know:

All the images in the post are automatically lazyloaded.
Since images are automatically lazyloaded, we discourage the use of above code snippet.
To explicitly opt-out automatic lazyload for a particular image, add attribute data-lazyload='false' to the img tag.

Warning!
Never manually lazyload the first image of the post. Doing so, results in unexpected behaviours.

External Link

Notifies users if the link will lead to another site.

link_title

Button

link_title link_title link_title link_title

Download Link

file_name.zip 200kb

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Anonymous

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Anonymous

Note Block

This feature serves to add important info, warning sentences or highlight sentences, there are two styles as shown below.

Info!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Warning!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Alert

Default A simple default alert - Lorem ipsum dolor sit amet.

Outline A simple outline alert - Lorem ipsum dolor sit amet.

Info! A simple info alert - Lorem ipsum dolor sit amet.

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

Success! A simple success alert - Lorem ipsum dolor sit amet.

Error! A simple error alert - Lorem ipsum dolor sit amet.

Info! A simple info alert - Lorem ipsum dolor sit amet.

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

Success! A simple success alert - Lorem ipsum dolor sit amet.

Error! A simple error alert - Lorem ipsum dolor sit amet.

Table

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

Syntax Highlighter

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

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

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

<code>code_here</code>

Good to know:

All the code blocks are automatically highlighted using @highlightjs/highlight.js, one of the popular libraries for code highlighting and a custom plugin. Copy button and lines number are also automatically appended.
The library is loaded if and only if there is atleast one code block in the post to make sure we don't make extra requests.
Inline codes are also highlighted.

MultiTabs Syntax Highlighter

Used to group multiple code blocks together.

[HTML] code_here

[CSS] code_here

[JS] code_here

[JSON] code_here

<!--[ MultiTabs Syntax Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT-1' type='radio' name='preTab' checked=''/>
  <input id='preT-2' type='radio' name='preTab'/>
  <input id='preT-3' type='radio' name='preTab'/>
  <input id='preT-4' type='radio' name='preTab'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ 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='JS'></label>
    <label for='preT-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC-1' data-source='src/index.html'><code>[HTML] code_here</code></pre>
  <pre class='preC-2' data-source='src/style.css'><code>[CSS] code_here</code></pre>
  <pre class='preC-3' data-source='src/main.js'><code>[JS] code_here</code></pre>
  <pre class='preC-4' data-source='src/rules.json'><code>[JSON] 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:

text_here

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

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

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

Using Manual TOC is very complicated, you have to add a different id attribute in each heading tag and write it in content list.

Automatic Table of Contents

It is not very easy to use the Manual TOC, therefore we provide an Automatic TOC which looks for all the headings in the post and populate the content list in an organized manner.

Table of Contents

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='aToc'></div>
</details>

Manual Related Posts

Automatic Related Posts

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='aRel'></div>
</details>

Good to know:

This feature shows posts with 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 unsed 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 attribute data-max-posts='6', where 6 is the number of maximum posts.

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>

Defer YouTube

Defers iframe loading using @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/DT61L8hbbJ4' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe>
</div>

Header Subtitle

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

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

Essentials

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

Plus Ui 2.7 UI Components and Typography

Paragraph

Paragraph with Text Indent

Paragraph with Drop Cap

Post Reference Paragraph

Post Image

Image with Caption

Image with Automatic Lightbox

Images with Grid Layout

Images with Show All Function

Images with Scroll Layout

Lazyload Image

External Link

Button

Download Link

Blockquote

Note Block

Alert

Table

Syntax Highlighter

MultiTabs Syntax Highlighter

Spoiler

Accordion

Table of Contents

Manual Table of Contents

Automatic Table of Contents

Related Posts

Manual Related Posts

Automatic Related Posts

Lazy YouTube

Defer YouTube

Header Subtitle

Essentials

Explicit Post Snippet

Explicit Post Thumbnail

Post a Comment

BfcLive