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

Tất cả kiểu chữ, định dạng chữ viết và các tính năng bổ sung khác trong template Median Ui, AMP, Fletro Pro, iMagz

Lưu ý:
Nội dung trong bài viết đã được nâng cấp các bạn chú ý phần chú thích

Hầu hết các tính năng này chỉ có thể được sử dụng trong chế độ 'Chế độ xem HTML', bạn cũng không thể chuyển sang chế độ 'Chế độ xem Soạn thư' khi đang sử dụng một số tính năng này.

Trong giao diện chỉnh sửa bài đăng, hãy nhấp vào biểu tượng ở dưới cùng bên phải của tiêu đề,
2 tùy chọn sẽ xuất hiện: Chế độ xem HTML và Chế độ xem Soạn thư,
Lựa chọn 'Chế độ xem HTML'.

Mẹo
Sử dụng thẻ Your_paragraph_here để thêm đoạn văn vào bài viết.

Hình ảnh có chú thích

Tất cả ảnh trong bài sẽ tự động có chức năng hộp đèn, bấm vào ảnh này để thử./td>

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption' style='text-align: center;'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Thêm vào class='full' có tác dụng xóa khoảng cách ranh giới giữa hình ảnh và màn hình, chỉ hoạt động đối với các chế độ xem trên thiết bị di động.
Thêm vào width="800" height="450" tuy chỉnh khung hình ảnh

Trước khi thêm image thì các bạn vào sửa Template tìm  và thay javascrip sau nó bằng code sau


    <!--[ additional javascript ]-->
      <script>/*<![CDATA[*/ function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainCont").classList.add("drK"):document.querySelector("#mainCont").classList.remove("drK")}; var inputs = document.querySelectorAll('.widget input[type=search], .widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'f' : 'e'; this.setAttribute('data-bg',bg);}); }
/* Remove m=1 */ var url = window.location.toString(); if (url.indexOf("&m=1","&m=1") > 0) { var clean_url = url.substring(0, url.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_url); } var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri); };
/* Header Sticky */ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; var navbar = document.getElementById("mainH"); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {navbar.classList.add("st")} else {navbar.classList.remove("st");} };
/* lazy youtube */ ( function() {var youtube = document.querySelectorAll(".lazyYt"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })();
/* Lightbox image script, source: kompiajaib.com/2021/09/update-image-lightbox-dengan-css-dan.html */ for (var imageslazy = document.querySelectorAll('.pS .separator img, .pS .tr-caption-container img, .pS .psImg >img, .pS .btImg >img'), i = 0; i < imageslazy.length; i++) imageslazy[i].setAttribute('onclick', 'return false'); function wrap(o, t, e) {for (var i = document.querySelectorAll(t), c = 0; c < i.length; c++) {var a = o + i[c].outerHTML + e; i[c].outerHTML = a} } wrap('<div class="zmImg">', '.pS .separator >a', '</div>'); wrap('<div class="zmImg">', '.pS .tr-caption-container td >a', '</div>'); wrap('<div class="zmImg">', '.pS .separator >img', '</div>'); wrap('<div class="zmImg">', '.pS .tr-caption-container td >img', '</div>'); wrap('<div class="zmImg">', '.pS .psImg img', '</div>'); for (var containerimg = document.getElementsByClassName('zmImg'), i = 0; i < containerimg.length; i++) containerimg[i].onclick = function() {this.classList.toggle('s');};
Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'}),'undefined'!=typeof infinite_scroll&&infinite_scroll.on('load',function(){Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'}) }); /*]]>*/</script>

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

<!--[ Grid Image ]-->
    <div class='psImg grImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    </div>

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

Show All

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Chỉ có thể nhấp vào chức năng 'Show All' một lần, không thể ẩn ảnh lại khi bạn đã kích hoạt.

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

Đã thêm chức năng cuộn trên hình ảnh sẽ chỉ hoạt động trên chế độ xem trên thiết bị di động.

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Hình ảnh lazyLoad

Tính năng này rất hữu ích để tăng điểm PageSpeed của blog, việc tải hình ảnh sẽ bị trì hoãn cho đến khi người dùng cuộn trang đến vùng hình ảnh..

Đồng thời sử dụng <noscript> để vẫn hiển thị hình ảnh khi người dùng tắt javascript.

<div style='text-align: center;'>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Bài đăng liên quan thủ công

Bài viết liên quan: :

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

Ngắt đoạn trong bài viết

Có thể được sử dụng để tách các đoạn hoặc tạo một chương mới trong một bài đăng, bạn có thể xem ví dụ về cách nó trông như thế nào trong bài đăng này.

<!--[ Để ngắt các đoạn văn ra xa nhau ]-->
<hr>

Đoạn văn có thụt lề văn bản

Tính năng này được sử dụng để làm cho dòng đầu tiên của đoạn văn được thụt lề với một giá trị xác định trước. Bạn cũng có thể áp dụng nó cho một số đoạn văn khác.

<p class='pIndent'>Your_paragraph_is_here.</p>

Chữ to đầu dòng

