Semua Tipografi Template Median UI

Admin Mei 15, 2020 0 Komentar November 14, 2020

Compose mode

Ini adalah layout standar dari postingan Blogger dengan mode compose beserta semua fitur yang terdapat pada mode ini. Mode ini juga sudah responsive jadi beberapa layout seperti gambar, blockquote dan sebagainya akan menyesuaikan tampilan berdasarkan ukuran layar user.

Paragraf ini adalah standar dengan tag <p> dari template ini tanpa tambahan inden, ukuran font serta garis ketinggian sudah diatur agar teks lebih mudah dibaca.

Pargaraf teks kutipan akan tampil seperti ini dengan warna teks yang berbeda dari paragraf biasa

Daftar atau list pada postingan dengan nomor

Daftar pertama
Daftar kedua
Daftar ketiga
Daftar Keempat

Daftar atau list dengan dots

Daftar pertama
Daftar kedua
Daftar ketiga
Daftar Keempat

Paragraf dengan tambahan link anchor dan link aktif yang ditambahkan secara manual melalui mode compose.

Pada paragraf ini akan ditampilkan format table pada template ini beserta format lainnya seperti blockquote atau penyisipan kode html serta style tambahan yang bisa digunakan pada mode html.

No	Nama Kota	Jumlah Penduduk	Usia 19-25	Usia 25-40	Usia > 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

Cara penulisan table yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

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

Format tambahan yang hanya bisa digunakan pada mode HTML

Penulisan Syntax Highlighter secara manual pada mode HTML postingan

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

Anda bisa menulis kode html diluar syntax seperti contoh ini: </div>, caranya cukup mudah hanya dengan menuliskan kode seperti dibawah ini. Pastikan tag yang akan anda tulis sudah diparse sebagaimana contoh dibawah

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

Pemisah Paragraf

Paragraf kedua dipisah dengan tiga titik (seperti yang anda lihat diatas paragraf ini) yang berfungsi sebagai page break dalam artikel yang panjang.

Format penulisan:

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

Format penulisan:

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

Daftar isi atau table of content

Merupakan fitur yang biasanya terdapat pada wikipedia yang berfungsi untuk memudahkan user untuk mengetahui poin utama atau isi postingan dalam postingan.

Daftar isi manual ini bisa digunakan sebagai alternatif karena pada versi AMP daftar isi otomatis tidak tersedia.

Daftar isi

Judul heading satu
Judul heading dua
Judul heading tiga
Judul heading empat
Judul heading lima

Format penulisan:

<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

Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya tambahkan atribut checked pada tag <input> seperti pada condoh dibawah ini:

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

Tombol

Tombol link berbeda untuk menampilkan link penting seperti link download, preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:

Tombol

Format penulisan:

<a class='button' href='url_anda_disini'>Tombol</a>

Penambahan icon download pada tombol

Download

Format penulisan:

<a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>

Tombol dengan style berbeda

Download

Format penulisan:

<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>

Tombol link Whatsapp

Butuh Bantuan?

Format penulisan:

<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</a>

Dua tombol dalam satu baris

Download Demo

Format penulisan:

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

tombol download dan informasi file dalam satu container, anda bisa mengubah tipe file dan nama file langsung pada bagian yang ditandai

Zip Template-kalender-2021.zip Download

Format penulisan:

<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

Berguna untuk memuat video youtube setelah halaman di scroll agar loading blog lebih cepat lagi

Penggunaanya sangat mudah:

Salin kode pemutaran video youtube yang ingin ditampilkan
Contoh url video youtube : youtube.com/watch?v=s1tAYmMjLdY
Yang perlu Anda salin hanyalah kode 's1tAYmMjLdY' lalu tempel pada bagian yang suda ditandai di kode ini

Format penulisan:

<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 atau tombol show hide

Spoiler berfungsi untuk menyembunyikan sebagian isi artikel dan akan ditampilkan dengan cara di klik

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

Format penulisan:

<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 untuk menyembunyikan kode atau syntax highlighter

Judul Spoiler:

Isi kode syntax highlighter

Format penulisan:

<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

Berfungsi untuk menampilkan konten faq atau bertanyaan dalam blog, sering disebut dengan accordion menu

Pertanyaan pertama
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.
Pertanyaan kedua
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.
Pertanyaan ketiga
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.

Format penulisan:

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

Setiap menambahkan baris baru pastikan agar mengubah bagian yang ditandai offaccor-menu-1 pada setiap barisnya, penambahan baris baru tidak terbatas bahkan sampai 100 baris

Fletro Prov5.4

Semua Tipografi Template Median UI

Compose mode

Format tambahan yang hanya bisa digunakan pada mode HTML

Pemisah Paragraf

Blockquote

Daftar isi atau table of content

Tombol

Lazy youtube

Spoiler atau tombol show hide

Faq / Accordion Menu

Baca juga

Komentar

Panduan Setting Widget Tambahan pada Template Median UI

Bantuan dan Pemecah Masalah Median UI

Step by Step Mengubah/Menghapus Navigasi Mobile pada Template Median UI