Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

Tất cả kiểu chữ, định dạng chữ viết và các tính năng bổ sung khác

Đị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 Soạn thư' 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. 2 tùy chọn sẽ xuất hiện: Chế độ xem HTML và chế độ xem Soạn thư.
  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ữ, định dạng chữ viết và các tính năng bổ sung khác
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 chèo thuyền ở Pokhara
<!--[ 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 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

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Bạn có thể muốn đọc bài viết này:</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>

Bài đăng tự động có liên quan

Related Posts
<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Ngắt bài

Có thể được sử dụng để tách các đoạn vă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 trong đoạn văn có một thụt lề với giá trị được 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 có Drop Cap

Mlà 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ể tăng thêm sự hấp dẫn cho thị giác.

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote

Hầu hết mọi người đánh giá quá cao những gì họ có thể làm trong một năm và đánh giá quá thấp những gì họ có thể làm trong mười năm.

— Bill Gates
<blockquote>Your_paragraph_is_here</blockquote>

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

Mọi thứ bạn muốn đều có thể là của bạn: Kiểu công việc bạn muốn, mối quan hệ bạn cần, những điều làm bạn hạnh phúc. Nhưng trước tiên bạn phải biết bản thân mình muốn điều gì? – Richard Koch.
  • Nếu cơ hội không gõ cửa nhà bạn, có nghĩa là nhà bạn chưa có cửa, hãy gắn 1 cái. – Moilton Berle
  • Phải có trí tuệ, dù nhỏ bé cũng được, nhưng phải là trí tuệ của mình – Maxim Gorki
<blockquote class='s-1'>
  <div>Your_paragraph_is_here
    <ul>
      <li>Your_paragraph_is_here</li>
      <li>Your_paragraph_is_here</li>
    </ul>
  </div>
</blockquote>

Ghi chú Khối

Nguồn sức mạnh lớn nhất trên thế giới là tuổi trẻ và vẻ đẹp của người phụ nữ. – Chanakya

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

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

Chú ý
Bạn có hai cách để sống cuộc sống của mình. Một là nghĩ rằng trên đời này chẳng có điều gì là phép màu. Hai là nghĩ rằng mọi thứ đến với bạn đều là phép màu.

<p class='note wr'><b>Chú ý</b><br>Your_paragraph_is_here</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 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:

Tên Chức vụ Văn phòng Tuổi tác Ngày bắt đầu Lương
Tiger Nixon Kiến trúc hệ thống Edinburgh 61 2011/04/25 $320,800
Garrett Winters Kế toán viên Tokyo 63 2011/07/25 $170,750
Ashton Cox Tác giả kỹ thuật cơ sở San Francisco 66 2009/01/12 $86,000
Cedric Kelly Nhà phát triển Javascript cấp cao Edinburgh 22 2012/03/29 $433,060
Airi Satou Kế toán viên Tokyo 33 2008/11/28 $162,700
<div class='table'>
    <table style='white-space:nowrap; min-width:100%; margin:0'>
      <thead>
        <tr>
          <th>Tên</th>
          <th>Chức vụ</th>
          <th>Văn phòng</th>
          <th>Tuổi tác</th>
          <th>Ngày bắt đầu</th>
          <th>Lương</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>Kiến trúc hệ thống</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Kế toán viên</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Tác giả kỹ thuật cơ sở</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Nhà phát triển Javascript cấp cao</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Airi Satou</td>
          <td>Kế toán viên</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 <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

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

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ó 3 tùy chọn có sẵn, đó là 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 đặt (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 <i class='red'>code_here</i> để thêm màu đỏ.
  • Sử dụng <i class='blue'>code_here</i> để thêm màu xanh.
  • Sử dụng <i class='green'>code_here</i> để thêm màu xanh lá cây.
  • Sử dụng <i class='gray'>code_here</i> để thêm một màu xám.
  • Sử dụng <i class='block'>code_here</i> để thêm các khối màu xanh lam.

Bút đánh dấu cú pháp màu tự động

Cú pháp sau được tự động tô sáng/tô màu bằng cách sử dụng Highlight.js

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

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.

Chuyển đổi Hiển thị/Ẩ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:

Đến lúc cuối cùng, bạn sẽ không được đánh giá bởi những gì đã cam kết thực hiện, mà bởi những gì bạn đã hoàn thành.

<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 hoặc sự sắp xếp

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

Liên kết nút

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

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:

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

Hoặc canh nút vào giữa:

<div style='text-align:center'>
  <a class='button' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon demo'></i>Demo</a>
</div>

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

WhatsApp me!
Buy now!
<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 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>

Liên kết tải xuống

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

Tính năng này sẽ hiển thị đếm ngược trước khi người dùng tải xuống bất kỳ tệp nào.

Music_Wallpaper.png Music 3.05MB 1920×1080 .png
<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Music Player

Trình phát nhạc có thể được sử dụng để phát các bài hát bằng các tệp âm thanh, tức là MP3.

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

Youtube lười biếng

Hữu ích cho việc trì hoãn 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>

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

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

Nguồn:
www.giahuy.net

<p class='pRef'>Nguồn:<br> www.giahuy.net</p>

Hoặc để chèn link trực tiếp:

Copyright © www.giahuy.net

<p class='pRef' style='text-align: right'>Copyright © <a href='url_is_here' rel='noreferrer' target='_blank'>www.giahuy.net</a></p>

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

1 nhận xét

  1. demo
Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.