MLà một chữ in hoa lớn dùng làm thành phần trang trí ở đầu đoạn văn, kích thước thường từ hai dòng trở lên.

Nắp thả sẽ thay đổi kích thước của chữ cái đầu tiên để nó giảm một hoặc nhiều dòng xuống. Nhiều loại phương tiện in ấn sử dụng nắp thả như sách, tạp chí, báo, v.v. vì chúng có thể làm tăng thêm sự hấp dẫn về mặt hình ảnh.

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

Kiểu khác bạn có thể sử dụng:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.

Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

<blockquote class='s-1'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. 
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Ghi chú (Note)

Được sử dụng để thêm thông tin quan trọng, câu cảnh báo hoặc câu đánh dấu. Có Style cách bạn có thể thử:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Với màu khác:

Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Bảng

Tự động có chức năng cuộn khi chiều dài cột vượt quá chiều rộng của vùng xem / màn hình. Sử dụng bảng phức tạp hơn một chút trong HTML, chúng tôi khuyên bạn nên tìm hiểu thêm về bảng HTML trước khi sử dụng chúng.

Ví dụ về một bảng với dữ liệu thực:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

<div class='table'>
  <table border='1' width='100%' cellspacing='0' cellpadding='0' align='center'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

white-space:nowrap; chỉ định văn bản là một dòng duy nhất, văn bản sẽ không nằm ở dòng tiếp theo và sẽ tiếp tục cho đến khi   tìm thấy thẻ.
min-width:100%; xác định chiều rộng tối thiểu của bảng, bạn có thể thay đổi nó thành đơn vị px chẳng hạn 500px. Thay đổi nó thành 0 nếu bạn muốn chiều rộng bảng được xác định tự động.
Có thể thay <table style='white-space:nowrap; min-width:100%;'>.

Table of Content thủ công

Nội dung

Hình ảnh có chú thích
Bài đăng liên quan thủ công
Ngắt bài
Blockquote

Với tiêu đề phụ:

Heading_title

Sử dụng Table of Content thủ công phức tạp hơn phiên bản tự động, bạn phải thêm một thuộc tính ID khác nhau trong mỗi thẻ tiêu đề và ghi nó vào danh sách nội dung.

Đây là một ví dụ về thẻ tiêu đề có ID tùy chỉnh:

<h2>Your_Heading</h2>
    
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
    
<h3 id='subHeading'>Sub_Heading_1</h3>

Viết danh sách nội dung chính xác:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

Xóa thuộc tính open='' để tự động đóng Mục lục khi trang được tải lần đầu tiên.
Bạn có thể thay đổi tiêu đề hoặc cụm từ 'Hiển thị tất cả / Ẩn tất cả' trong phần được đánh dấu.

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

Table of Contents

Tùy chọn dễ nhất để hiển thị Mục lục. Tính năng này sẽ hiển thị tất cả các thẻ tiêu đề trong bài đăng của bạn (ba cấp độ h2 - h4), vì vậy hãy đảm bảo rằng bạn viết thẻ tiêu đề theo thứ tự. Lỗi Chung

Thêm Javascript để xác định bố cục tiện ích ToC bán tự động:

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details>

Thêm tập lệnh này vào cuối bài đăng của bạn để bật ToC bán tự động.

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

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>

Công cụ đánh dấu cú pháp

Được sử dụng để xác định các dòng mã máy tính (HTML, CSS, Javascript, v.v.) trong bài đăng.

<!--[ Change classname to html, css, or js ]-->
<div class='pre html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Việc bổ sung mã màu trong cú pháp được viết thủ công, chúng tôi không cung cấp tính năng cú pháp tô màu tự động.

Thay đổi html để xác định định dạng mã khác, có 3 tùy chọn khả dụng, đó là: html, css, dan js.
Các giá trị white-space:pre-wrap; hữu ích để tắt tính năng cuộn bên, mã dài sẽ được giữ nguyên và cung cấp một chút chức năng cuộn để giữ cho nó dễ đọc..
max-height:none; xác định chiều cao tối đa của cú pháp không được đặt (tự động), hãy thay đổi giá trị none thành ví dụ: 400px để chỉ định chiều cao tối đa của cú pháp chỉ là 400 pixel.
Sử dụng code_here để thêm màu đỏ/cam.
Sử dụng code_here để thêm màu xanh lam..
Sử dụng code_here để thêm màu xanh lá cây..
Sử dụng code_here để thêm màu xám.
Sử dụng code_here để thêm màu xanh lam.

Công cụ cú pháp MultiTabs

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://median-ui.jagodesain.com/",
  "name": "Median UI",
  "alternateName": "Median UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://median-ui.jagodesain.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ 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'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

Thuộc tính checked xác định tab đầu tiên xuất hiện theo mặc định.
Đảm bảo thuộc tính id='...' và for='...' có cùng giá trị. ID phải là duy nhất, không thể có hai ID giống nhau trong một trang.
Thay đổi thuộc tính data-text='HTML' trong phần được đánh dấu để đổi tên tab.

Ẩn/Hiện nội dung

