Trang chủ
Blogger

Median UI All Typography's & Writing Formats

Giao diện Median UI v1.7 cho nền tảng Blogger đã ra mắt từ lâu, tuy nhiên tài liệu chính thức vẫn chưa được cập nhật từ phiên bản v1.6. Vì vậy, tôi đã tổng hợp lại toàn bộ hệ thống trình bày chữ (typography) và bố cục văn bản để hỗ trợ người dùng sử dụng hiệu quả hơn.

Hầu hết các tính năng này chỉ có thể sử dụng ở chế độ Chế độ xem HTML và bạn cũng không thể chuyển sang chế độ Chế độ xem Soạn thư khi sử dụng một số tính năng này.
  • Trong chế độ xem trình chỉnh sửa bài đăng, hãy nhấp vào biểu tượng ở góc dưới bên phải của tiêu đề
  • Hai 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.

📐 Bố Cục Ảnh: Dạng Lưới (Grid)

Sử dụng lớp psImg grImg để hiển thị ảnh theo dạng lưới:

<div class="psImg grImg">
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied>
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied>
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied>
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied>
</div>

Lưu ý: Thay YOUR-IMAGE-LINK-HERE bằng liên kết ảnh thực tế.

🖼️ Bố Cục Ảnh: Nút Show All

Ẩn bớt ảnh và chỉ hiện khi người dùng bấm nút "Show All".

<input class="inImg hidden" id="for-hideImage" type="checkbox">
	<div class="psImg hdImg">
	  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
	  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
	  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
	  <div class="btImg">
	    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
	    <label for="for-hideImage" aria-label="Show all image">Show All</label>
	  </div>
	  <div class="psImg shImg">
	    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
	    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
    <!-- Ảnh sẽ hiển thị sau khi bấm Show All -->
  </div>
</div>

📱 Hiển Thị Ảnh Cuộn

Hiển thị ảnh cuộn ngang khi xem:

<div class="psImg scImg scrlH">
  <div class="zmImg"><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE" onclick="return false"></div>
  <div class="zmImg"><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE" onclick="return false"></div>
  <div class="zmImg"><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE" onclick="return false"></div>
</div>

📱 lazyLoad Image

Tính năng này 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 khu vực hình ảnh.
Ngoài ra, hãy sử dụng <noscript> để hiển thị hình ảnh khi người dùng tắt javascript trên trình duyệt.

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

<!-- lazyLoad auto default image unless not the first image-->
<img alt='image_title_here" src='https://4.bp.blogspot.com/.../name.png"/>

📌 Bài Viết Liên Quan (Manual Related Post)

Related Posts: 
<div class="pRelate notranslate">
  <b>Related Post:</b>
  <ul>
    <li><a href="YOUR-POST-LINK">YOUR-POST-TITLE</a></li>
    <li><a href="YOUR-POST-LINK">YOUR-POST-TITLE</a></li>
  </ul>
</div>

✍️ Post Break

Có thể được sử dụng để phân tách các đoạn văn hoặc tạo một chương mới trong bài đăng, ví dụ về cách thực hiện có thể được xem trong bài đăng này.

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

✍️ Paragraph with Text Indent

Tính năng này được sử dụng để thụt lề dòng đầu tiên của đoạn văn với một giá trị định sẵn. Bạn cũng có thể áp dụng tính năng này cho nhiều đoạn văn khác.

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

✍️ Dropcap Chữ Đầu Đoạn

This paragraph features a drop cap for visual appeal.

<p><span class="dropCap">T</span>his is a paragraph with dropcap.</p>

📝 Blockquote

Trích dẫn đơn giản:

“The only way to do great work is to love what you do.”

—Steve Jobs

Trích dẫn kiểu nâng cao:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Point one about this topic.
  • Point two for emphasis.
<!-- Style 1 -->
<blockquote><i>“The only way to do great work is to love what you do.”<br><br>—Steve Jobs</i></blockquote>

<!-- Style 2 -->
<blockquote class="s-1 notranslate">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ul>
      <li>Point one about this topic.</li>
      <li>Point two for emphasis.</li>
    </ul>
  </div>
</blockquote>

📊 Bảng Dữ Liệu (Table)

No Column 1 Column 2 Column 3 Column 4
1 Data 1 100 200 300
2 Data 2 150 250 350 
<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data 1</td>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data 2</td>
        <td>150</td>
        <td>250</td>
        <td>350</td>
      </tr>
    </tbody>
  </table>
</div>

🧑‍💻 Trình Hiển Thị Mã HTML

<p>Hello World</p>

Cần sử dụng công cụ mã hoá code tại đây

<div class="pre html">
  <pre>&lt;p&gt;Hello World&lt;/p&gt;</pre>
</div>

🗂️ Trình Hiển Thị Mã Đa Tab

HTML here
CSS here
JS here
<div class="pre tb">
  <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">
  <div class="preH tbHd scrlH">
    <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>
  <div class="preC-1"><pre>HTML here</pre></div>
  <div class="preC-2"><pre>CSS here</pre></div>
  <div class="preC-3"><pre>JS here</pre></div>
</div>

🔍 Show/Hide Nội Dung

Answer:

Here’s the answer!

<details class="sp notranslate">
  <summary data-show="Show" data-hide="Hide">Answer:</summary>
  <p>Here’s the answer!</p>
</details>

📂 Accordion / Toggle Menu

First Title

Content here.

Second Title

Content here.

<div class="showH">
  <details class="ac">
    <summary>First Title</summary>
    <div class="aC"><p>Content here.</p></div>
  </details>
  <details class="ac">
    <summary>Second Title</summary>
    <div class="aC"><p>Content here.</p></div>
  </details>
</div>

📌 Ghi Chú (Note Block)

This is a note.

Warning!
This is critical.

<p class="note notranslate">This is a note.</p>
<p class="note wr notranslate"><b>Warning!</b><br>This is critical.</p>

🔗 External Link

Thông báo cho người dùng nếu liên kết dẫn đến một trang web khác.

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

🔘 Các Loại Nút (Buttons)

Standard_button 
<a class='button' href='YOUR-LINK-HERE'>Standard_button</a>
Download 
<a class='button ln' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Download 
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Demo 
<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
Demo Download 
<div class='btnF'>
  <a class='button ln' href='YOUR-LINK-HERE'>Demo</a>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
Demo Download 
<div class='btnF'>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
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='YOUR-LINK-HERE'><i class='icon dl'></i></a>
</div>

🎥 Lazy Load Video YouTube

<div class='lazyYt' data-embed='YOUR YOUTUBE VIDEO LINK 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>

🧾 Thông Tin Tác Giả

Source:
https://docs.jagodesain.com

<p class="pRef">Source:<br> https://docs.jagodesain.com</p>