Bạn có các câu hỏi ? Liên hệ với chúng tôi Messenger !

All Styles Typography and Writing Formats

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Tất cả các định dạng kiểu chữ và chữ viết mới trong giao diện người dùng Plus mới nhất v2.6

Kiểm tra các trang được cập nhật gần đây:
1.Liên kết an toàn
2. Tiếp xúc(API Telegram)

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

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

Định dạng Viết cho: Mẫu Plus UI theo chủ đề v2.6.1
Cập nhật vào: 1 tháng 6 năm 2022


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'>Your_caption_is_here</td>
</tr>
</tbody>
</table>

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

Đị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 với 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ó.

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

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

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:

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

Đị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 việc 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

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

Định dạng viết:

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

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

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

Bài viết liên quan

Định dạng Viết:

<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

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ề giao diện của nó:


Định dạng viết:

<!--[ To break paragraphs apart ]-->
<hr>

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

Khách hàng là rất quan trọng, khách hàng sẽ được khách hàng theo dõi. Đối với tiền đình, đầu tư được thực hiện, và kích hoạt là hữu ích. Mauris vel diam permanentesque lorem lacinia luctus.

Định dạng viết:

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

Đoạn văn có Drop cap

Mlà 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 chữ cái đầu tiên của đoạn vă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.

Định dạng viết:

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

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

— Anonymous

Định dạng viết:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

Phong cách khác:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
  • Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
  • Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Định dạng Viết:

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

Ghi chú 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:

Khách hàng là rất quan trọng, khách hàng sẽ được khách hàng theo dõi. Đối với tiền đình, đầu tư được thực hiện, và kích hoạt là hữu ích.

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

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

Cảnh báo!Mauris vel diam permanentesque lorem lacinia luctus. Cho dù tuyệt vời đến đâu, một rung động trong bóng rổ, câu chuyện của đất nước đó. Nhưng nó cần một phim hoạt hình bóng rổ thông minh nhưng xấu xí.

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

Bàn

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 <br>gặp 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 0nế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 đề 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 open=''thuộc tính để 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.

Bảng nội dung 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ự. Đọc: Lỗi chung

Mã để chỉ định vị trí 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='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 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 một đị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 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ị nonethà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 đỏ / orage.
  • Sử dụng <i class='blue'>code_here</i>để thêm màu xanh lam.
  • 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àu xám.
  • Sử dụng <i class='block'>code_here</i>để thêm một khối màu xanh lam.

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

Cú pháp sau sẽ tự động được tô sáng / tô màu bằng cách sử dụngHighlight.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 theo ngôn ngữ, tức là nếu là html, bạn phải thêm htmlhoặc language-htmlcù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 class='block'></i>, đ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 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://plus-ui.fineshopdesign.com/",
"name": "Plus UI",
"alternateName": "Plus UI",
"potentialAction": {
"@type": "SearchAction",
"target": "https://plus-ui.fineshopdesign.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}

Viết mã:

<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 rằng các thuộc tính id='...'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:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<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

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

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

Cái nút
<a class='button' href='url_is_here'>Title_link</a>

Phong cách thay thế:

Cái nút
<a class='button ln' href='url_is_here'>Title_link</a>

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

Tải xuống
Thử nghiệm
<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 tôi!
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>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:

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

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

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 Ngày 1 tháng 1 năm 2022 165KB 1080×1080 .webp

Không có hình ảnh:

about_me.webp Ngày 1 tháng 1 năm 2022 165KB 1080×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

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.

Live Fast
Alan Walker & A$AP Rocky
00:00
03:52

Đị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 lười biếng

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

Video trên Youtube
<!--[ 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 defer.jschức năng:

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

Nguồn:
www.example.com

<p class='pRef'>Source:<br> www.example.com</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>

Bài trước hoặc Bài tiếp theo

Hiện đã được tự động hóa.

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Thêm chi tiết
Ối!
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.
Đã phát hiện ra trình chặn quảng cáo!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng trình chặn quảng cáo trong trình duyệt của mình.
Doanh thu 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.