Salah satu kelebihan dari template ini adalah banyaknya style atau format teks
serta layout postingan yang disediakan untuk membuat artikel Anda lebih keren
lagi.
Perlu diketahui sebagian dari layout posting yang terdapat di template ini
juga terinspirasi dari Medium.com, semua format teks beserta fitur lainnya
akan dijelaskan lebih lengkap pada update kali ini. Kami sebisa mungkin ingin
memastikan Anda tidak kecewa ketika membeli template ini.
Compose Mode
Pada bagian ini akan di tampilkan contoh tampilan layout berdasarkan mode
compose yang khusus bagi Anda yang awam tentang HTML, yang perlu Anda lakukan
hanya menulis dan template ini yang menyiapkan layoutnya.
Sebagai tambahan informasi semua layout dalam mode compose ini sudah support
responsive mode, jadi beberapa layout seperti gambar dan lainnya tidak akan
bermasalah ketika di lihat pada ukuran layar yang lebih kecil atau pada
smartphone.
Font Format
Default font bawaan yang digunakan pada template ini adalah Noto Sans,
Poppins(heading), dan Fira Mono, pada paragraf ini font yang digunakan adalah
Arial yang merupakan pilihan pertama dari beberapa font yang disediakan
blogger.
Pada paragraf ini font yang dipakai adalah Courier sangat cocok untuk
penulisan kode HTML, Javascript atau kode lainnya
Paragraf dengan font Georgia, bagi sebagian orang font dengan jenis serif
seperti ini lebih mudah dan nyaman untuk membaca.
Paragraf dengan font Helvetica
Paragraf dengan font Times yang lebih cocok jika dijadikan heading atau
subheading dari artikel.
Paragraf dengan font Trebuchet
Paragraf dengan font Verdana, Anda bisa perhatikan beberapa perbedaan font
diatas dan putuskan font mana yang terbaik untuk artikel Anda.
List Style
List style dengan nomor
- Daftar pertama
- Daftar kedua
- Daftar ketiga
- Daftar Keempat
List style dengan dots
- Daftar pertama
- Daftar kedua
- Daftar ketiga
- Daftar Keempat
Blockquote
Ini adalah tampilan blockquote pada template ini, Anda bisa menambahkan beberapa hal lain dalam blok namun harus dalam mode HTML
Anda juga bisa mencoba menggunakan blockquote dengan style berbeda seperti
dibawah ini
Semakin tua semakin menyadari bahwa selama ini yang paling dekat dan paling setia dengan kita adalah Tuhan, sedang teman dan keluarga perlahan berjarak.
![]()
Your name - Your title
Format penulisannya seperti dibawah ini:
<blockquote>
<!-- Text Anda Disini -->
<div class='block-author'>
<img class='block-img'>
<img class='lazy' alt='Author' data-src='Url_gambar_disini='/>
</div>
<div class='block-info'><span class='block-name'>Your name</span><span class='block-desc'>Your title</span>
</div>
</blockquote>
HTML Mode (Expert)
Bagi Anda yang sudah expert dalam blogging dan terbiasa menulis dalam mode
HTML, beberapa format dibawah ini mungkin sudah tidak asing lagi dan layak
untuk dicoba.
Dropcap
Drop cap adalah huruf kapital besar yang digunakan sebagai elemen dekoratif di
awal paragraf atau bagian.
<p><span class='dropcap'>Y</span>our text goes here</p>
Syntax Highlighter
Syntax Highlighter merupakan fitur pada teks editor yang menampilkan atau
menyoroti teks terutama source code-dalam berbagai warna dan font sesuai
dengan istilah.
Pada paragraf ini terdapat dua fitur tambahan yang bisa Anda gunakan yaitu
syntax. Berikut tampilan dari syntax highlighter beserta cara penggunaannya:
// 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
Atau bisa menggunakan dengan kode seperti dibawah.
<pre>
<code>
<!-- kode html, css ata javascript disini -->
</code>
</pre>
Table
| No | Nama | Kota |
|---|---|---|
| 1 | Kota | Balikpapan |
| 2 | Kelurahan | Gunung Sari |
| 3 | Desa | Klandasan Ilir |
Contoh 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>
Table Of Content
Format Penulisan
<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>
Button
Tombol link berbeda untuk menampilkan link penting seperti link download,
preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:
Button
Format Penulisan
<a class='button' href='Url_anda_disni'>Button</a>Demo
Format penulisan
<a class="button" href="url-demo-disini" rel="no-follow"
target="_blank"> <i class="icon demo"></i>Demo</a>
Lazy Youtube
Berguna untuk memuat video youtube setelah halaman di scroll agar loading blog
lebih cepat lagi.
- 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>