Semua Tipografi Template Median UI

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.

Judul Utama (H1)

Judul (H2)

Subjudul (H3)

Judul Kecil (H4)

Teks ukuran standar bawaan template

Teks dengan ukuran font terkecil

Teks dengan ukuran font normal

Teks dengan ukuran font besar

Teks dengan ukuran font sangat besar

Teks dengan warna yang berbeda

Teks dengan warna latar belakang

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

Paragraf kedua dengan tambahan inden yang terdapat dalam mode compose Blogger 

Paragraf ketiga dengan tambahan 2 inden  yang mungkin akan sedikit berpengaruh pada tampilan mobile

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

Daftar atau list pada postingan dengan nomor

1. Daftar pertama
2. Daftar kedua
3. Daftar ketiga
4. 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.

Gambar

Caption gambar

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
1	Kota	Balikpapan
2	Kelurahan	Gunung Sari
3	Desa	Klandasan Ilir
4	Kelurahan	Balikapan Baru

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

<table>
  <tbody>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Kota</th>
    </tr>
    <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>

Penulisan format kode atau biasa disebut Syntax Highlighter yang ditulis secara otomatis pada mode Compose

<pre>
<code>
<!-- kode html, css ata javascript disini -->
</code>
</pre>

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 ata javascript disini -->
<span>CSS Property</span>     = main{display: block;position: relative}
<span class='block'>Block Text</span>  = Digunakan untuk menyoroti bagian yang perlu diganti oleh user

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

1. Subheading satu
2. Subheading dua
3. Subheading tiga
4. Subheading empat
5. Subheading lima

Format penulisan:

<div class="daftar-isi">
  <div class="isi-judul" onclick="if (document.getElementById('isi-content').style.display === 'none'){ document.getElementById('isi-content').style.display = 'block';} else {document.getElementById('isi-content').style.display = 'none';}" role="button" tabindex="0">Daftar isi</div>
  <div id="isi-content" class="isi-content">
    <ol>
      <li><a href="#toc-1">Subheading satu</a></li>
      <li><a href="#toc-2">Subheading dua</a></li>
      <li><a href="#toc-3">Subheading tiga</a></li>
      <li><a href="#toc-4">Subheading empat</a></li>
      <li><a href="#toc-5">Subheading lima</a></li>
    </ol>
  </div>
</div>

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

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

// Tambahkan id pada heading menjadi seperti dibawah :

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

Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya ubah penulisan dafar isi menjadi seperti dibawah ini:

<div class="daftar-isi">
  <div id="isi-judul" class="isi-judul" onclick="if (document.getElementById('isi-content').style.display === 'none'){ document.getElementById('isi-content').style.display = 'block';} else {document.getElementById('isi-content').style.display = 'none';}" role="button" tabindex="0">Daftar isi</div>
  <div id="isi-content" class="isi-content" style="display:none">
    <ol>
      <li><a href="#toc-1">Subheading satu</a></li>
      <li><a href="#toc-2">Subheading dua</a></li>
      <li><a href="#toc-3">Subheading tiga</a></li>
      <li><a href="#toc-4">Subheading empat</a></li>
      <li><a href="#toc-5">Subheading 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>

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:

Isi spoiler

Format penulisan:

<div class="spoiler">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <input class="button" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembuynikan';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan';}" type="button">
  </div>
  <div class="spoiler-isi">
    <div style="display:none">
      Isi spoiler
    </div>
  </div>
</div>

Spoiler untuk menyembunyikan kode atau syntax highlighter

Judul Spoiler:

Isi kode syntax highlighter

Format penulisan:

<div class="spoiler">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <input class="button" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembuynikan';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan';}" type="button">
  </div>
  <div class="spoiler-isi">
    <div style="display:none">
      <pre><code>Isi kode syntax highlighter</code></pre>
    </div>
  </div>
</div>

Share this post