Semua Tipografi Template Masdhika

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

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"> <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">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 artikelcode-box
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"> <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">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>code-box

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>code-box
Penambahan icon download pada tombol
Download
Format penulisan:
<a class="button" href="url_anda_disini"><i class="m-icon download"></i>Download</a>code-box
Tombol dengan style berbeda
Download
Format penulisan:
<a class="button outline" href="url_anda_disini"><i class="m-icon download"></i>Download</a>code-box
Tombol link Whatsapp
Butuh Bantuan?
Format penulisan:
<a class="button whatsapp" href="url_anda_disini"><i class="m-icon whatsapp"></i>Butuh Bantuan?</a>code-box
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>code-box

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

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"> <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>code-box
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>code-box

Faq / Accordion Menu

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

• Pertanyaan pertama

  Jawaban pertanyaan pertama
• Pertanyaan kedua

  Jawaban pertanyaan kedua
• Pertanyaan ketiga

  Jawaban pertanyaan ketiga

Format penulisan:
<ul class="accordion"> <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"> <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg> <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg> <span class="title">Pertanyaan pertama</span> </label> <div class="content">Jawaban pertanyaan pertama</div> </div> </li> <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"> <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg> <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg> <span class="title">Pertanyaan kedua</span> </label> <div class="content">Jawaban pertanyaan kedua</div> </div> </li> <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"> <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg> <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg> <span class="title">Pertanyaan ketiga</span> </label> <div class="content">Jawaban pertanyaan ketiga</div> </div> </li> </ul>code-box ini terakhir

Setiap menambahkan baris baru pastikan bagian yang ditandai offaccor-menu-1 sama, penambahan baris baru tidak terbatas bahkan sampai 100 baris