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
- 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.
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:
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.
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
Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya ubah penulisan dafar isi menjadi seperti dibawah ini:
Tombol
Tombol link berbeda untuk menampilkan link penting seperti link download, preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:
Tombol
Format penulisan:
Penambahan icon download pada tombol
Download
Format penulisan:
Tombol dengan style berbeda
Download
Format penulisan:
Tombol link Whatsapp
Butuh Bantuan?
Format penulisan:
Dua tombol dalam satu baris
Format penulisan:
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
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:
Spoiler untuk menyembunyikan kode atau syntax highlighter
Judul Spoiler:
Isi kode syntax highlighter
Format penulisan:
Faq / Accordion Menu
Berfungsi untuk menampilkan konten faq atau bertanyaan dalam blog, sering disebut dengan accordion menu
-
Jawaban pertanyaan pertama
-
Jawaban pertanyaan kedua
-
Jawaban pertanyaan ketiga
Setiap menambahkan baris baru pastikan bagian yang ditandai offaccor-menu-1 sama, penambahan baris baru tidak terbatas bahkan sampai 100 baris