Typography and Codes - Plus UI Premium v2.6.2

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.

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

Tips: Use <p>Your_paragraph_here</p> tag to add paragraphs to the article.

Writing Format for : Plus UI Themed v2.6.1
Template Updated on : Jun 1, 2022

---

NỘI DUNG BÀI VIẾT

1. Image with Caption and Auto Lightbox
2. Image with Grid Layout
3. Image with Show All Function
4. Image with Scroll Layout
5. Lazyload Image
6. Manual Related Post
7. Auto Related Post
8. Post Break

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 images in the post will automatically have a lightbox function, click this image to try it.

Added class='full' works to remove margin image and screen, only works for mobile view.

Writing format:

.html

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

---

Image with Grid Layout

Writing format:

.html

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.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.

Show All

Writing format:

.html

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.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:

.html

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</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:

.html

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

---

Manual Related Post

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

You may want to read this post :

• How to Replace Blogger Comments
• Replace or Add New Fonts
• Guide to Adding Tab Function in Post

Writing format:

.html

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

---

Auto Related Post

Related Posts

• How to Setup Google Translate
• Installing Theme
• SVG Icon Sets
• Enable Realtime Post Views Counter
• Typography and Codes
• How to use Music Player
• Meta Tags Settings
• How to use Lazyload Adsense?
• How to use Bookmark Feature

Writing Format:

.html

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></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:

---