Định dạng bài viết Median UI 1.6

Định dạng đánh máy và viết mã cho bài đăng, áp dụng cho tất cả các 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 viết' khi đang sử dụng một số tính năng này.

  1. Trong chế độ xem của trình 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 viết.
  3. Lựa chọn 'Chế độ xem HTML'.

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

Hình ảnh có chú thích và hộp đèn tự động

Tất cả kiểu chữ và định dạng bài viết
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ử.
<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>

Việc thêm 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.


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

Xây dựng đường cao tốc mới Điểm thu hút chính theo dõi Langtang Chế phẩm De Spain Trải nghiệm chèo thuyền ở Pokhara
<!--[ 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>

Hình ảnh với hiển thị tất cả chức năng

Xây dựng đường cao tốc mới Điểm thu hút chính theo dõi Langtang Chế phẩm De Spain
Trải nghiệm chèo thuyền ở Pokhara
Xây dựng đường cao tốc mới Điểm thu hút chính theo dõi Langtang Chế phẩm De Spain Trải nghiệm đua xe đạp qua sa mạc
<!--[ 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 ở chế độ xem trên thiết bị di động.

Xây dựng đường cao tốc mới Điểm thu hút chính theo dõi Langtang Chế phẩm De Spain
<!--[ 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 nó <noscript> để vẫn hiển thị hình ảnh khi người dùng tắt javascript.

<div>
  <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 viết liên quan thủ công

Đ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'>
  <!--[ Related title ]-->
  <b>Đọc thêm:</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 bài

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.

<!--[ To break paragraphs apart ]-->
<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>

Đoạn văn có Drop cap

Là chữ in hoa cỡ 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>

Blockquote

Giá kết bạn là giá cao hơn giá bình thường vì nó nhằm mục đích giúp đỡ những người bạn đang bắt đầu kinh doanh

—Ivan Lanin
<blockquote><i>Your_text_here<br><br>

  —Your_text_here</i></blockquote>

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

Bản thân đau rất nhiều, mà nguyên nhân chính là đau. Theo đó, các vòm của tài sản phát triển, và nó trở thành một món hàng và một con mèo. Mauris vel diam pastyesque lorem lacinia luctus. Không tuyệt làm sao, rung động trước sự báo thù, nước sốt mà trái đất.
  • Nhưng anh ta lấy bộ phim hoạt hình báo thù khôn ngoan nhưng đáng xấu hổ. Điều đó có thể cảm thấy tốt, nhưng với sự căm ghét đối với việc khắc phục sự cố.
  • Có một số sợ hãi về cuộc sống trong các hóa đơn, vì protein là quan trọng, hệ thống miễn dịch. Nhưng ở Pakistan, nó là tinh khiết.
<blockquote class="s-1 notranslate">
  <div>Your_text_here
    <ul>
      <li>Your_text_here</li>
      <li>Your_text_here</li>
    </ul>
  </div>
</blockquote>

Chữ trên và chữ dưới

h2, m2

h<sub>2</sub>
m<sup>2</sup>

Ghi chú khối

Đượ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ó hai kiểu bạn có thể thử:

Bản thân đau rất nhiều, mà nguyên nhân chính là đau. Theo đó, các vòm của tài sản phát triển, và nó trở thành một món hàng và một con mèo.

<p class='note'>Your_text_here</p>

Với các màu sắc khác nhau:

Chú ý!
Không tuyệt làm sao, rung động trước sự báo thù, nước sốt mà trái đất. Nhưng anh ta lấy bộ phim hoạt hình báo thù khôn ngoan nhưng đáng xấu hổ.

<p class='note wr'><b>Chú ý!</b><br>Your_text_here</p>

Table

Tự động có chức năng cuộn khi chiều dài cột vượt quá chiều rộng vùng 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:

No Column_1 Column_2 Column_3 Column_4 Column_5
1 Data_table_1 00.000.000 0.000.000 0.000.000 0.000.000
2 Data_table_2 00.000.000 0.000.000 0.000.000 0.000.000
3 Data_table_3 00.000.000 0.000.000 0.000.000 0.000.000
4 Data_table_4 00.000.000 0.000.000 0.000.000 0.000.000
<div class='table'>
  <table style='white-space: nowrap; min-width:100%;'>
    <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>00.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>00.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>00.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>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</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 <br> 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.

Mục lục hướng dẫn sử dụng

Nội dung

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

Mục lục

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 bạn viết thẻ tiêu đề theo thứ tự.

Mã để 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>

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 viết.

<!--[ 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 tên lớp htmlđể xác định định dạng mã khác, có sẵn 3 tùy chọn html, cssjs.
  • 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 thiết lập (tự động), 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 nó <code>Your_code_here</code> đánh dấu mã code trên bài viết.
  • Sử dụng nó <i class='red'>code_here</i> để thêm màu đỏ.
  • Sử dụng nó <i class='blue'>code_here</i> để thêm màu xanh lam.
  • Sử dụng nó <i class='green'>code_here</i> để thêm màu xanh lá cây.
  • Sử dụng nó <i class='gray'>code_here</i> để thêm một màu xám.
  • Sử dụng nó <i class='block'>code_here</i> để thêm các khối màu xanh lam.

Công cụ đánh dấu 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='...'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.

Hiển thị nút ẩn

Đượ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_here</p>
</details>

Chuyển đổi hoặc sắp xếp nội dung

Xác định nội dung bổ sung mà người dùng có thể mở và đóng theo yêu cầu trong nhóm, thường được sử dụng cho danh sách câu hỏi hoặc Câu hỏi thường gặp (Câu hỏi thường gặp).

Accordion_first_title

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_second_title

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_third_title

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_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 tên lớp 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.

Liên kết 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.

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

Button Link

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

Phong cách thay thế

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

Với các biểu tượng:

Download
Demo
<a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Demo</a>

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

Liên hệ!
Mua ngay!
<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>Liên hệ!</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>Mua ngay!</span>
</a>

Ghi chú:
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 nút trên một dòng:

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

Download Link

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

Chiều rộng 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(//3.bp.blogspot.com/.../title.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 trì hoãn tải video Youtube sau khi người dùng cuộn trang.

Youtube videoYoutube video
<!--[ 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>

Trì hoãn tải 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

    Để thêm danh sách các tham chiếu đến các bài báo bạn đã viết:

    Tham khảo: www.giahuy.net

    <p class="pRef">Tham khảo: www.giahuy.net</p>
Làm mọi thứ với một niềm đam mê, hoặc là chẳng gì cả!
Mọi thắc mắc hãy liên hệ với tôi.

2 nhận xét

  1. qua thi e phải áp dụng cho blog của e mới dc, toàn những cái e cần k a ạa
    1. Cám ơn bạn đã ghé thăm!
Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!