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

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

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 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 Soạn thư.
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

Chú thích là những đoạn văn ngắn xuất hiện dưới các bức ảnh trong sách, tạp chí hoặc báo nhằm mô tả một bức tranh hoặc giải thích những gì những người trong đó đang làm hoặc nói.

Dạng viết.

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='lazy full' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption' style='text-align:center'>Text_here</td>
    </tr>
  </tbody>
</table>

Hình ảnh hộp đèn

Dạng viết.

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

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

Dạng viết.

<div class='psImg grImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

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

Chức năng cuộn sẽ chỉ hoạt động trên chế độ xem trên thiết bị di động.

Dạng viết.

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Hiển thị/Ẩn hình ảnh

Sau khi nhấn "Show all" thì không thể ẩn ảnh được nữa.

Show all

Dạng viết.

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Show all</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Đảm bảo rằng các thuộc tính id='...' và for='...' có cùng giá trị, trong ví dụ này chúng tôi đang sử dụng for-hideImage
Không chuyển sang Chế độ soạn thư/Chế độ xem văn bản trong khi sử dụng tính năng này, nếu không tiện ích này có thể không hoạt động bình thường.

Hình ảnh lazyLoad

Xin lưu ý với bạn rằng hình ảnh có lazyLoad sẽ không được hiển thị khi người dùng tắt Javascript trong trình duyệt của họ. Ngoài ra, hình thu nhỏ sẽ không xuất hiện nếu tất cả hình ảnh trong một bài đăng đang sử dụng lazyLoad.

Dạng viết.

<div class='separator'>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Điều quan trọng là thay đổi alt='image_title' thuộc tính với tiêu đề hình ảnh của bạn.
Thay thế tất cả mã data-scr và src thuộc tính trên dòng tiếp theo bằng url hình ảnh của bạn.
<noscript> điều quan trọng là sử dụng làm bản sao lưu trong trường hợp người dùng tắt Javascript trong trình duyệt của họ.
Để hiển thị hình thu nhỏ, hãy đảm bảo có một hình ảnh không có lazyLoad.

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

Thành phần này được viết thủ công và không tự động xuất hiện trong mọi bài đăng, ưu điểm là widget này có thể đặt ở bất kỳ đoạn văn nào bạn muốn.

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

Dạng viết.

<div class='pRelate notranslate'>
  <!--[ Related title ]-->
  <b>Bạn có thể muốn đọc bài viết này:</b>
  <ul>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
  </ul>
</div>

Dấu ngắt bài

Có sẵn trong 3 phong cách khác nhau.

Dạng viết.

<hr>

Dạng viết.

<hr class='dot'>

Dạng viết.

<hr class='line'>

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.

Dạng viết.

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

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

Dạng viết.

<p><span class='dropCap'>T</span>ext_paragraph</p>

Trích dẫn đoạn văn

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

Dạng viết.

<blockquote>text_paragraph</blockquote>

Phong cách thay thế:

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

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.

Phải có trí tuệ, dù nhỏ bé cũng được, nhưng phải là trí tuệ của mình.

Dạng viết.

<blockquote class='s-1'>text_paragraph</blockquote>

Ghi chú khối

1. Ghi chú chuẩn

Một mối tình đơn phương mang nhiều cảm xúc buồn: Người ấy đã có đích đến, và bạn đang ở trong trạng thái buồn. Nhưng sau đó sẽ cởi mở hơn và chúc cho người ấy luôn sống vui vẻ, vì có thể bạn sẽ thấy vui cùng niềm vui đó.

Dạng viết.

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

2. Lưu ý cảnh báo

Họ sẽ chán ngấy việc thấy bạn ủ rũ, than phiền và ca cẩm về người ấy. Và trong mắt mọi người bạn sẽ biến thành một bà cô tội nghiệp bị thất tình.

Dạng viết.

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

Danh sách hướng dẫn

“Nếu yêu lần nữa thất bại anh sẽ là quá khứ mới của em, nếu thành công chúng ta sẽ là tương lai của nhau”
“Đừng tìm người chín chắn để yêu, cứ yêu đi rồi nó sẽ chín chắn”
“Thế giới rất đông người, đã gặp được em, nếu có thể hãy ở lại nhé”
“Cái mền sạch nhất cũng có bụi”

Dạng viết.

<ol class='step noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Danh sách ưu/nhược điểm

Ưu điểm:

