Documentation for Minima Lite Template

Berikut ini adalah cara penggunaan typography, table, button, blockquote, list, dan lainnya pada konten/artikel.

Typography

Contoh kode :


<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
<p>Example of <mark>highlight</mark> text.</p>
<p>Example of <del>deleted text.</del></p>
<p>Example of <u>underlined text.</u></p>
<p>Example of <b>bold text.</b></p>
<p>Example of <i>italic text.</i></p>

Hasil :

Press Ctrl + C to copy text.

Example of highlight text.

Example of ~~deleted text.~~

Example of underlined text.

Example of bold text.

Example of italic text.

Table

Contoh kode :


<table>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  <tr>
    <td>Division 1.1</td>
    <td>Division 2.1</td>
    <td>Division 3.1</td>
  </tr>
  <tr>
    <td>Division 1.2</td>
    <td>Division 2.2</td>
    <td>Division 3.2</td>
  </tr>
  <tr>
    <td>Division 1.3</td>
    <td>Division 2.3</td>
    <td>Division 3.3</td>
  </tr>
</table>

Hasil :

Table Header 1	Table Header 2	Table Header 3
Division 1.1	Division 2.1	Division 3.1
Division 1.2	Division 2.2	Division 3.2
Division 1.3	Division 2.3	Division 3.3

Button

Contoh kode :


<a class='button' href='#'>Download</a>
<a class='button rounded' href='#'>Download</a>
<a class='button outline' href='#'>Download</a>
<a class='button icon-download' href='#'>Download</a>
<a class='button rounded outline icon-download' href='#'>Download</a>

Hasil :

Download Download Download Download Download

Blockquote

Contoh kode :


<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>

Hasil :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List

Contoh kode :


<ul>
  <li>List 1</li>
  <li>List 2
    <ul>
      <li>Sub List 2.1</li>
      <li>Sub List 2.2</li>
      <li>Sub List 2.3</li>
    </ul>
  </li>
  <li>List 3</li>
  <li>List 4</li>
</ul>

Hasil :

List 1
List 2
- Sub List 2.1
- Sub List 2.2
- Sub List 2.3
List 3
List 4

Contoh kode :


<ol>
  <li>List 1</li>
  <li>List 2
    <ol>
      <li>Sub List 2.1</li>
      <li>Sub List 2.2</li>
      <li>Sub List 2.3</li>
    </ol>
  </li>
  <li>List 3</li>
  <li>List 4</li>
</ol>

Hasil :

List 1
List 2
1. Sub List 2.1
2. Sub List 2.2
3. Sub List 2.3
List 3
List 4

Pre Code

Harus di Parse HTML sebelum diterapkan.

Sebelum : <p>Sample text..</p>
Sesudah : <p>Sample text..</p>

Contoh kode :


<pre><code>&lt;p&gt;Sample text..&lt;/p&gt;&gt;</code></pre>

Hasil :

<p>Sample text..</p>

Atau, bisa juga diterapkan dengan ganti baris, namun harus ditambahkan class fixed.

Contoh kode :


<pre><code class='fixed'>
&lt;p&gt;Sample text..&lt;/p&gt;&gt;
</code></pre>

Hasil :


<p>Sample text..</p>

Lazyload

Lazyload dapat diterapkan untuk image atau iframe.
Cara penerapannya adalah kode image/iframe diapit oleh kode <noscript>...</noscript>

(1) Kode image tanpa lazyload :


<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/s613/docs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="345" data-original-width="613" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/w640-h360/docs.png" width="640" /></a></div>

(1) Kode image dengan lazyload :


<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/s613/docs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="345" data-original-width="613" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/w640-h360/docs.png" width="640" /></a></div>
</noscript>

(2) Kode image tanpa lazyload :


<img border="0" data-original-height="345" data-original-width="613" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/w640-h360/docs.png" width="640" />

(2) Kode image dengan lazyload :


<noscript>
<img border="0" data-original-height="345" data-original-width="613" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1UQ7lRkOI7Kr9EWs6oLp1pvPFT6tPfU_z7GQnWsb833clBwh4Q5IWBqydQvFmWwE8ozGRwn_hiAjS11Nya7L_Tee7aJSbrrfXJdG93wGlkPsfQ02f6P2-_xsJB_GmtBBDxMXsX03USin/w640-h360/docs.png" width="640" />
</noscript>

(3) Kode iframe tanpa lazyload :


<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/AxyPASIXz1k" title="YouTube video player" width="560"></iframe>

(3) Kode iframe dengan lazyload :


<noscript>
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/AxyPASIXz1k" title="YouTube video player" width="560"></iframe>
</noscript>

Documentation for Minima Lite Template