Typography

Ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf ini class paragraf .

Teks Bold
Teks Italic
Teks Strike
Teks Underline
Teks Mark
Teks Code

<p class='par'></p>
<b> </b>
<i> </i> 
<u> </u>
<strike> </strike>
<mark> </mark>
<code> </code>
<span class='code'> </span>

Format Link

Pada artikel ini kami hanya memperlihatkan contoh style postingan saja, untuk tutorial lengkap penggunaannya anda bisa pergi ke laman dokumentasi tema ini, jika anda adalah pembeli legal tema ini anda seharusnya juga dapat izin akses untuk mengunjungi laman dokumentasinya. Jika ada link eksternal yang terdapat dalam postingan, anda bisa memberitahukannya kepada user dengan menggunakan fitur ini:
Sample_external_link
Sample_link_alt

<a href=''> </a>
<a class='ext' href=''> </a>
<a class='ext alt' href=''> </a>

Post Break

<hr>

Button Link

Tombol link yang dilengkapi dengan icon berbeda untuk tiap penggunaannya: Standard button, Tombol dengan icon download, Tombol dengan icon download (tanpa background). Bisa pakai svg juga.
Download
Download
Download

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

Icon lain yang tersedia:
Demo
Buy now
Whatsapp me

<a class='button' href=''><i class='icon demo'></i>Demo</a>
<a class='button' href=''><i class='icon cart'></i>Buy now</a>
<a class='button whatsapp' href=''><i class='icon whatsapp'></i>Whatsapp me</a>

Dua tombol dalam satu baris:

<div class='buttonInfo'>
  <a class='button' href=''><i class='icon download'></i>Download</a>
  <a class='button outline' href=''>Demo</a>
</div>

Image with Caption

Untuk bagian ini anda bisa langsung menggunakannya dalam mode 'Tampilan menulis', caption di gambar ini tidak akan terbaca pada deskripsi/snippet artikel.

Caption_here

<table class='tr-caption-container'> <tbody> <tr> <td> <img alt='' class='fullImg' src=''/> </td></tr><tr> <td class='tr-caption'>Caption_here</td></tr></tbody></table>

Image with Grid Layout

<div class='gridimg'>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Image with Show All Function

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika user mengklik tombol 'Show All'. Fungsi Show All hanya dapat diaktifkan satu kali, Gambar tidak bisa disembunyikan kembali ketika Anda mengaktifkannya

<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <div class='buttonImage'>
    <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <label for='for-hideImage' aria-label='Show all image'></label>
  </div>
  <div class='showImage'>
    <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  </div>
</div>

Image with Scroll Layout

Sama seperti layout gambar diatas, hanya saja pada tampilan seluler gambar akan di susun sejajar dengan tambahan fungsi scroll samping pada tampilan mobile. Kami juga menambahkan efek smooth scroll pada fitur ini, Silahkan coba buka laman ini pada perangkat seluler anda:

<div class='scrollImage'>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img alt='' class='lazy' data-src='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Manual Related Post

<div class='postRelated'>
  <b>Baca juga :</b>
  <ul>
    <li><a href=''>Apa yang Baru Pada Fletro v6.0?</a></li>
    <li><a href=''>Landing Page on Post</a></li>
    <li><a href=''>Postingan Dengan Tag Khusus 'Fullpage'</a></li>
  </ul>
</div>

Paragraph with Drop cap

Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas turun biasanya adalah dua garis atau lebih.

<span class='dropcap'>M</span>

Blockquote

Harga teman adalah harga yang lebih tinggi dari harga normal karena bertujuan untuk membantu teman yang merintis usaha

—Ivan Lanin

Format style lainnya yang bisa Anda gunakan:

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.

Table

Tabel pada tema ini sudah diset agar mendukung responsive, sebagai contoh jika jumlah kolom atau lebar tabel melebihi lebar layar maka agar tidak merusak layoutnya secara otomatis table akan memiliki fungsi scroll.

Silahkan buka artikel ini pada perangkat seluler anda dan sorot bagian tabel dibawah:

Manual Table of Content

Ada 2 pilihan yang bisa anda gunakan untuk menambahkan table of content atau daftar isi pada postingan, pertama secara manual dan yang kedua adalah semi otomatis.

