Usable Shortcodes for Template Median UI

Usable Shortcodes for Template Median UI
Usable Shortcodes for Template Median UI

In this article, I will introduce you to pre-formatted Shortcodes that
can be added to the Median UI Template.
Note that these Shortcodes only work if you use Median UI 1.6, higher
or lower versions cannot use.

Download Template Median UI 1.6 here

The way to add these codes is very simple, you just need to add
Posts or Pages and then switch to HTML View
to add them, pay attention to change the parts you
color .

Add captioned images

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <div class="zmImg"><img alt="Thẻ Alt" class="fullImg" src="https://www.themerum.com/2022/03/URL hình ảnh" onclick="return false"></div>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">Chú thích viết tại đây</td>
    </tr>
  </tbody>
</table>

Demo

Demo more images with captions
Demo more images with captions

Images with grid layout

It will display more images, save more space and look better than
displaying 1 image in 1 row.

<div class="psImg grImg">
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 1" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 1" src="https://www.themerum.com/2022/03/URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 2" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 2" src="https://www.themerum.com/2022/03/URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 3" class="lazy loaded"data-src="https://www.themerum.com/2022/03/URL 3" src="https://www.themerum.com/2022/03/URL 3" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 4" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 4" src="https://www.themerum.com/2022/03/URL 4" onclick="return false" lazied=""></div>
</div>

Many images are collapsed

When you have a lot of images but only want to show certain photos,
users need to click see all to display them all.

<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 1" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 1" src="https://www.themerum.com/2022/03/URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 2" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 2" src="https://www.themerum.com/2022/03/URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 3" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 3" src="https://www.themerum.com/2022/03/URL 3" onclick="return false" lazied=""></div>
  <div class="btImg">
    <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 4" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 4" src="https://www.themerum.com/2022/03/URL 4" onclick="return false" lazied=""></div>
    
    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all">Show all</label>
  </div>
  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 5" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 5" src="https://www.themerum.com/2022/03/URL 5" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 6" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 6" src="https://www.themerum.com/2022/03/URL 6" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 7" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 7" src="https://www.themerum.com/2022/03/URL 7" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 8" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 8" src="https://www.themerum.com/2022/03/URL 8" onclick="return false" lazied=""></div>
  </div>
</div>

Images with scrolling layout

With this layout, your photos will display up to 3 images per row on
the Desktop, can display multiple rows.
On Mobile photos will display in a single row and can be dragged
horizontally to see all photos.

<!--[ Scroll Image ]-->
<div class="psImg scImg scrlH">
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 1" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 1" src="https://www.themerum.com/2022/03/URL 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 2" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 2" src="https://www.themerum.com/2022/03/URL 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="https://www.themerum.com/2022/03/Image Alt tags 3" class="lazy loaded" data-src="https://www.themerum.com/2022/03/URL 3" src="https://www.themerum.com/2022/03/URL 3" onclick="return false" lazied=""></div>
</div>

Tab post

<!--[ Active function ]-->
<input class="tbIn hidden" id='fTabs-1' type="radio" name="postTabs" checked>
<input class="tbIn hidden" id="fTabs-2" name="postTabs" type="radio" />
<input class="tbIn hidden" id="fTabs-3" name="postTabs" type="radio" />

<!--[ Tabs header/title ]-->
<div class="tbHd scrlH">
  <!--[ Change atribute data-text="https://www.themerum.com/2022/03/..." to replace tabs title ]-->
  <label data-text="https://www.themerum.com/2022/03/Tab 1"></label>
  <label data-text="https://www.themerum.com/2022/03/Tab 2"></label>
  <label data-text="https://www.themerum.com/2022/03/Tab 3"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">Tabs content 1
</div> <!--[ Tabs content ]--> <div class="tbText-2">Tabs content 2
</div> <!--[ Tabs content ]--> <div class="tbText-3">Tabs content 3
</div> </div>

Demo




Contents tab 1

Contents tab 2

Contents tab 3

Create related posts


However, here is how to create related posts manually.
We will use it in case we want to display the article as we want at any
position in the article.

