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 : Agust 17, 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.
|
| 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
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.
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:
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_linkSample_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_buttonDownload
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
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
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.
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>
Rate This Article
Thanks for reading: Plus UI 2.5 Typography [Updated]:)
Conclusion
In this article, I have shared Plus UI 2.5 Typography [Updated]. I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!