Định dạng chữ viết và các tính năng bổ sung

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.

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 đề
Hai tùy chọn sẽ xuất hiện: Chế độ xem HTML và Chế độ xem Viết
Lựa chọn 'Chế độ xem HTML'.

Mẹo: Sử dụng Your_paragraph_here thẻ để 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

Chú thích trong hình ảnh này sẽ không được đọc trong mô tả/đoạn trích bài viết. Bạn cũng có thể chọn để giữ cho phụ đề rõ ràng trên các đoạn trích của bài viết.

Tất cả các bài viết kiểu chữ và định dạng

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

Đã thêm class='full' có tác dụng xóa hình ảnh lề và màn hình, chỉ hoạt động đối với chế độ xem trên thiết bị di động.

Định dạng viết:

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

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

Cầu Đỏ nối liền xã Trà Sơn với xã Trà Thủy

Định dạng viết:

<!--[ 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 có Hiển thị Tất cả Chức năng

Được sử dụng để ẩn một số hình ảnh và sẽ được hiển thị khi người dùng nhấp vào nút 'Hiển thị Tất cả'. Chức năng Hiển thị Tất cả chỉ có thể được kích hoạt một lần, Không thể ẩn hình ảnh một lần nữa khi bạn kích hoạt nó.

Show All

Định dạng viết:

<!--[ 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

Giống như cách bố trí hình ảnh ở trên, chỉ khác 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.

Chúng tôi cũng đã thêm hiệu ứng cuộn mượt mà vào tính năng này. Vui lòng thử mở trang này trên thiết bị di động của bạn:

Định dạng viết:

<!--[ 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

Hữu ích cho việc trì hoãn tải hình ảnh để điểm PageSpeed của blog cao hơn, hình ảnh sẽ chỉ tải khi người dùng cuộn đến vùng hình ảnh. Tất cả hình ảnh trong bài viết này đều sử dụng Lazyload.

Định dạng viết:

<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 đăng liên quan thủ công

Bạn có thể muốn đọc bài viết này:

Định dạng viết:

<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

Ngắt bài

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

Định dạng viết:

<!--[ 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.

Định dạng viết:

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

Đoạn văn có Drop cap

Là một chữ cái in hoa lớn được sử dụng như một yếu tố trang trí ở đầu đoạn văn hoặc phần. Kích thước của giới hạn giảm dần thường là hai hoặc nhiều dòng.

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.

Định dạng viết:

<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

Định dạng viết:

<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

Định dạng viết:

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

Blockquote mạng xã hội

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ì?.

Định dạng viết:

<blockquote class='pu_blq' data-author='Richard Koch'>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ì?.</blockquote>

Ghi chú Khối

Tính năng này 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 mà bạn có thể thử bao gồm:

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

Định dạng viết:

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

Định dạng viết:

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

Bảng

Bảng trong chủ đề này đã được đặt đáp ứng, ví dụ: nếu số cột hoặc chiều rộng của bảng vượt quá chiều rộng của màn hình, để không làm hỏng bố cục, bảng sẽ tự động có chức năng cuộn.

Vui lòng mở bài viết này trên thiết bị di động của bạn và đánh dấu phần bảng bên dưới:

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

Định dạng viết:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <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.

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

Nội dung:

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 đề với 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>

Định dạng viết:

<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 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:

Định dạng viết:

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

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 data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.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ó thể được viết theo cách thủ công, nhưng chúng tôi cũng cung cấp các tính năng cú pháp màu tự động.

Thay đổi để xác định định dạng mã khác, data-text='.html' tức là data-text='.css', v.v. data-text='.js' data-text='.php'
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 mã 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 code_here để thêm màu đỏ.
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ột khối màu xanh lam.

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

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

<!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>

Cú pháp mã màu:

<!--[ 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>

Lỗi thông thường:

Tính năng này tự động phát hiện ngôn ngữ và đánh dấu màu sắc. Nhưng trong một số trường hợp, nó có thể không tự động phát hiện ngôn ngữ mã, lúc đó bạn phải thêm tên lớp tùy theo ngôn ngữ, tức là nếu là html, bạn phải thêm html hoặc language-html cùng với hl.

Một ví dụ:

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

Hạn chế của việc sử dụng Bút đánh dấu cú pháp màu tự động:

Bạn không thể thêm bất kỳ thẻ nào trong Mã định dạng sẵn của mình. Ví dụ, bạn sẽ nói thêm , điều đó sẽ không bị chặn với màu xanh lam nữa.

Công cụ đánh dấu cú pháp đa chức năng

Your_code_is_here

Định dạng Viết:

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='10' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.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://www.giahuy.net/',
  'name': 'Gia Huy',
  'alternateName': 'Gia Huy',
  'potentialAction': {
    '@type': 'SearchAction',
    'target': 'https://www.giahuy.net/search?q={search_term_string}',
    'query-input': 'required name=search_term_string'
  }
}

Định dạng viết:

<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 checkedtính xác định tab đầu tiên xuất hiện theo mặc định.
Đảm bảo các thuộc tính id='...' và for='...' thuộc tính 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 data-text='HTML' thuộc tính 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.

Định dạng viết:

<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

Accordion_third_title (alt)

Accordion_fourth_title (alt)

Định dạng viết:

<!--[ 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.

Lược đồ câu hỏi thường gặp trong vi dữ liệu

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

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
Sample_link_alt

Định dạng viết:

<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Liên kết button

Button vào giữa và mở target blank:

Preview

Định dạng viết:

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

Button

Định dạng viết:

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

Phong cách thay thế:

Button

Định dạng viết:

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

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

Download
Preview

Định dạng viết:

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

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

WhatsApp me!
Buy now!

Định dạng viết:

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

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

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

Demo Download

<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 thông tin tệp đã tải xuống cho người dùng.

file_name.zip 200kb

Định dạng viết:

<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

Định dạng viết:

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

Hộp tải xuống đếm ngược

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.

Tính năng này yêu cầu liên kết tải xuống trực tiếp của các tệp đám mây. Bạn có thể sử dụng Google Drive để nhận liên kết tải xuống trực tiếp của tệp.

Với hình ảnh:

about_me.webp 15, thg 11, 2022 3.05MB 1920×1080 .webp

Không có hình ảnh:

about_me.webp 15, thg 11, 2022 3.05MB 1920×1080 .webp

Định dạng viết:

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

Máy nghe nhạc

Máy nghe 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.

Định dạng viết:

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

Video YouTube Lazyload

Hữu ích để trì hoãn việc tải video Youtube sau khi người dùng cuộn trang.

Định dạng viết:

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <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>
</div>

Trì hoãn tải iframe với chức năng defer.js:

Định dạng viết:

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <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>
</div>

Thay đổi phần được đánh dấu bằng ID video Youtube mà 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=axRAL0BXNvw.

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.

Source:
www.example.com

Định dạng viết:

<p class='pRef'>Source:<br> www.example.com</p>

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

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

Tiêu đề phụ

Để thay đổi Tiêu đề phụ trong bài đăng hoặc trang cụ thể.

<style>/*<![CDATA[*/
  /* To change Header Subtitle */
  .headH .headSub{max-width:none}
  .headH .headSub::before{content:'Typography'}
/*]]>*/</style>

Đi tới liên kết

Gia Huy

Định dạng chữ viết và các tính năng bổ sung

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

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

Hình ảnh có Hiển thị Tất cả Chức năng

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

Hình ảnh Lazyload

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

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

Ngắt bài

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

Đoạn văn có Drop cap

Blockquote

Ghi chú Khối

Bảng

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

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

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

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

Công cụ đánh dấu cú pháp đa chức năng

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

Chuyển đổi Hiển thị/Ẩn

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

Lược đồ câu hỏi thường gặp trong vi dữ liệu

Liên kết bên ngoài

Liên kết button

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

Hộp tải xuống đếm ngược

Máy nghe nhạc

Video YouTube Lazyload

Bài tham khảo

Tiêu đề phụ

Về tác giả

Đăng nhận xét

8 cách để giảm thời gian tải trang và cải thiện điểm số trang web

Bảng Excel tính thép dầm BTCT theo TCVN 5574-2018

Bảng Excel tính thép sàn BTCT theo TCVN 5574-2018

File excel tính toán và kiểm tra móng đơn BTCT

File Excel tự động ghi nhật ký thi công và in BBNT

Gia Huy