Các Shortcode có thể sử dụng cho Template Median UI

Trong bài viết này mình sẽ giới thiệu cho bạn các Shortcode định dạng sẵn có thể thêm vào Template Median UI. Lưu ý rằng những Shortcode này chỉ hoạt động nếu bạn sử dụng Median UI 1.6, các phiên bản cao hơn hoặc thấp hơn đều không thể sử dụng.

Download Template Median UI 1.6 tại đây

Cách để thêm những code này thì rất đơn giản, bạn chỉ cần thêm Bài viết hoặc Trang sau đó chuyển sang Chế độ xem HTML để thêm vào là được, chú ý thay những phần mình bôi màu nhé.

Thêm hình ảnh có chú thích

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <div class="zmImg"><img alt="Thẻ Alt" class="fullImg" src="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 thêm hình ảnh có chú thích

Hình ảnh với bố cục lưới

Sẽ hiển thị được nhiều hình ảnh, tiết kiệm diện tích hơn và trông đẹp mắt hơn là việc hiển thị 1 ảnh trên 1 hàng.

<div class="psImg grImg">
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 1" class="lazy loaded" data-src="URL hình ảnh 1" src="URL hình ảnh 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 2" class="lazy loaded" data-src="URL hình ảnh 2" src="URL hình ảnh 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 3" class="lazy loaded" data-src="URL hình ảnh 3" src="URL hình ảnh 3" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 4" class="lazy loaded" data-src="URL hình ảnh 4" src="URL hình ảnh 4" onclick="return false" lazied=""></div>
</div>

Demo

Nhiều hình ảnh được thu gọn

Khi bạn có nhiều hình ảnh nhưng chỉ muốn hiển thị 1 số ảnh nhất định, người dùng cần phải bấm vào xem tất cả để hiển thị toàn bộ.

<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 1" class="lazy loaded" data-src="URL hình ảnh 1" src="URL hình ảnh 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 2" class="lazy loaded" data-src="URL hình ảnh 2" src="URL hình ảnh 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 3" class="lazy loaded" data-src="URL hình ảnh 3" src="URL hình ảnh 3" onclick="return false" lazied=""></div>
  
  <div class="btImg">
    <div class="zmImg"><img alt="Thẻ Alt hình ảnh 4" class="lazy loaded" data-src="URL hình ảnh 4" src="URL hình ảnh 4" onclick="return false" lazied=""></div>
    
    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Hiển thị tất cả hình ảnh">Hiển thị tất cả</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <div class="zmImg"><img alt="Thẻ Alt hình ảnh 5" class="lazy loaded" data-src="URL hình ảnh 5" src="URL hình ảnh 5" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Thẻ Alt hình ảnh 6" class="lazy loaded" data-src="URL hình ảnh 6" src="URL hình ảnh 6" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Thẻ Alt hình ảnh 7" class="lazy loaded" data-src="URL hình ảnh 7" src="URL hình ảnh 7" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Thẻ Alt hình ảnh 8" class="lazy loaded" data-src="URL hình ảnh 8" src="URL hình ảnh 8" onclick="return false" lazied=""></div>
  </div>
</div>

Demo

Hiển thị tất cả

Hình ảnh với bố cục cuộn

Với bố cục này ảnh của bạn sẽ hiển thị tối đa được 3 ảnh 1 hàng trên Desktop, có thể hiển thị nhiều hàng. Trên Mobile ảnh sẽ hiển thị trên 1 hàng duy nhất và có thể kéo ngang để xem tất cả các ảnh.

<!--[ Scroll Image ]-->
<div class="psImg scImg scrlH">
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 1" class="lazy loaded" data-src="URL hình ảnh 1" src="URL hình ảnh 1" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 2" class="lazy loaded" data-src="URL hình ảnh 2" src="URL hình ảnh 2" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 3" class="lazy loaded" data-src="URL hình ảnh 3" src="URL hình ảnh 3" onclick="return false" lazied=""></div>
</div>

Demo

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='...' to replace tabs title ]-->
  <label data-text="Tab 1"></label>
  <label data-text="Tab 2"></label>
  <label data-text="Tab 3"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">
    Nội dung tab 1

  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-2">
    Nội dung tab 2
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-3">
    Nội dung tab 3

  </div>
