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.
Download Template Median UI 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
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
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
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 |