Tình yêu thương cũng như cơ thể của chúng ta là dòng chảy bất tận. – Jean Jacques Rousseau
Có điều kỳ diệu xảy đến với những người thực sự biết yêu thương: họ càng cho nhiều, họ càng có nhiều. – Rainer Maria Rilke
Bạn có thể làm gì để xây dựng hòa bình thế giới? Hãy về nhà và yêu thương gia đình của mình. - Mẹ Teresa
Trẻ nhỏ sẽ không nhớ bạn vì vật chất bạn cho chúng, mà vì tình cảm bạn dành cho chúng. - Richard L Evans

Dạng viết.

<b>Ưu điểm:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Nhược điểm:

Tình yêu thương cũng như cơ thể của chúng ta là dòng chảy bất tận. – Jean Jacques Rousseau
Có điều kỳ diệu xảy đến với những người thực sự biết yêu thương: họ càng cho nhiều, họ càng có nhiều. – Rainer Maria Rilke
Bạn có thể làm gì để xây dựng hòa bình thế giới? Hãy về nhà và yêu thương gia đình của mình. - Mẹ Teresa
Trẻ nhỏ sẽ không nhớ bạn vì vật chất bạn cho chúng, mà vì tình cảm bạn dành cho chúng. - Richard L Evans

Dạng viết.

<b>Nhược điểm:</b>
<ol class='cons noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Bảng

1. Bảng mặc định

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011>	$170,750

2. Không có dòng cột

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011>	$170,750

3. Với màu nền

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011>	$170,750

4. Thêm màu nền khi di chuột

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011>	$170,750

Dạng viết.

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>tille_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>

noWrap được sử dụng để tắt dòng mới, nghĩa là văn bản trong cột sẽ chỉ được viết trên một dòng.
w100 có nghĩa là bảng sẽ có chiều rộng 100% hoặc bằng chiều rộng của trang bài đăng, các tùy chọn khác có sẵn w90 dành cho chiều rộng 90% hoặc xóa tên lớp này để có chiều rộng tự động điều chỉnh.
Thêm vào class='table noLine' để loại bỏ đường thẳng đứng trong cột.
Sử dụng class='table withBg' để thêm màu nền cho hàng.
Sử dụng class='table hoverBg' để hiển thị màu nền khi con trỏ di chuột qua hàng của bảng.
Sự kết hợp của class='table noLine withBg' hoặc class='table noLine hoverBg' được cho phép.

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

Bạn có thể thêm tối đa 4 tab

Phối cảnh 3D là kỹ thuật dựng, tạo hình ảnh trong không gian 3 chiều, được thực hiện dưới sự hỗ trợ của các phần mềm đồ họa chuyên nghiệp. Thông qua phối cảnh 3D, người xem sẽ cảm nhận chân thực và rõ ràng hơn về hình ảnh, sự vật được thể hiện trong khung hình.

Có thể hiểu đơn giản, bản vẽ kiến trúc chính là một bộ hồ sơ bao gồm tất cả các yếu tố hoàn chỉnh về ngôi nhà. Trong bản vẽ, người thiết kế sẽ diễn giải ra hết các kích thước, hình dáng nhà, diện tích từng phòng để chủ nhà cũng như người thi công định hình được về công trình.

Bản vẽ kết cấu là một kế hoạch kỹ thuật mô tả cách xây dựng tòa nhà, nhà máy, nhà xưởng công nghiệp. Nó giống như một bản đồ đường, cung cấp hướng dẫn các quá trình xây dựng. Bản vẽ kiến trúc thường có trước bản vẽ kết cấu. Ngoài ra, trong một số trường hợp, bản vẽ kết cấu được dựa trên bản vẽ kiến trúc.

Bảng vẽ thiết kế điện nước là nền tảng xác định được những vị trí thiết kế và thi công mạch điện và các đường dẫn ống nước trong nhà. Nó làm cho hệ thống các mạch điện và vị trí lắp đặt được thống nhất và xác định trước.

Dạng viết.

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Chapter 1'></label>
  <label for='fTabs-2' data-text='Chapter 2'></label>
  <label for='fTabs-3' data-text='Chapter 3'></label>
  <label for='fTabs-4' data-text='Chapter 4'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    content_here
  </div>
</div>

Mục lục

Trong một số chủ đề, Mục lục có thể được viết bán tự động

Nội dung:

Dạng viết.