<div class="pRelate notranslate">
  <!--[ Related title ]-->
  <b>Related posts:</b>

  <ul>
    <li><a href="https://www.themerum.com/2022/03/URL 1">Template Median UI AMP 1.6</a></li>
    <li><a href="https://www.themerum.com/2022/03/URL 2">Font Template Median UI</a></li>
    <li><a href="https://www.themerum.com/2022/03/URL 3">Short code Template Median UI</a></li>
  </ul>
</div>

Demo

Paragraph

You just need <hr>to add anywhere you want to break a paragraph with a 3-dot vinegar
like below.


Indent at the beginning of a line

Here’s an example of an auto-indented paragraph in Median UI. Use the code below to do this.

<p class="pIndent">Content/p>

Big letters at the beginning of the line

DThis is an example of a Drop Cap, I don’t know what it’s called in
Vietnamese, so I’ll just call it big letters.
Use the code below to do this.

<p><span class="dropCap">C</span>ontent</p>

Excerpt

This is an example of a quote, this is usually used to quote sources from
elsewhere, but can also be used to decorate the article in a normal way.

<blockquote class="s-1 notranslate">Content</blockquote>

Board

The biggest headache when using tables is that on mobile, it will
look very ugly when there are too many columns or too long rows.
In Median UI 1.6 this problem has been fixed. The table will be dragged horizontally on both mobile and desktop
when the row is too long or many columns.

<div class="table">
  <table style="white-space: nowrap;">
    <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>0.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>0.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>0.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>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Demo

No Column 1 Column 2 Column 3 Column 4 Column 5
1 Data table 1 0.000.000 0.000.000 0.000.000 0.000.000
2 Data table 2 0.000.000 0.000.000 0.000.000 0.000.000
3 Data table 3 0.000.000 0.000.000 0.000.000 0.000.000
4 Data table 4 0.000.000 0.000.000 0.000.000 0.000.000

Manual Table of Contents

Table of Content (TOC) will be added automatically under H1 – H6 tags
as you can see on the right side of this article.
However, you can also add a hand if you don’t want it to
automatically display all.

With this manual you need to add
id=...on each title tag like<h2 id="Blockquote">

<details class="sp toc" open="">
  <summary data-show="Show" data-hide="Hide">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption_and_Auto_Lightbox">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>

    <!--[ Sample with subheading ]-->
    <p>With sub heading</p>
    <ol>
      <li><a href="https://www.themerum.com/2022/03/javascript:;">Heading title</a>
        <ol>
          <li><a href="https://www.themerum.com/2022/03/javascript:;">Subheading 1</a></li>
          <li><a href="https://www.themerum.com/2022/03/javascript:;">Subheading 2</a></li>
          <li><a href="https://www.themerum.com/2022/03/javascript:;">Subheading 3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
<style>
  .fixH {display: none !important;}
</style>

Demo

Contents

Semi-automatic table of contents

This table of contents will also automatically get from the H1 – H6
tags, but semi-automatically because it must add code to the position
you want to display.

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

Demo

Table of Contents

Write code

If you want to display the code in the article, you can do it in 3
ways.
The first way is to insert
codelike this with the <code>code</code>. The second way we will do the following, corresponding to each piece
of code is also how it displays:

However, it should be noted that it must be converted
<to &lt;and >into &gt;before adding it.

<div class="pre preH"><pre>Code here</pre></div>

<div class="pre html"><pre>HTML here</pre></div>

<div class="pre js"><pre>JS here</pre></div>

<div class="pre css"><pre>CSS here</pre></div>

There is also a third way is to add Multi Tabs Code as follows:

Hide content

<details class="sp notranslate">
  <summary data-show="Show" data-hide="Show">Content:</summary>
  <p>This is the demo content for the hidden content section. This feature is available in Median UI 1.6.</p><div class="widget HTML" data-version="2" id="HTML02">
<div class="widget-content">
<div class="adB" data-text="Ads go here"></div>
<script wfd-invisible="true">/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById('postBody'); var midAd02 = document.getElementById('HTML02');var showAd02 = tgt.getElementsByTagName('p'); if (showAd02.length > 0) {insertAfter(midAd02,showAd02[20]);}; /*]]>*/</script>
</div>
</div>
</details>