Được sử dụng để tạo các widget tương tác mà người dùng có thể mở và đóng theo yêu cầu. Mặc định widget này được đóng lại, sẽ hiển thị nội dung trong đó khi người dùng nhấn nút lệnh.

Bất kỳ nội dung nào cũng có thể được đưa vào widget này.

Spoiler:

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ế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

Chuyển đổi nội dung

Accordion_first_title

Accordion_second_title

Accordion_third_title (alt)

Accordion_fourth_title (alt)

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ế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa..

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

Sử dụng thẻ alt (được đánh dấu trong đoạn mã ở trên) để thay đổi kiểu biểu tượng.
Số lượng vật dụng đàn accordion bạn có thể thêm là không giới hạn.

Link bên ngoài

Thông báo cho người dùng nếu liên kết sẽ dẫn đến một trang web khác.

Đây là liên kết bên ngoài

<a class='extL' href='url_is_here' rel='noreferrer' target='_blank'>Title_link</a>

Link Button

Xác định một nút mà người dùng có thể nhấp vào.

Button

<a class='button' href='url_is_here'>Title_link</a>

Kiểu khác:

Button

<a class='button ln' href='url_is_here'>Title_link</a>

Với biểu tượng:

Download
Demo

<a class='button' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon demo'></i>Title_link</a>

Với biểu tượng <svg>:

WhatsApp của tôi!
Mua bây giờ!

<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

Quan trọng!
Thêm một thuộc tính style='fill:#fff; margin-right:12px;' hoặc style='stroke:#fff; margin-right:12px;' để cung cấp cho biểu tượng SVG màu trắng.

Hai BUTTON trên một dòng::

Demo Download

<div class='btnF'>
  <a class='button ln' href='url_is_here' rel='noreferrer' target='_blank'>Demo</a>
  <a class='button' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i>Download</a>
</div>

Link Download

Để cung cấp cho người dùng thông tin tệp đã tải xuống.

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='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Với hình nền thay vì văn bản:

about_me.png 10kb

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicXvwLy9nzdk2o0OryVHV5Q95OcbxCDSEwG42oQ6rTQWScXdrgVxeSJE7IQy9Pm5y2E6kO0-u6XQw80HKJzY7It3T-wen3Rh3FLHszglz_vLydVjm-zS7rD8EF8MfZsdu87SkbDyyM8Q/s0/Story+-+About+Me.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Lazy Youtube

Hữu ích cho việc giảm tải video Youtube sau khi người dùng cuộn trang.

<!--[ Lazy youtube ]-->
<div class='lazyYt' data-embed='Youtube_video_ID'>
  <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>
</div>

Giảm tải (loading) iframe với chức năng defer.js:

<!--[ Lazysize iframe ]-->
<div class='videoYt'>
  <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxxxxxxxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Thay đổi phần được đánh dấu bằng ID của video Youtube bạn muốn hiển thị.
Bạn có thể tìm thấy ID video trong url video Youtube, ví dụ: youtube.com/watch?v=p5MY9CY5MOk.

Bài tham khảo (Cuối bài viết)

Để viết danh sách các tài liệu tham khảo hoặc chú thích bên dưới bài đăng.

Source:
iteamos.blogspot.com

<p class='pRef'>Source:<br> iteamos.blogspot.com</p>

Hoặc bên phải bài đăng

Source:
iteamos.blogspot.com

<p class='pRef' style='text-align:right;'>Source:<br> iteamos.blogspot.com</p>

Truy cập Bypass Google Account APK để tải file APK nhé

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

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

Hình ảnh lazyLoad

Bài đăng liên quan thủ công

Ngắt đoạn trong bài viết

Đoạn văn có thụt lề văn bản

Chữ to đầu dòng

Đoạn trích dẫn

Ghi chú (Note)

Bảng

Table of Content thủ công

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

Viết code

Công cụ đánh dấu cú pháp

Công cụ cú pháp MultiTabs

Ẩn/Hiện nội dung

Chuyển đổi nội dung

Link bên ngoài

Link Button

Link Download

Lazy Youtube

Bài tham khảo (Cuối bài viết)

Hướng dẫn tắt thông báo sử dụng dữ liệu Vietnamobile trên Facebook

Download Oppo Unlock Tool (Pattern, FRP, Network) 2022

Nexus LiteOS 10 v1709 | Windows 10 Lite Gaming by TheWorldofPC

Windows 10/11 Pro Lite AIO Edition x64 Mar 2022 - Pre-Activated

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

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

Hình ảnh lazyLoad

Bài đăng liên quan thủ công

Ngắt đoạn trong bài viết

Đoạn văn có thụt lề văn bản

Chữ to đầu dòng

Đoạn trích dẫn

Ghi chú (Note)

Bảng

Table of Content thủ công

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

Viết code

Công cụ đánh dấu cú pháp

Công cụ cú pháp MultiTabs

Ẩn/Hiện nội dung

Chuyển đổi nội dung

Link bên ngoài

Link Button

Link Download

Lazy Youtube

Bài tham khảo (Cuối bài viết)

1 nhận xét