Writing Code for All Post Styles

Semua fitur ini bisa Anda gunakan langsung cukup dengan menyalin kode yang tertera dibawahnya' data-en='You can use all of these features right away by simply copying the code listed below

Caption here

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Image_Alt_Here' src='image_src.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Caption_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout

Format penulisan:

<!--[ Grid Image ]-->
<div class='gridImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Image with Scroll Layout

Format penulisan:

<!--[ Scroll Image ]-->
<div class='scrollImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Lazyload Image

"Berguna untuk menunda pemuatan gambar agar skor PageSpeed blog menjadi lebih tinggi, gambar baru akan dimuat ketika user melakukan scroll ke area gambar tersebut. Semua gambar pada artikel ini menggunakan Lazyload.' data-en="Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. All images in this article use Lazyload.Format penulisan:"

Format penulisan:

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

Manual Related Post

Baca juga :

Format penulisan

<div class='postRelated'>
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
    <li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
    <li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
  </ul>
</div>

Post Break

Berguna untuk memisah atau memberi jarak pada paragraf, contohnya seperti ini:

Format penulisan:

<i class='separate'></i>

Paragraph with Text Indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.' data-en='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<p class='textIndent'>Your_text_here</p>

Paragraph with Drop cap

<p><span class='dropCap'>Y</span>our_text_here</p>

Blockquote

<blockquote>Your_text_here</blockquote>



<blockquote class='style-1'>Your_text_here</blockquote>

Table

Format penulisan:

<div class='table'>
  <table style='white-space: nowrap;'>
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Manual Table of Content

Daftar isi

Format penulisan:

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

  </div>
</div>

Semi Automatic Table of Content

Tampilannya sama dengan ToC standar hanya saja anda tidak perlu repot-repot menulis dan menambahkan ID pada tag heading.' data-en="It looks same as the standard ToC, the difference is that you don't have to bother writing and adding ID to the heading tags.

Untuk mengaktifkan semi otomatis Table of Content ada beberapa kode yang harus anda tambahkan, yang pertama adalah kode parent sebagai lokasi untuk menempatkan ToC, format penulisannya seperti ini: ' data-en='To activate semi-automatic Table of Content, there is some code that you must add, the first is parent code as location to place ToC, the writing format is like this:

<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='tocContent'>

  </div>
</div>

Selanjutnya silahkan tambahkan script ini di bagian akhir artikel anda:

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#tocContent')
  }).generateToc()
);</script>

"Standarnya ToC akan langsung muncul ketika halaaman dimuat dan akan tersembunyi jika tombol 'Hide' di klik, Jika anda ingin ToC nya tersebunyi dan akan tampil ketika tombol 'Show' diklik maka tambahkan atribut

<input class='tocInput hidden' id='daftar-isi01' type='checkbox' checked='checked'/>

<!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>

// Tags to add color

<i class='comment'>...</i>			= Grey
<i class='tag'>...</i>					= Red
<i class='blue'>...</i>					= Blue
<span>...</span>								= Green
<span class='block'>...</span>	= Block Blue

Untuk menuliskan kode HTML, CSS atau JS dipostingan, format penulisan:

<pre class='html'><code>Your_code_here</code></pre>

Penulisan syntax untuk format CSS:

<pre class='css'><code>Your_CSS_code_here</code></pre>

Penulisan syntax untuk format JS:

<pre class='js'><code>Your_JS_code_here</code></pre>

Untuk menonaktifkan fungsi Scroll gunakan tag dibawah ini:

<pre><code style='white-space:pre-wrap'>Your_JS_code_here</code></pre>

Show Hide Button

Format penulisan:

<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Show/hide Title ]-->
    <b>Spoiler: </b>
    <label for='spoiler-01'></label>
  </div>
  
  <!--[ Show/hide content ]-->
  <div class='spoilerContent'>
    <p>Your_content_here</p>
  </div>
</div>

Accordion Menu

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

Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet,

Format penulisan:

<!--[ Accordion start ]-->
<ul class='accordion'>
  <!--[ Accordion line 1 ]-->
  <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>
        
        <!--[ Question ]-->
        <span>Accordion_first_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>
        <p>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.</p>
        
        <p>Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
      </div>
    </div>
  </li>
  
  <!--[ Accordion line 2 ]-->
  <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>
        
        <!--[ Question ]-->
        <span>Accordion_second_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>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.</div>
    </div>
  </li>
  
  <!--[ Accordion line 3 ]-->
  <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>

        <!--[ Question ]-->
        <span>Accordion_third_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>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.</div>
    </div>
  </li>
</ul>

Note Block

Format penulisan:

<p class='note'>Yout_text_here</p>

// Another style

<p class='note noteAlert'>Yout_text_here</p>

External Link

Sample_external_link
Sample_link_alt

Format penulisan:

<a class='extLink' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extLink alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button Link

Standard Tombol
Download
Download Now
Demo Now
Ngutang Now
Whatsapp me
Telegram

Format penulisan:

<a class='button' href='#'>Standard_button</a>
<a class='button' href='#'><i class='icon download'></i>Download</a>
<a class='button outline' href='#'><i class='icon download'></i>Download</a>
<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>
<a class='button telegram' href='#'><i class='icon telegram'></i>Contact me</a>

Dua tombol dalam satu baris:

Format penulisan:

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

Download Link

file_name.zip 200kb

<div class='downloadInfo'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='p5MY9CY5MOk'>
  <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>

Referensi:
www.jagodesain.com

<p class='postReference'>Referensi:<br> www.jagodesain.com</p>

Writing Code for All Post Styles

RELATED:

Image with Grid Layout

Image with Scroll Layout

Lazyload Image

Manual Related Post

Post Break

Paragraph with Text Indent

Paragraph with Drop cap

Blockquote

Table

Manual Table of Content

Semi Automatic Table of Content

Show Hide Button

Accordion Menu

Note Block

External Link

Button Link

Download Link

OTHER RELATED NEWS