Tất cả các mẫu chữ Typography cho Median UI

Tất cả các mẫu kiểu chữ giao diện người dùng trung bình
Nguồn: jagodesain.com

Chế độ soạn thảo

Đây là bố cục tiêu chuẩn của các bài đăng trên Blogger ở chế độ soạn và tất cả các tính năng có trong chế độ này. Chế độ này cũng đáp ứng nên một số bố cục như hình ảnh, trích dẫn khối, v.v. sẽ điều chỉnh hiển thị dựa trên kích thước màn hình của người dùng.

Đoạn này là chuẩn với <p> thẻ của mẫu này không có indents bổ sung, cỡ chữ và chiều cao dòng đã được thiết lập để làm cho văn bản dễ đọc hơn.

Đoạn văn bản trích dẫn sẽ xuất hiện như thế này với màu văn bản khác với đoạn văn bản thông thường
Liệt kê hoặc liệt kê trên các bài đăng có số
  1. Danh sách đầu tiên
  2. Danh sách thứ hai
  3. Danh sách thứ ba
  4. Danh sách thứ tư
Danh sách hoặc danh sách có dấu chấm
  • Danh sách đầu tiên
  • Danh sách thứ hai
  • Danh sách thứ ba
  • Danh sách thứ tư

Các đoạn có liên kết neo bổ sung liên kết hoạt động được thêm theo cách thủ công thông qua chế độ soạn.

Đoạn văn này sẽ hiển thị định dạng bảng trong mẫu này cùng với các định dạng khác như blockquote hoặc chèn mã html và các kiểu bổ sung có thể được sử dụng trong chế độ html.

Không. Tên thành phố Tổng dân số 19-25 tuổi Tuổi 25-40 Tuổi> 40
1 Kolkata 10,023,211 5,000,223 2,500,332 2,499,232
2 Mumbai 10,023,211 5,000,223 2,500,332 2,499,232
3 Delhi 10,023,211 5,000,223 2,500,332 2,499,232
4 Chennai 10,023,211 5,000,223 2,500,332 2,499,232

Cách chính xác để viết một bảng như trên là trong chế độ html, mã như sau:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>City</td>
        <td>Kolkata</td>
      </tr>
      <tr>
        <td>2</td>
        <td>City</td>
        <td>Mumbai</td>
      </tr>
      <tr>
        <td>3</td>
        <td>City</td>
        <td>Delhi</td>
      </tr>
    </tbody>
  </table>
</div>

Định dạng bổ sung chỉ có thể được sử dụng trong chế độ HTML

Viết Công cụ đánh dấu cú pháp theo cách thủ công trong chế độ đăng HTML

// To use Syntax Highlighter the writing is like this
<pre>
  <code>
    <!-- html code, css ata javascript here -->
</code> </pre> // Additional syntax features you can use when writing code <i>Comment</i> = The code in this tag will not automatically be highlighted <i class='comment'>Comment</i> = <!-- html, css or javascript code here --> <i class='tag'>div</i> = <div> <span>CSS Property</span> = main{display: block;position: relative} <span class='block'>Block Text</span> = Used to highlight parts that need to be replaced by the user

Bạn có thể viết mã html bên ngoài theo cú pháp như ví dụ sau: </div> , khá dễ dàng chỉ bằng cách viết mã như bên dưới. Đảm bảo rằng thẻ bạn sẽ viết được phân tích cú pháp như hình dưới đây

<span class='code'>&lt;div&gt;</span>

Ngắt đoạn

Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Đoạn thứ hai được phân tách bằng ba dấu chấm (như bạn có thể thấy ở trên đoạn này), dùng như ngắt trang trong một bài báo dài.

Định dạng viết:

<p>Fill_in_the_paragraph</p>
<i class='separate'></i>
<p>Fill_in_the_paragraph</ p >

Blockquote

Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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='style-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> // Optionally can be used or deleted
      <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>

Mục lục hoặc mục lục

Đó là một tính năng thường có trên Wikipedia, có chức năng giúp người dùng dễ dàng tìm hiểu các điểm chính hoặc nội dung của bài viết trong bài đăng.

Mục lục thủ công này có thể được sử dụng thay thế vì trong phiên bản AMP, mục lục tự động không khả dụng.

Định dạng viết:

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox'>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</a></li>
    </ol>
  </div>
</div>

// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:

<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel

// Tambahkan id pada heading menjadi seperti dibawah :

<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel

Bạn có thể ẩn các bảng nội dung ngay từ đầu và chỉ xuất hiện sau khi tiêu đề của bảng nội dung được nhấp, làm thế nào để thêm checked thuộc tính cho <input> tag như hình dưới đây:

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox' checked>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</a></li>
    </ol>
  </div>
</div>

Button

Nút liên kết khác để hiển thị các liên kết quan trọng như liên kết tải xuống, bản xem trước, v.v. Theo mặc định, nó sẽ trông như thế này:

Button
Định dạng viết:
<a class='button' href='url_anda_disini'>Tombol</a>
Đã thêm một biểu tượng tải xuống trên nút
Tải xuống
Định dạng viết:
<a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
Các nút kiểu khác nhau
Tải xuống
Định dạng viết:
<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
Nút liên kết Whatsapp
Cần giúp đỡ?
Định dạng viết:
<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</a>

Hai nút liên tiếp

Định dạng viết:
<div class='button-info'>
  <a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
  <a class='button outline' href='url_anda_disini'>Demo</a>
</div>

download button and file information in one container, you can change the file type and file name directly in the marked section

Zip Template-calender-2021.zip Download
Writing format:
<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Template-kalender-2021.zip</span>
  <a class='button file-link' href='url_anda_disini' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>

Lazy YouTube

Useful for loading YouTube videos after scrolling the page so that blog loading is even faster

Video trên YoutubeVideo trên YoutubeYoutube video

Its use is very easy:

  • Copy the youtube video playback code that you want to display
  • Example of youtube video url: youtube.com/watch?v=s1tAYmMjLdY
  • All you need to copy is the code ' s1tAYmMjLdY ' then paste it on the part that has been marked in this code

Writing format:

<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Spoiler or show hide button

Spoiler serves to hide part of the content of the article and will be displayed by clicking

Spoiler Title:

Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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.

Writing format:

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>Isi spoiler</div>
  </div>
</div>

Spoiler to hide code or syntax highlighter

Spoiler Title:
Isi kode syntax highlighter

Writing format:

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>
      <pre><code>Isi kode syntax highlighter</code></pre>
    </div>
  </div>
</div>

Faq / Accordion Menu

Serves to display faq content or questions on a blog, often called the accordion menu

  • Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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.
  • 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.

Writing format:

<ul class='accordion'>
  <!-- Baris pertama -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu1'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan pertama</span>
      </label>
      <div class='content'>Jawaban pertanyaan pertama</div>
    </div>
  </li>
  <!-- Baris kedua -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu2'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan kedua</span>
      </label>
      <div class='content'>Jawaban pertanyaan kedua</div>
    </div>
  </li>
  <!-- Baris ketiga -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu3'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan ketiga</span>
      </label>
      <div class='content'>Jawaban pertanyaan ketiga</div>
    </div>
  </li>
  <!-- Baris seterusnya... -->
</ul>

Every time you add a new line, make sure to change the part marked offaccor-menu-1 on each line, adding a new line is not limited to 100 lines