Untuk penulisan manual anda harus menambahkan atribut id=' ... ' baru pada setiap tag heading yang ingin anda tambahkan ke daftar isi, kelebihannya adalah anda bisa memilih tag mana yang ingin ditambahkan walau penggunaanya mungkin akan sedikit sulit untuk pemula.

Ini adalah contoh daftar isi yang dibuat secara manual:

<div class='tocInner'>
  <input class='tocInput hidden' id='daftar-isi01' type='checkbox'/>
  <label class='tocTitle' for='daftar-isi01'>Daftar isi</label>
  <div class='tocContent' id='isi-content'>
    <ol>
      <li><a href='#Image_with_Caption'>Image with Caption</a></li>
      <li><a href='#Manual_Related_Post'>Manual Related Post</a></li>
      <li><a href='#Post_Break'>Post Break</a></li>
      <li><a href='#Blockquote'>Blockquote</a></li>
    </ol>

    <!--[ Sample with subheading ]-->
    <p>Contoh ToC dengan sub heading</p>
    <ol>
      <li><a href='javascript:;'>Heading_title</a>
        <ol>
          <li><a href='javascript:;'>Subheading_1</a></li>
          <li><a href='javascript:;'>Subheading_2</a></li>
          <li><a href='javascript:;'>Subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</div>

Semi Automatic Table of Content

Pilihan kedua ini akan menambahkan table of content secar otomatis di postingan anda, hanya kekurangannya akan menambahkan setiap tag heading kedalam ToC, urutannya mungkin akan berantakan atau error jika tag heading yang anda tulis teratur

Syntax Highlighter

Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.

Berikut contoh tampilannya:

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

<span class='block'>Sample Page</span>

Show Hide Button

Cara kerjanya hampir sama dengan ToC hanya saja anda dapat menambahkan konten lain dalam fitur ini seperti paragraf atau kode html

<div class='spoiler'><input class='spoilerInput hidden' id='spoiler-01' type='checkbox'/><div class='spoilerTitle'>
<b>Spoiler: </b><label for='spoiler-01'></label></div><div class='spoilerContent'>
<p> ... </p>
</div></div>

Accordion Menu

Berfungsi untuk menampilkan konten faq atau pertanyaan dalam blog, sering disebut dengan accordion menu. Fitur ini menggunakan input Radio yang hanya akan membuka satu menu accordion dan otomatis menutup menu lainnya, jika Anda ingin semua menu terbuka sekaligus maka gantilah input Radio menjadi Checkbox.

• Accordion_first_title

  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.

• Accordion_second_title

  Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.
• Accordion_third_title

  Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.

<ul class="accordion">
  
<li><div class="accorContent"><input class="accorMenu hidden" id="offaccor-menu1" name="accordion-menu" type="radio"/><label class="accorTitle" for="offaccor-menu1"><i class="accorIcon"></i>
<span>Judul 1</span>
</label><div class="content">
<p>...</p></div></div></li>

<li><div class="accorContent"><input class="accorMenu hidden" id="offaccor-menu2" name="accordion-menu" type="radio"/><label class="accorTitle" for="offaccor-menu2"><i class="accorIcon"></i>
<span>Judul 2</span>
</label><div class="content">
<p>...</p></div></div></li>
  
<li><div class="accorContent"><input class="accorMenu hidden" id="offaccor-menu3" name="accordion-menu" type="radio"/><label class="accorTitle" for="offaccor-menu3"><i class="accorIcon"></i>
<span>Judul 3</span>
</label><div class="content">
<p>...</p></div></div></li>
 
</ul>

Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

<p class='n'></p>
<p class='n al'><b>Warning!</b><br></p>

Download Link

<div class='downloadInfo'><span class='fileType' data-text='zip'></span><div class='fileName'>
    <span>file name.zip</span>
    <span class='fileSize'>200kb</span></div>
<a class='button fileLink' aria-label='Download' href=''><i class='icon download'></i></a></div>

Contoh Youtube

Berfungsi untuk memuat video youtube setelah halaman di scroll agar mempercepat loading blog

<div class='YTlazy' data-embed='uN39v3qB4LY'><span class='button'></span></div>

Post Reference

Berguna untuk menambahkan daftar referensi artikel yang anda tulis, contoh tampilannya adalah seperti dibawah ini:

Referensi:
https://r9adata.blogspot.com/

<p class='ref'>Referensi:<br> https://r9adata.blogspot.com/</p>