Plus UI v2.5 TypoGraphy and Writing Styles

House Of Blogger

Not all of the styles below can be used directly in "Writing view" mode, but there are also some features that can only be used from "HTML View" mode.

Writing Format for : Plus UI v2.5
Template Updated on : January 5, 2022

Image with Caption and Auto Lightbox

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.

All Style Typography and Format Posts
Caption_here

All images in the article will automatically have a lightbox function except the image in the tag <figure>, try clicking on one of the images in this post.

Writing format:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Image_Alt_Here' src='image_src.png'/>
      </td>
    </tr>
    <tr>
      <td> class='tr-caption'>Caption_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara

Writing format:

<!--[ Grid Image ]-->
<div class='gridImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

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

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara

Writing format:

<!--[ Show All Image ]-->
<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  
  <div class='buttonImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'></label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='showImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
  </div>
</div>

Image with Scroll Layout

Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display.

We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations

Writing format:

<!--[ Scroll Image ]-->
<div class='scrollImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</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. All images in this article use Lazyload.

Writing format:

<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Manual Related Post

It is important to note that this feature is written manually, it does not automatically appear on every page.

Writing format:

<div class='postRelated'>
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
    <li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
    <li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
  </ul>
</div>

Auto Related Post

Related Posts

Writing Format:

<details class='spoiler toc' open=''>
  <summary data-show='Show' data-hide='Hide'>Related Posts</summary>  
  <div class='toC' id='rPst'></div>
</details>

Post Break

You can use this feature to separate paragraphs or to open a new chapter in a post, here's an example of how it looks:

Writing format:

<i class='separate'></i>

Paragraph with Text Indent

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

Writing format:

<p class='textIndent'>Your_text_here</p>

Paragraph with Drop cap

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.

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.

Writing format:

<p><span class='dropCap'>Y</span>our_text_here</p>

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.

Another style:

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

Writing format:

<blockquote>Your_text_here</blockquote>

// Another style

<blockquote class='style-1'>Your_text_here</blockquote>

Table

The table in this theme has been set responsive, for example, if the number of columns or the width of the table exceeds the width of the screen, so as not to damage the layout, the table will automatically have a scroll function.

Please open this article on your mobile device and highlight the table section below:

No Column_1 Column_2 Column_3 Column_4 Column_5
1 Data_table_1 00.000.000 0.000.000 0.000.000 0.000.000
2 Data_table_2 00.000.000 0.000.000 0.000.000 0.000.000
3 Data_table_3 00.000.000 0.000.000 0.000.000 0.000.000
4 Data_table_4 00.000.000 0.000.000 0.000.000 0.000.000

Writing format:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Manual Table of Content

You can choose to use manual ToC if you don't want all heading tags(h1, h2, h3, h4, h5, h6) to be displayed in the Table of Contents.

For manual writing you have to add a id=' ... ' new attribute to each heading tag that you want to add to the table of contents, it might be a little difficult to implement but you can choose which Title you want to display.

Contents

Writing format:

<details class='spoiler toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#Image_with_Caption'>Image with Caption</a></li>
      <li><a href='#Manual_Related_Post'>Manual Related Post</a></li>
      <li><a href='#Post_Break'>Post Break</a></li>
      <li><a href='#Blockquote'>Blockquote</a></li>
    </ol>

    
    <p>With sub-heading</p>
    <ol>
      <li><a href='#'>Heading_title</a>
        <ol>
          <li><a href='#'>subheading_1</a></li>
          <li><a href='#'>subheading_2</a></li>
          <li><a href='#'>subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

Semi Automatic Table of Content

This second option will add a table of content automatically in your post, the only drawback is that it will add each heading tag to the ToC, the order may be messy or error if the heading tags you write regularly.

Table of Contents

Writing format:

<details class='spoiler toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', () => new TableOfContents({from: document.querySelector('#postBody'), to: document.querySelector('#autoToc')}).generateToc() ); /*]]>*/</script>

Syntax Highlighter

Used to write lines of HTML code in posts

You can Double Click on the Syntax Highlighter to copy its contents to clipboard.

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

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

// Tags to add color

<i class='gray'>...</i>	        = Grey
<i class='red'>...</i>					= Red
<i class='blue'>...</i>					= Blue
<i class='green'>...</i>				= Green
<i class='block'>...</i>        = Block Blue

To write HTML, CSS or JS code in posts, Writing format:

<div class='pre html notranslate'>
  <pre>Your_HTML_code_here</pre>
</div>