Demo

Content:

This is the demo content for the hidden content section. This feature is
available in Median UI 1.6.

<div class="showH"> 
  <!--[ Accordion line 1 ]--> 
  <details class="ac"> 
    <summary>Accordion line 1</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and seasonal specials.</p> 
    </div> 
  </details> 
  
  <!--[ Accordion line 2 ]--> 
  <details class="ac"> 
    <summary>Accordion line 2</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort with interesting attractions, international pavilion and fireworks. 
    Award-winning and special seasonal events.</p> </div>
  Award-winning and special seasonal events.</p> </details>
   
  <!--[ Accordion line 3 ]--> 
  <details class="ac"> 
    <summary>Accordion line 3</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park The location at Walt Disney World Resort features exciting attractions, international pavilions, and fireworks. Award-winning and seasonal specials.</p> 
    </div> 
  </details> 
  
  <!--[ Accordion line 4 ]--> 
  <details class="ac alt"> 
    <summary>Accordion line 4</summary> 
    <div class="aC"> 
      <p>Epcot is an amusement park at Walt Disney World Resort with interesting attractions, 
    Award-winning and special seasonal events.</p> </div>
  </details>
</div>

Demo

Accordion line 1

Epcot is an amusement park at Walt Disney World Resort that
features exciting attractions, international pavilions, and
fireworks.
Award-winning and special seasonal events.

Accordion line 2

Epcot is an amusement park at Walt Disney World Resort that
features exciting attractions, international pavilions, and
fireworks.
Award-winning and special seasonal events.

Accordion line 3

Epcot is an amusement park at Walt Disney World Resort that
features exciting attractions, international pavilions, and
fireworks.
Award-winning and special seasonal events.

Accordion line 4

Epcot is an amusement park at Walt Disney World Resort that
features exciting attractions, international pavilions, and
fireworks.
Award-winning and special seasonal events.

Notes (notes)

Epcot is an amusement park at Walt Disney World Resort that features
exciting attractions, international pavilions, and fireworks.
Award-winning and special seasonal events.

<p class="note notranslate">Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.</p>

Warning!
Epcot is an amusement park at Walt Disney World
Resort that features exciting attractions, international pavilions, and
fireworks. Award-winning and special seasonal events.

<p class="note wr notranslate"><b>Warning!</b><br>Epcot is an amusement park at Walt Disney World Resort that features exciting attractions, international pavilions, and fireworks. Award-winning and special seasonal events.</p>

An indication to the user that it is a link out.

<a class="extL" href="https://www.themerum.com/2022/03/javascript:;">Sample external link</a>

Demo

Sample external link

Button

Button

<a class="button" href="https://www.themerum.com/2022/03/javascript:;">Button</a>

Download

<a class="button ln" href="https://www.themerum.com/2022/03/javascript:;"><i class="icon dl"></i>Download</a>

Download

<a class="button" href="https://www.themerum.com/2022/03/javascript:;"><i class="icon dl"></i>Download</a>

<div class="btnF">
  <a class="button ln" href="https://www.themerum.com/2022/03/javascript:;">Demo</a>
  <a class="button" href="https://www.themerum.com/2022/03/javascript:;"><i class="icon dl"></i>Download</a>
</div>

<div class="dlBox">
  <!--[ Change data-text="https://www.themerum.com/2022/03/..." 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="https://www.themerum.com/2022/03/..." atribute to add link download) ]-->
  <a class="button" aria-label="Download" href="https://www.themerum.com/2022/03/javascript:;"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Embed Youtube easily and Lazy loads on arrival.

<div class="lazyYt" data-embed="mNOdyNNRSrM">
  <div class="play">
    <svg viewBox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
<img class="lazy loaded" data-src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" alt="Youtube video" lazied=""></div>

Citation of source

Used to cite the source at the bottom of the page.

Source:
www.themerum.com

<p class="pRef">Source:<br>www.themerum.com</p>

Leave a Reply