 |
| Shortcode median ui |
Có thể bạn đã từng sử dụng template Median UI, nhưng vẫn chưa biết cách sử dụng các shortcode đi kèm. Trong bài viết này, tôi sẽ chia sẻ với bạn các shortcode Median UI đã được định dạng sẵn để bạn có thể dễ dàng thêm vào bài viết của mình.
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.
Thêm hình ảnh có chú thích
Thêm chú thích hình ảnh cũng là một trong các yếu tố SEO và giúp người đọc hiểu được nội dung của bức ảnh
<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
Các hình ảnh sẽ cùng hiển thị, giúp tiết kiệm diện tích và trông đẹp mắt hơn
<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
Hình ảnh với chức năng hiển thị tất cả
Bạn có nhiều hình ảnh nhưng chỉ muốn hiển thị một vài ảnh nhất định, thì tính năng này là dành cho bạn.
<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
Hình ảnh với bố cục cuộn
Tương tự như cách bố trí hình ảnh ở trên, chỉ là trên màn hình di động, các hình ảnh sẽ được sắp xếp song song với chức năng cuộn bên bổ sung trên màn hình di động
<!--[ 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
Điều quan trọng cần lưu ý là tính năng này được viết thủ công, nó không tự động xuất hiện trên mọi trang.
<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>
Drop Cap
Đây là một ví dụ về thụt đầu dòng đoạn văn bản hay còn gọi là Drop Cap một cách tự động trong template Plus UI. Hãy sử dụng đoạn code chia sẻ dưới đây để thực hiện.
<p><span class="dropCap">N</span>ội dung</p>
Blockquote
Blockquote hay còn gọi là đoạn trích dẫn. Hãy sử dụng đoạn code chia sẻ dưới đây để tạo đoạn trích dẫn một cách tự động trong template Plus UI.
<blockquote class="s-1 notranslate">Nội dung</blockquote>
Bảng
Khi taọ bảng thường trên mobile sẽ hiển thị không được đẹp như trên máy tính. Ở Plus UI bạn không cần phải lo ngại 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
<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
Mục lục bán 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>
Demo
Table of Contents
- 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
- Drop Cap
- Blockquote
- 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
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
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 3
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 4
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.
Ghi chú (note)
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 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
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>
<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
<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
<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.chiasevip.com
<p class="pRef">Nguồn:<br>www.chiasevip.com</p>
Trên đây là bài chia sẻ Shortcode Median UI để các bạn nắm bắt. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.