Tất cả các mẫu code html chuyên dùng cho template Median-UI

Semua Tipografi Template Median UI
Source: jagodesain.com

Chế độ soạn

Đâ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 văn này là tiêu chuẩn với <p> của mẫu này không có thêm thụt lề, kích thước phông chữ và chiều cao dòng đã được đặt để 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 văn có thêm liên kết neoliê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.

Số thứ tự Tên thành phố Tổng số dân 19-25 tuổi 25-40 tuổi Tuổi > 40
1 Balikpapan 10.023.211 5.000.223 2.500.332 2.499.232
2 Banjarmasin 10.023.211 5.000.223 2.500.332 2.499.232
3 Banjar Baru 10.023.211 5.000.223 2.500.332 2.499.232
4 Samarinda 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>Nama</th>
        <th>Kota</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Kota</td>
        <td>Balikpapan</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Kelurahan</td>
        <td>Gunung Sari</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Desa</td>
        <td>Klandasan Ilir</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

// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini
<pre>
  <code>
    <!-- kode html, css ata javascript disini -->
  </code>
</pre>

// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode
<i>Comment</i>     = Kode dalam tag ini otomatis tidak akan ikut terseoroti
<i class='comment'>Comment</i>     = <!-- kode html, css atau javascript disini -->
<i class='tag'>div</i>     = <div>
<span>CSS Property</span>     = main{display: block;position: relative}
<span class='block'>Block Text</span>  = Digunakan untuk menyoroti bagian yang perlu diganti oleh 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, 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.

Đ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>Isi_paragraf_disini</p>

<i class='separate'></i>
<p>Isi_paragraf_disini</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. 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> // Opsional bisa digunakan atau dihapus
      <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 không có sẵn mục lục tự độ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 mục lục ngay từ đầu và chỉ xuất hiện sau khi nhấp vào tiêu đề của mục lục, cách thêm thuộc tính checked thẻ <input> 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>

Cái nút

Các nút liên kết khác nhau để 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:

Cái nút
Đị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
Download
Đị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
Download
Đị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
Butuh Bantuan?
Đị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>

nút tải xuống và thông tin tệp trong một vùng chứa, bạn có thể thay đổi loại tệp và tên tệp trực tiếp trong phần được đánh dấu

Zip Template-kalender-2021.zip Download
Định dạng viết:
<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>

Youtube lười biếng

Hữu ích khi tải video YouTube sau khi cuộn trang để tải blog nhanh hơn

Youtube video

Nó rất dễ sử dụng:

  • Sao chép mã phát lại video youtube mà bạn muốn hiển thị
  • Ví dụ về url video youtube: youtube.com/watch?v=s1tAYmMjLdY
  • Tất cả những gì bạn cần sao chép là mã 's1tAYmMjLdY', sau đó dán nó vào phần đã được đánh dấu trong mã này

Định dạng viết:

<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 hoặc hiển thị nút ẩn

Spoiler dùng để ẩn một phần nội dung của bài viết và sẽ hiển thị bằng cách nhấp vào

Tiêu đề Spoiler:

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:

<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 để ẩn mã hoặc công cụ đánh dấu cú pháp

Tiêu đề Spoiler:
Isi kode syntax highlighter

Định dạng viết:

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

Menu FAQ / Accordion

Phục vụ để hiển thị nội dung câu hỏi thường gặp hoặc câu hỏi trên blog, thường được gọi là menu accordion

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

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

Mỗi khi bạn thêm một dòng mới, hãy đảm bảo thay đổi phần được đánh dấu offaccor-menu-1 trên mỗi dòng, thêm một dòng mới không giới hạn trong 100 dòng