Code hay khi sử dụng Template Median UI

Cập nhật ngày 24/03/2023 Bởi Legend Phim

Dưới đây là các shortcode tiện dụng dành cho template Median UI. Những tiện ích này thường chỉ hoạt động ổn định trên template median ui .

Download Template Median UI 1.6 tại đây

1. Code Button tùy chỉnh

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

Xem thử:

Button

2. Code nút Download

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

Xem thử:

Download

3. Code nút Demo

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

Xem thử:

Demo

4. Code nút Demo và 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>

Xem thử:

Demo Download

5. Code download File

<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 aria-label="Download" class="button" href="javascript:;"><i class="icon dl"></i></a>
</div>

Xem thử:

file_name.zip 200kb

6. Code Bảng

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

Xem thử:

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

7. Code chú thích

Chú thích 1:

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

Xem thử:

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.

Chú thích 2:

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

Xem thử:

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.

8. Code Hiển thị sản phẩm

<div class="separator">
  <img alt="title_here" src="image_url_here" />
</div>

<!--[ Price to show in homepage ]-->
<div class="pPric pPad" data-text="Price">200.000 ₫</div>
<!--more-->

<div class="pInfo pPad">
  <div class="L"><small>Size</small><span>Small, Medium, Large, X Large</span></div>
  <div class="R"><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>
</div>
<div class="pInfo o pPad"><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class="pMart">
  <small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>
  
  <!--[ Change attribute href='#' to add url ]-->
  <a href="#" rel="noopener" target="_blank" title="Tokopedia">
    <img class="lazy" data-src="https://cdn.statically.io/favicons/tokopedia.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  </a>
  <a href="#" rel="noopener" target="_blank" title="Bukalapak">
    <img class="lazy" data-src="https://cdn.statically.io/favicons/bukalapak.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  </a>
  <a href="#" rel="noopener" target="_blank" title="Shopee">
    <img class="lazy" data-src="https://cdn.statically.io/favicons/shopee.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  </a>
  <a href="#" rel="noopener" target="_blank" title="Lazada">
    <img class="lazy" data-src="https://cdn.statically.io/favicons/lazada.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  </a>
</div>

<!--[ Active function ]-->
<input checked="" class="tbIn hidden" id="fTabs-1" name="postTabs" type="radio" />
<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, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->
<div class="tbHd scrlH">
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label data-text="Deskripsi"></label>
  <label data-text="Pengiriman"></label>
  <label data-text="Keterangan"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">
    First tab here... 

  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-2">
    Second tab here...
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class="tbText-3">
    Third tab here...

  </div>
</div>

9. Code ẩn hiện nội dung

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

Xem thử:

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.

10. Khung chứa code

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

Xem thử:

Code here

11. Code Chữ to đầu dòng

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

Xem thử:

Nội dung

12. Code Hiển thị ảnh với bố cục lưới

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

13. Code Hiển thị ảnh dạng Slide

<!--[ 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" lazied="" onclick="return false" src="URL hình ảnh 1" /></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 2" class="lazy loaded" data-src="URL hình ảnh 2" lazied="" onclick="return false" src="URL hình ảnh 2" /></div>
  <div class="zmImg"><img alt="Thẻ Alt hình ảnh 3" class="lazy loaded" data-src="URL hình ảnh 3" lazied="" onclick="return false" src="URL hình ảnh 3" /></div>
</div>

Xem thử:

013

14. Code hình ảnh có chú thích

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

15. Code Tab

<!--[ Active function ]-->
<input checked="" class="tbIn hidden" id="fTabs-1" name="postTabs" type="radio" />
<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>

Xem thử:

Nội dung tab 1

Nội dung tab 2

Nội dung tab 3

Tổng kết

Trên đây là một số code hữu dụng sử dụng cho template median v1.6 mà mình sưu tầm được. Hi vọng sẽ giúp ích được cho các bạn

Code hay khi sử dụng Template Median UI