Writing syntax for CSS formatting:

<div class='pre css notranslate'>
  <pre>Your_CSS_code_here</pre>
</div>

Writing syntax for JS formatting:

<div class='pre js notranslate'>
  <pre>Your_JS_code_here</pre>
</div>

To deactivate Scroll function use the tag below:

<div class='pre js notranslate'>
  <pre style='white-space:pre-wrap'>Your_JS_code_here</pre>
</div>

You can also write code like: <html> in paragraphs by using:

<code>code_here</code>

MultiTabs Syntax Highlighter

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

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
JS here

Writing Code:

<div class='pre tb notranslate'>
  <!--[ 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'>
    <!--[ 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>
  </div>

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

Spoiler - Show / Hide Button

Spoiler:

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

<details class='spoiler notranslate'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_content_here</p>
</details>

Accordion / Toggle Menu

Accordion_first_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_second_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_third_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_fourth_title (alt)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='accordion'>
    <summary>Accordion_first_title</summary>
    <div class='accorContent'>
      <p>Accordion_content_1</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='accordion'>
    <summary>Accordion_second_title</summary>
    <div class='accorContent'>
      <p>Accordion_content_2</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class='accordion'>
    <summary>Accordion_third_title</summary>
    <div class='accorContent'>
      <p>Accordion_content_3</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class='accordion alt'>
    <summary>Accordion_fourth_title (alt)</summary>
    <div class='accorContent'>
      <p>Accordion_content_4</p>
    </div>
  </details>
</div>

Note Block

This feature serves to add important info, warning sentences or highlight sentences, there are two styles that you can try including:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

Warning!Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

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

// Another style

<p class='note noteAlert'>Yout_text_here</p>

External Link

If there is an external link contained in the post, you can notify the user by using this feature:

Sample_external_link
Sample_link_alt
<a class='extLink' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extLink alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button

Standard_button
Download
Download
Demo
Buy now
Whatsapp me
<a class='button' href='#'>Standard_button</a>
<a class='button' href='#'><i class='icon download'></i>Download</a>
<a class='button outline' href='#'><i class='icon download'></i>Download</a>
<a class='button' href='#'><i class='icon demo'></i>Demo</a>
<a class='button' href='#'><i class='icon cart'></i>Buy now</a>
<a class='button whatsapp' href='#'><i class='icon whatsapp'></i>Whatsapp me</a>

Two buttons in a row:

<div class='buttonInfo'>
  <a class='button' href='#'><i class='icon download'></i>Download</a>
  <a class='button outline' href='#'>Demo</a>
</div>

Download Link

file_name.zip 200kb

Writing format:

<div class='downloadInfo notranslate'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

Background image instead of text

about_fineshop.png 10kb

Writing format:

<div class='downloadInfo notranslate'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType lazy' data-text='zip' data-style='background-image: url(Add_Image_Url_Here)'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

Countdown Download Button (Direct)

This feature will show a countdown before the user downloads any file.

This feature requires direct download link of cloud files. You can use Google Drive to get direct download link of a file. You can read this article for tutorial.

You can use only 1 Countdown Timer Download Button in a post.

Test.webp 12.46kb

Writing format:

<div class='downloadInfo countD notranslate'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span class='fileText'>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Change link (data-link='...' atribute to download link) and timer (data-time='...' atribute to countdown timer)  ]-->
  <a class='button fileLink' data-link='#' data-time='25' aria-label='Download' href='javascript:;'><i class='icon download'></i></a>
  <a class='button retryLink' aria-label='Retry' href='javascript:;'><i class='icon retry'></i></a>
</div>

Youtube Video

Lazy YouTube

Serves to load youtube videos after the page is scrolled to speed up loading the blog

Writing format:

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='7tSlCHgDgMA'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

iFrame Lazy YouTube

Another alternative to delay loading iframe with defer function:

Writing format:

<!--[ Lazysize iframe ]-->
<div class='videoYoutube'>
  <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/aC76qElP2Jc' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Change the part marked with Youtube video embed code which you can copy from Youtube video url, for example:youtube.com/watch?v=aC76qElP2Jc, 'aC76qElP2Jc' is video embed code in question

Post Reference

To add a list of references to articles you wrote:

Reference:
www.jagodesain.com

<p class='postReference'>Reference:<br> www.jagodesain.com</p>

Getting Info...

About the Author

House Of Blogger
Study, Music, Web Development

2 comments

  1. tes
  2. Can I have the Plus UI template blogger please?
    Mail: hieunvm.c2mdc@gmail.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.