</div>

Demo

Nội dung tab 1

Nội dung tab 2

Nội dung tab 3

Tạo bài viết liên quan

Tuy nhiên đây là cách tạo bài viết liên quan kiểu thủ công. Chúng ta sẽ sử dụng trong trường hợp muốn hiển thị bài viết theo ý muốn tại bất cứ vị trí nào trong bài viết.

<div class="pRelate notranslate">
  <!--[ Related title ]-->
  <b>Bài viết liên quan:</b>

  <ul>
    <li><a href="URL 1">Template Median UI và AMP 1.6</a></li>
    <li><a href="URL 2">Cách đổi Font chữ cho Template Median UI</a></li>
    <li><a href="URL 3">Các đoạn code có thể sử dụng cho Template Median UI</a></li>
  </ul>
</div>

Demo

Bài viết liên quan:

Dấu ngắt đoạn

Bạn chỉ cần thêm <hr> vào bất cứ chỗ nào muốn ngắt đoạn với dấm 3 chấm như bên dưới.

Thụt vào đầu dòng

Đây là một ví dụ về đoạn văn được thụt vào đầu dòng 1 cách tự động trong Median UI. Hãy sử dụng đoạn code dưới đây để làm việc này.

<p class="pIndent">Nội dung</p>

Chữ to đầu dòng

Đây là một ví dụ về Drop Cap, mình cũng chả biết trong tiếng Việt gọi là gì nên cứ đặt cho nó là chữ to đầu dòng. Hãy sử dụng đoạn code dưới đây để làm việc này.

<p><span class="dropCap">N</span>ội dung</p>

Đoạn trích dẫn

Đây là một ví dụ về đoạn trích dẫn, cái này thường dùng để trích dẫn nguồn từ nơi khác, tuy nhiên cũng có thể để trang trí bài viết 1 cách bình thường.

<blockquote class="s-1 notranslate">Nội dung</blockquote>

Bảng

Vấn đề đau đầu nhất khi dùng bảng là trên mobile sẽ bị dồn vào trông rất xấu khi có quá nhiều cột hoặc hàng quá dài. Ở Median UI 1.6 đã khắc phục được vấn đề này. Bảng sẽ được kéo ngang trên cả mobile và desktop khi hàng quá dài hoặc nhiều cột.

<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

Mục lục thủ công

Table of Content (TOC) sẽ được thêm tự động theo thẻ H1 - H6 như bạn có thể thấy phía bên phải của bài viết này. Tuy nhiên bạn cũng có thể thêm tay nếu không muốn nó tự động hiển thị tất cả.

Với cách thủ công này bạn cần thêm id=... trên mỗi thẻ tiêu đề, chẳng hạn như <h2 id="Blockquote">

<details class="sp toc" open="">
  <summary data-show="Hiện" data-hide="Ẩn">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="javascript:;">Heading title</a>
        <ol>
          <li><a href="javascript:;">Subheading 1</a></li>
          <li><a href="javascript:;">Subheading 2</a></li>
          <li><a href="javascript:;">Subheading 3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
<style>
  .fixH {display: none !important;}
</style>

Demo

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub heading

Heading_title

Mục lục bán tự động

Mục lục này nó cũng sẽ lấy tự động từ các thẻ H1 - H6, tuy nhiên bán tự động vì phải thêm code vào vị trí muốn hiển thị.

<details class='sp toc'>
  <summary data-show='Hiện' data-hide='Ẩn'>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

Viết code

Muốn hiển thị được code ra bài viết bạn có thể làm bằng 3 cách. Cách thứ nhất là chèn code như thế này bằng thẻ <code>code</code>. Cách thứ 2 chúng ta sẽ làm như sau, tương ứng từng đoạn code cũng chính là cách nó hiển thị:

Tuy nhiên cần lưu ý phải chuyển < thành < và > thành > trước khi thêm vào. Có thể click vào đây để chuyển.

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

Ngoài ra còn một cách thứ 3 nữa là thêm Multi Tabs Code như sau:

