Trang chủ
Code

Shortcode Dành Cho Template Median UI

Trong bài viết này Team mình xin chia sẻ cho mọi người các ShortCode dành cho Template Median UI Phiên bản mình đang dùng là version 1.7 nhé.

image_title

Image With Caption (Hình Ảnh Kèm 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>

Xem Demo 1

Thẻ Alt
Kèm Chú Thích Ở Đây

Grid Images (Hình Ảnh Lưới)

<div class="psImg grImg">
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 1" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhTOaxYNQbl9WDuCp3gV_oTBbhtaZ8W2gYxqKOhfLAbEAzdhyphenhyphen0_0yWXNcHcataKATHJt4EbbpghYIMMowUR-Vx7grolLzXVVL4FdgXYiqOcg_coXEmupZpEQhTLj1ahmxNt82tJkExd0lW/s0/travel-boating-experience.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhTOaxYNQbl9WDuCp3gV_oTBbhtaZ8W2gYxqKOhfLAbEAzdhyphenhyphen0_0yWXNcHcataKATHJt4EbbpghYIMMowUR-Vx7grolLzXVVL4FdgXYiqOcg_coXEmupZpEQhTLj1ahmxNt82tJkExd0lW/s0/travel-boating-experience.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 2" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24CPUYWE9FskWXEmV71yeDaS_ojI0UCXeKz5H9lIpBO8lI4v2rApRVEXLXlM2D3zvao2XBEbJIWuL_BtoCnyYExSm6zOy_vyQXPiwLHnDCdEvyperOvlT428kIPE4lFqGCmW9KY7JU5Rp/s0/travel-construction-of-new-highway.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24CPUYWE9FskWXEmV71yeDaS_ojI0UCXeKz5H9lIpBO8lI4v2rApRVEXLXlM2D3zvao2XBEbJIWuL_BtoCnyYExSm6zOy_vyQXPiwLHnDCdEvyperOvlT428kIPE4lFqGCmW9KY7JU5Rp/s0/travel-construction-of-new-highway.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 3" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOx2vnqQxL9KZ8DHI489KuLP1KWZZ9sg6UJBq3oTa3qMXjNRgRmqeOi96ekDlYwhsCZx3O5eBLsHh7WpvvrPXCLQ6UYB4LRSbODTWGtJIEsv2_W0ffndarykSS5Ifzdx5xGB4EFOvI-s_d/s0/travel-langtang-tracking.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOx2vnqQxL9KZ8DHI489KuLP1KWZZ9sg6UJBq3oTa3qMXjNRgRmqeOi96ekDlYwhsCZx3O5eBLsHh7WpvvrPXCLQ6UYB4LRSbODTWGtJIEsv2_W0ffndarykSS5Ifzdx5xGB4EFOvI-s_d/s0/travel-langtang-tracking.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 4" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5BKuboFjlvJO565ho5DhSyzZKSuSgx52-dicktQzpGD-PyQvZ2c-0FkAn5_LkeBSvXiwnkB7TpptOTk3Fmy2cWmQCnk5qPkPbdVb4CQvlsgOmwl9xov6zhUSUkQ-_ubYEExyJ-LaMERM/s0/sport-de-spain-preparations.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5BKuboFjlvJO565ho5DhSyzZKSuSgx52-dicktQzpGD-PyQvZ2c-0FkAn5_LkeBSvXiwnkB7TpptOTk3Fmy2cWmQCnk5qPkPbdVb4CQvlsgOmwl9xov6zhUSUkQ-_ubYEExyJ-LaMERM/s0/sport-de-spain-preparations.jpg" onclick="return false" lazied=""></div>
</div>

Xem Demo 2

Thẻ Alt hình ảnh 1
Thẻ Alt hình ảnh 2
Thẻ Alt hình ảnh 3
Thẻ Alt hình ảnh 4

Show/Hide Image (Hiển Thị / Ẩn Hình Ảnh)

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Show all</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Xem Demo 3

Thẻ Alt hình ảnh 1
Thẻ Alt hình ảnh 2
Thẻ Alt hình ảnh 3
Thẻ Alt hình ảnh 4
Thẻ Alt hình ảnh 5
Thẻ Alt hình ảnh 6
Thẻ Alt hình ảnh 7
Thẻ Alt hình ảnh 8

Scroll Image (Hình Ảnh Có Bố Cục Cuộn)

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Xem Demo 4

Thẻ Alt hình ảnh 1
Thẻ Alt hình ảnh 2
Thẻ Alt hình ảnh 3

Related Posts (Các Bài Viết Liên Quan)

<div class='pRelate notranslate'>
  <!--[ Related title ]-->
  <b>Bạn có thể muốn đọc bài viết này:</b>
  <ul>
    <li><a href='https://www.aetrick.com/2024/09/tai-xuong-template-median-ui-v17-mien.html'>Tải Template Median UI v1.7 Miễn Phí - aeTrick.Com</a></li>
    <li><a href='https://www.aetrick.com/2024/09/cach-xem-youtube-khong-quang-cao-voi.html'>Xem YouTube Không Quảng Cáo Với YouTube ReVanced - aeTrick.Com</a></li>
    <li><a href='https://www.aetrick.com/2024/09/top-cac-tien-ich-extension-khong-thieu.html'>Top Những Tiện Ích (Extension) Nên Có Trên Trình Duyệt - aeTrick.Com</a></li>
  </ul>
</div>

Xem Demo 5

Bạn có thể muốn đọc bài viết này:

Post Break (Dấu Ngắt Đoạn)

Chỉ cần bạn sử dụng thẻ <hr> này vào bất kỳ chỗ nào bạn muốn ngắt đoạn thì nó sẽ có dấu ~ như bên dưới

Xem Demo 6

Text Indent (Thụt Lề Văn Bản)

<p class='pIndent'>Nội Dung Của Bạn</p>

Xem Demo 7

Đây là đoạn ví dụ của đoạn code Thụt lề văn bản như mình đã nói bên trên, Dùng nó làm điểm nhấn cho bài viết cũng là một ý tưởng không tồi, nó giúp người xem đọc và nhìn 1 cách có nghệ thuật hơn hihi.

Drop Cap (Chữ To Đầu Dòng)

<p><span class='dropCap'>Đ</span>Nội Dung Của Bạn</p>

Xem Demo 8

Đây là ví dụ của đoạn code chữ To đầu dòng, sử dụng nó làm điểm nhất rất phù hợp cho bài viết


BlockQuote (Đoạn Trích Dẫn)

<blockquote class='s-1'>text_paragraph</blockquote>

Xem Demo 9

Đây là ví dụ của BlockQuote, mọi người có thể sử dụng nó để Trích Dẫn bài viết hoặc Nguồn..v..

Tables (Bảng)

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>tille_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>

Xem Demo 10

title_1 title_2 title_3 title_4 title_5 tille_6
content_here content_here content_here content_here content_here content_here
content_here content_here content_here content_here content_here content_here

Tables of Content (Mục Lục)

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

Xem Demo 11

Contents
  1. Image with Caption
  2. Manual Related Post
  3. Post Break
  4. Blockquote

With sub heading

  1. Heading title
    1. Subheading 1
    2. Subheading 2
    3. Subheading 3

Tables Of Content (Mục Lục Tự Động)

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

Xem Demo 12

Table of Contents