<details class='sp toc' open=''>
  <summary>Mục lục:</summary>
  <div class='toC'>
    <ol>
      <li><a href='#your_url'>heading_1</a></li>
      <li><a href='#your_url'>heading_2</a></li>
      <li>
        <a href='#your_url'>heading_3</a>
        <ol>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

open='' được sử dụng để giữ cho tiện ích luôn mở, hãy xóa thuộc tính này để đóng tiện ích khi trang được tải.
Thay thế văn bản “Nội dung” để thay đổi tiêu đề tiện ích.

Điều này có thể phức tạp hơn một chút vì nó được viết thủ công, nhưng bạn có thể quyết định vị trí đặt tiện ích này, hãy làm theo các bước dưới đây:

Thêm thuộc tính ID:
Thẻ tiêu đề trong bài viết được đánh dấu bằng <h2>, <h3>, <h4>, hoặc trong Chế độ soạn thư/Chế độ viết chọn Title, Subtitle, Small Title. Thêm một ID đặc biệt vào mỗi thẻ tiêu đề được tìm thấy.
Đây là một ví dụ về cách viết đúng:
```
<h2>Tiêu đề chính</h2>
```
```
<h2 id='main_heading'>Tiêu đề chính</h2>
```
Mỗi ID phải là duy nhất, việc lặp lại cùng một ID đều bị cấm.
Liên kết với các thẻ tiêu đề:
Thêm vào # trước mỗi ID bạn muốn gọi, ví dụ: thẻ tiêu đề có ID id='main_heading' có thể được gọi bằng href='#main_heading'.
Ví dụ viết đúng:
```
<li><a href='#main_heading'>Main Heading</a></li>
```
```
<li><a href='main_heading'>Main Heading</a></li>
```

Ẩn/hiện nội dung

Được sử dụng để tạo các widget tương tác có thể được người dùng ẩn hoặc hiển thị theo yêu cầu.

Ẩn/hiện nội dung

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

Dạng viết.

<details class='sp notranslate'>
  <summary>Ẩn/hiện nội dung</summary>
  <p>text_paragraph</p>
</details>

Thu gọn nội dung

Các hàng không giới hạn, thậm chí bạn có thể thêm tối đa> 100 hàng.

Jack Ma

"Hãy tìm kiếm sự cân bằng trong cuộc sống của bạn. Thành công trong công việc không có nghĩa là bạn đã thành công trong cuộc sống."

Bill Gates

"Để thành công trong kinh doanh, bạn cần phải đưa ra quyết định nhanh chóng và dựa trên thông tin có sẵn, thậm chí nếu thông tin đó không đầy đủ hoặc chính xác."

Steve Jobs

"Sáng tạo chỉ là kết nối mọi thứ với nhau. Khi bạn hỏi những người sáng tạo làm thế nào để làm nên một sản phẩm, họ sẽ cảm thấy ngượng ngùng một chút vì thực ra họ không làm gì cả. Những gì họ làm dần sáng tỏ theo thời gian và đến như một điều tự nhiên".

Mark Zuckerberg

"Người ta có thể rất thông minh hoặc sở hữu những kỹ năng có ích, nhưng nếu họ không tin vào chúng, họ sẽ không thực sự làm việc chăm chỉ."

Dạng viết.

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

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

Tiêu chuẩn

<pre>Your_text_is_here</pre>

.html

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

.css