<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked="" wfd-invisible="true">
  <input class="prei hidden" id="preT-2" type="radio" name="preTab" wfd-invisible="true">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab" wfd-invisible="true">
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ 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" wfd-invisible="true">
    <pre>HTML here</pre>
  </div>
  <div class="preC-2">
    <pre>CSS here</pre>
  </div>
  <div class="preC-3" wfd-invisible="true">
    <pre>JS here</pre>
  </div>
</div>

CSS here

JS here

Ẩn hiện nội dung

<details class="sp notranslate">
  <summary data-show="Hiện" data-hide="Ẩn">Nội dung:</summary>
  <p>Đây là nội dung demo cho phần ẩn hiện nội dung. Tính năng này có sẵn ở 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

Nội dung:

Đây là nội dung demo cho phần ẩn hiện nội dung. Tính năng này có sẵn ở Median UI 1.6.

Accordion / Toggle Menu

<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>Accordion line 1</summary>
    <div class="aC">
      <p>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>Accordion line 2</summary>
    <div class="aC">
      <p>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>Accordion line 3</summary>
    <div class="aC">
      <p>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>Accordion line 4</summary>
    <div class="aC">
      <p>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>
    </div>
  </details>
</div>

Demo

Accordion line 1

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

Accordion line 2

Accordion line 3

Accordion line 4

Ghi chú (note)

<p class="note notranslate">Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>

Warning!
Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

<p class="note wr notranslate"><b>Warning!</b><br>Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.</p>

External Link

Một dấu hiệu để cho người dùng biết đó là 1 link out.

<a class="extL" href="javascript:;">Sample external link</a>

Demo

Sample external link

Button

<a class="button" href="javascript:;">Button</a>

Download

<a class="button ln" href="javascript:;"><i class="icon dl"></i>Download</a>

Download

<a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>

Demo

<a class="button" href="javascript:;"><i class="icon demo"></i>Demo</a>

Demo Download

<div class="btnF">
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>
</div>

Download Link

file_name.zip 200kb

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

Lazy Youtube

Nhúng Youtube 1 cách dễ dàng và Lazy load khi kéo đến.

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

Trích dẫn nguồn

Dùng để trích dẫn nguồn ở cuối trang.

Nguồn:
www.thucblog.com

<p class="pRef">Nguồn:<br>www.thucblog.com</p>

2 nhận xét

Saggo Gamer 11/12/2022 7:59 CH

Chào anh!
Có thể cho em hỏi cách để nhấp vào hình ảnh là nó hiện lên như anh được không? Vì mặc định của em là ảnh sẽ mở ra 1 tab mới ạ.
Mong nhận được phản hồi sớm từ anh.
1. Thức Nguyễn 2/01/2023 7:54 SA
  
  Mình chỉ dùng code tại phần "Thêm hình ảnh có chú thích" thôi. Nên dùng code riêng của mình để hiển thị ảnh, vì mình sẽ chủ động được cách mà ảnh nó sẽ hiển thị.

Các Shortcode có thể sử dụng cho Template Median UI

Thêm hình ảnh có chú thích

Hình ảnh với bố cục lưới

Nhiều hình ảnh được thu gọn

Hình ảnh với bố cục cuộn

Tab post

Tạo bài viết liên quan

Dấu ngắt đoạn

Thụt vào đầu dòng

Chữ to đầu dòng

Đoạn trích dẫn

Bảng

Mục lục thủ công

Mục lục bán tự động

Viết code

Ẩn hiện nội dung

Accordion / Toggle Menu

Ghi chú (note)

External Link

Button

Download Link

Lazy Youtube

Trích dẫn nguồn

2 nhận xét

Chi phí thực tế sử dụng xe điện VinFast Evo200, so với xe máy thì phương tiện nào tiết kiệm hơn

Median UI blogger template 1.7 premium free download

Hướng dẫn sử dụng hệ thống 500kuser để tăng traffic hiệu quả

Sửa lỗi table of contents trong Template Median UI 1.6

Hướng dẫn làm Tiếp thị liên kết TikTok - Affiliate TikTok