/* 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)}
a:hover{opacity:.9;transition:opacity .1s}

.js

function downloadJSAtOnload() {
    var d = document.createElement('script');
    d.src = 'https://www.googletagmanager.com/gtag/js?id=00000', document.body.appendChild(d)
}
window.addEventListener ? window.addEventListener('load', downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent('onload', downloadJSAtOnload) : window.onload = downloadJSAtOnload;
window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '00000');

Phong tục

'IntersectionObserver'in window||document.write('<script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'><\/script>');

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

Dạng viết

<!--[ Change classname to html, css, or js ]-->
<div class='pre'>
  <pre>code_here</pre>
</div>

Thay thế class='pre' bằng class='pre html' để xác định định dạng mã .html, có 3 tùy chọn: pre html, pre css, pre js.
Thay thế class='pre' bằng class='pre custom' data-text='custom_code' để viết tiêu đề tùy chỉnh.
Thêm một style='' thuộc tính vào <pre> thẻ để sửa đổi nó, ví dụ thêm style='white-space: pre-wrap;' để tắt chức năng cuộn bên, mã dài sẽ được viết thành một dòng mới. Thêm style='max-height: 400px;' để xác định chiều cao tối đa của tiện ích chỉ 400px hoặc kết hợp cả hai thành style='white-space: pre-wrap; max-height: 400px;'.
Thêm màu thủ công:
- <i class='red'>code</i>: cho màu đỏ.
- <i class='blue'>code</i>: cho màu xanh.
- <i class='geen'>code</i>: cho màu xanh lá cây.
- <i class='gray'>code</i>: cho màu xám.
- <i class='block'>code</i>: cho khối màu xanh.
Hoặc sử dụng HLJS Parse công cụ để thêm màu tự động.

Cú pháp nhiều tab

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

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='Javascript'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>code_here</pre>
  </div>
  <div class='preC-2'>
    <pre>code_here</pre>
  </div>
  <div class='preC-3'>
    <pre>code_here</pre>
  </div>
</div>

Liên kết

1. Mới! liên kết:

Phân tích cú pháp

2. Phí! liên kết:

Nén/Làm đẹp CSS

3. Liên kết ngoài:

Trình tạo liên kết

Các link trên chỉ là link mẫu, khi click vào sẽ không dẫn tới bất kỳ trang nào.

Dạng viết:

<a class='new' href='your_url'>link_name</a>

<a class='free' href='your_url'>link_name</a>

<a class='extL' href='your_url'>link_name</a>

Liên kết button

file_name.zip 200kb

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='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

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

file_name.zip 200kb

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(https://blogger.googleusercontent.com/img/.../image.png)'></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='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Các link trên chỉ là link mẫu, khi click vào sẽ không dẫn tới bất kỳ trang nào.

Button

1. Kiểu mặc định:

Button

Dạng viết:

<a class='button' href='your_url'>Button</a>

2. Kiểu phác thảo:

Button

Dạng viết:

<a class='button ln' href='your_url'>Button</a>

3. Không có nền:

Button

Dạng viết:

<a class='button sc' href='your_url'>Button</a>

4. Có biểu tượng svg:

Button
Button
Button

Dạng viết:

<a class='button' href='your_url'>
  <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  <span>Button</span>
</a>

5. 2 cái trên cùng một hàng:

Info Download

Dạng viết:

<div class='btnF'>
  <a class='button ln' href='your_url'>
    <span>Info</span>
  </a>
  <a class='button' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
    <span>Download</span>
  </a>
</div>

Các link trên chỉ là link mẫu, khi click vào sẽ không dẫn tới bất kỳ trang nào.

Lazy Youtube

Video Youtube sẽ tải sau khi người dùng cuộn trang.

Dạng viết:

<div class='lazyYt' data-embed='Youtube_videoID' style='z-index: 1;'>
  <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 video Youtube <iframe> bằng chức năng defer.js (thay thế):

Dạng viết:

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

Thay thế Youtube_videoID bằng ID Youtube ưa thích của bạn.
ID video có thể được tìm thấy trên url Youtube, ví dụ youtube.com/watch?v=OG7w0ILhqB4.

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:

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

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.

Gia Huy

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

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

Hình ảnh hộp đèn

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

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

Hiển thị/Ẩn hình ảnh

Hình ảnh lazyLoad

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

Dấu ngắt bài

Thụt lề văn bản

Đoạn có Drop Cap

Trích dẫn đoạn văn

Ghi chú khối

Danh sách hướng dẫn

Danh sách ưu/nhược điểm

Bảng

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

Mục lục

Ẩn/hiện nội dung

Thu gọn nội dung

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

Cú pháp nhiều tab

Liên kết

Liên kết button

Button

Lazy Youtube

Bài tham khảo

Viết chữ in đậm trên Facebook

Chống copy bài viết trên blogger bằng CSS

Dựng mô hình tính toán Đồ án khung BTCT toàn khối bằng SAP2000

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

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

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

Hình ảnh hộp đèn

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

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

Hiển thị/Ẩn hình ảnh

Hình ảnh lazyLoad

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

Dấu ngắt bài

Thụt lề văn bản

Đoạn có Drop Cap

Trích dẫn đoạn văn

Ghi chú khối

Danh sách hướng dẫn

Danh sách ưu/nhược điểm

Bảng

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

Mục lục

Ẩn/hiện nội dung

Thu gọn nội dung

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

Cú pháp nhiều tab

Liên kết

Liên kết button

Button

Lazy Youtube

Bài tham khảo

1 nhận xét