Komponen

Table of Contents

Accordion

Is this template compatible with Wordpress?

Currently, the Wordpress version is not available. You can only use this template on the Blogger platform.

What do you get when you buy a template here?

You will receive a template bundle according to the product you purchased, and you can download it again for free if a new version is available.

Can we assist you with the template installation process?

Of course, we will be happy to assist you if you have any difficulties during the template installation process.

Will you get updates?

Yes, you will get FREE UPDATES forever, including the latest version updates.

Are there any additional fees for updates?

No, there are no additional fees.

Can you get a refund?

Sorry, purchased items cannot be returned. Please read the Terms & Conditions for more information.

Can the template be resold?

No, you can only use the template for personal purposes. Reselling the template is strictly prohibited. Please read the Terms & Conditions for more information.

Can the template be installed on multiple blogs?

Yes, there is no limit to the number of blogs as long as the blogs are still yours.

Are free templates available on Gila Temax?

Yes, definitely. Please wait for the next update.

<div class="elementskit_accordion">
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
</div>

Alert

A simple info alert—check it out!

A simple warning alert—check it out!

A simple success alert—check it out!

A simple error alert—check it out!

<div class="elementskit_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_warning">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_success">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_error">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Blockquote

Satu-satunya cara untuk melakukan pekerjaan hebat adalah mencintai apa yang Anda lakukan.

<blockquote>Satu-satunya cara untuk melakukan pekerjaan hebat adalah mencintai apa yang Anda lakukan.</blockquote>

Buttons

Default Button

<a class="elementskit_button" href="#">Button Default</a>
<a class="elementskit_button outlined" href="#">Button Outlined</a>
<a class="elementskit_button unelevated" href="#">Button Unelevated</a>
<a class="elementskit_button raised" href="#">Button Raised</a>

Button Rounded

<a class="elementskit_button rounded" href="#">Button Default</a>
<a class="elementskit_button outlined rounded" href="#">Button Outlined</a>
<a class="elementskit_button unelevated rounded" href="#">Button Unelevated</a>
<a class="elementskit_button raised rounded" href="#">Button Raised</a>

Button with Colors

<a class="elementskit_button button_info" href="#">Button Info</a>
<a class="elementskit_button button_warning outlined" href="#">Button Warning Outlined</a>
<a class="elementskit_button button_success unelevated" href="#">Button Success Unelevated</a>
<a class="elementskit_button button_error raised" href="#">Button Error Raised</a>
<a class="elementskit_button button_dark raised" href="#">Button Dark Raised</a>

Button Sizes

<a class="elementskit_button button_small unelevated" href="#">Button Small</a>
<a class="elementskit_button unelevated" href="#">Button Normal</a>
<a class="elementskit_button button_large unelevated" href="#">Button Large</a>

Floating Action Button (FAB)

<a aria-label="Button" class="elementskit_button fab unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a aria-label="Button" class="elementskit_button button_large fab unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a class="elementskit_button fab extended unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>
<a class="elementskit_button button_large fab extended unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>

Disabled Button

<a class="elementskit_button disabled" href="#">Button Default</a>
<a class="elementskit_button outlined disabled" href="#">Button Outlined</a>
<a class="elementskit_button unelevated disabled" href="#">Button Unelevated</a>
<a class="elementskit_button raised disabled" href="#">Button Raised</a>
<a aria-label="Button" class="elementskit_button fab unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a aria-label="Button" class="elementskit_button button_large fab unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a class="elementskit_button fab extended unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>
<a class="elementskit_button button_large fab extended unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>

Download Box

If you have a dedicated image, you can use it like this.

Lightrom Android

Size: 2 GB

Updated: 1 June 2025

File Type: .zip

Download

<div class="download_box">
  <div>App Name</div>
  <div class="download_box__inner">
    <div class="download_box__image">
      <img alt="App Name" height="60" src="IMAGE_URL_HERE" width="60"/>
    </div>
    <div class="download_box__info">
      <div>Size: 2 GB</div>
      <div>Updated: 1 June 2025</div>
      <div>File Type: .zip</div>
    </div>
    <div class="download_box__cta">
      <a class="elementskit_button fab extended unelevated" href="URL_HERE"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z"></path></svg> Download</a>
    </div>
  </div>
</div>

Input

<input class="elementskit_input" placeholder="Email Input" type="text"/>
<input class="elementskit_input" placeholder="Password Input" type="password"/>
<input class="elementskit_input" placeholder="Number Input" type="number"/>
<input class="elementskit_input" placeholder="" type="file"/>
<input class="elementskit_input" placeholder="" type="date"/>
<input class="elementskit_input" placeholder="" type="time"/>
<input class="elementskit_input" placeholder="" type="color"/>

List

Guide List

Kangkung tumis adalah masakan rumahan yang cepat, mudah, dan sehat. Berikut adalah langkah-langkahnya:

Bahan-Bahan:
- 2 ikat kangkung segar, pilih yang batangnya tidak terlalu tua
- 3 siung bawang putih, cincang halus
- 5 siung bawang merah, iris tipis
- 3 buah cabai rawit merah (sesuai selera pedas), iris serong
- 2 buah cabai merah besar, iris serong (buang bijinya jika tidak suka terlalu pedas)
- 1 buah tomat kecil, potong-potong (opsional)
- 1 sendok makan saus tiram
- 1/2 sendok teh garam (sesuai selera)
- 1/4 sendok teh gula pasir (sesuai selera)
- Sejumput merica bubuk (opsional)
- 2 sendok makan minyak goreng
- 50 ml air (opsional, jika ingin sedikit berkuah)
Cara Memasak:
1. Siapkan Kangkung:
  - Petik daun dan batang muda kangkung, buang bagian yang keras atau kuning.
  - Cuci bersih kangkung di bawah air mengalir. Pastikan tidak ada kotoran atau lumpur yang menempel.
  - Tiriskan hingga airnya benar-benar habis. Anda bisa memotong-motongnya sesuai selera jika terlalu panjang.
2. Panaskan Minyak:
  - Panaskan minyak goreng dalam wajan atau penggorengan dengan api sedang.
3. Tumis Bumbu:
  - Masukkan bawang putih dan bawang merah. Tumis hingga harum dan layu.
  - Masukkan irisan cabai rawit dan cabai merah besar. Tumis sebentar hingga layu dan aroma pedasnya keluar.
  - Jika menggunakan tomat, masukkan sekarang dan tumis hingga sedikit layu.
4. Masukkan Kangkung:
  - Masukkan kangkung yang sudah ditiriskan ke dalam wajan. Aduk cepat.
  - Kangkung akan terlihat banyak di awal, tapi akan menyusut setelah beberapa saat.
5. Bumbui:
  - Tambahkan saus tiram, garam, gula pasir, dan merica bubuk. Aduk rata hingga semua bumbu tercampur dengan kangkung.
  - Jika ingin sedikit lebih berkuah atau kangkungnya sedikit lebih empuk, tambahkan sedikit air.
6. Masak Hingga Matang:
  - Masak kangkung dengan cepat, jangan terlalu lama agar teksturnya tetap renyah dan warnanya tetap hijau segar. Cukup sekitar 2-3 menit setelah kangkung masuk.
  - Cicipi dan koreksi rasa jika diperlukan. Tambahkan bumbu sesuai selera Anda.
7. Sajikan:
  - Angkat kangkung tumis dan sajikan selagi hangat dengan nasi putih.
Tips Tambahan:
- Untuk rasa yang lebih kaya, Anda bisa menambahkan irisan terasi saat menumis bumbu.
- Jangan memasak kangkung terlalu lama karena akan membuatnya layu dan kehilangan nutrisi.
- Variasi lain: Anda bisa menambahkan udang, potongan tahu, atau tempe ke dalam tumisan kangkung.

<div class="guide_list">
  <ol>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
  </ol>
</div>

Ordered List

Is a standard list with number.

Satu satu satu
Dua dua dua
Tiga tiga tiga
Empat empat empat
Lima lima lima
Enam enam enam
Tujuh tujuh tujuh
Delapan delapan delapan
Sembilan sembilan sembilan
Sepuluh sepuluh sepuluh

<ol>
  <li>Satu satu satu</li>
  <li>Dua dua dua</li>
  <li>Tiga tiga tiga</li>
  <li>Empat empat empat</li>
  <li>Lima lima lima</li>
  <li>Enam enam enam</li>
  <li>Tujuh tujuh tujuh</li>
  <li>Delapan delapan delapan</li>
  <li>Sembilan sembilan sembilan</li>
  <li>Sepuluh sepuluh sepuluh</li>
</ol>

Unordered List

Is a standard list without number.

Satu satu satu
Dua dua dua
Tiga tiga tiga
Empat empat empat
Lima lima lima
Enam enam enam
Tujuh tujuh tujuh
Delapan delapan delapan
Sembilan sembilan sembilan
Sepuluh sepuluh sepuluh

<ul>
  <li>Satu satu satu</li>
  <li>Dua dua dua</li>
  <li>Tiga tiga tiga</li>
  <li>Empat empat empat</li>
  <li>Lima lima lima</li>
  <li>Enam enam enam</li>
  <li>Tujuh tujuh tujuh</li>
  <li>Delapan delapan delapan</li>
  <li>Sembilan sembilan sembilan</li>
  <li>Sepuluh sepuluh sepuluh</li>
</ul>

Post Reference

Reference:

<div class="post_reference">
  <strong>Reference:</strong>
  <ul>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
  </ul>
</div>

Spoiler

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

<div class="spoiler">
  <div class="spoiler_title">
    Spoiler
    <button aria-label="Spoiler Button" class="elementskit_button fab unelevated rounded" type="button">
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H5V11H19V13Z"></path></svg>
    </button>
  </div>
  <div class="spoiler_content">
    Content
  </div>
</div>

Syntax Highlighter

Default

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ubah Warna Latar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Tekan Tombol untuk Mengubah Warna Latar</h1>
    <button id="changeColorButton">Ubah Warna</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}
.container {
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

document.getElementById('changeColorButton').addEventListener('click', function() {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});

<pre data-lang="TITLE"><code class="language-html">Your code is here</code></pre>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ubah Warna Latar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Tekan Tombol untuk Mengubah Warna Latar</h1>
    <button id="changeColorButton">Ubah Warna</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}
.container {
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

document.getElementById('changeColorButton').addEventListener('click', function() {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});

<div class="tabs syntax">
  <ul class="tab_links">
    <li class="active">
      <a href="#HTML">HTML</a>
    </li>
    <li>
      <a href="#CSS">CSS</a>
    </li>
    <li>
      <a href="#JavaScript">JavaScript</a>
    </li>
  </ul>
  <div class="tab_content">
    <div class="tab_item active" id="HTML">
      <pre data-lang=".html"><code class="language-html">Your code is here</code></pre>
    </div>
    <div class="tab_item" id="CSS">
      <pre data-lang=".css"><code class="language-css">Your code is here</code></pre>
    </div>
    <div class="tab_item" id="JavaScript">
      <pre data-lang=".js"><code class="language-javascript">Your code is here</code></pre>
    </div>
  </div>
</div>

Table

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

<div class="elementskit_table">
  <table>
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Status</th>
        <th>Method</th>
        <th class="text_right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>INV001</td>
        <td>Paid</td>
        <td>Credit Card</td>
        <td class="text_right">$250.00</td>
      </tr>
      <tr>
        <td>INV002</td>
        <td>Pending</td>
        <td>PayPal</td>
        <td class="text_right">$150.00</td>
      </tr>
      <tr>
        <td>INV003</td>
        <td>Unpaid</td>
        <td>Bank Transfer</td>
        <td class="text_right">$350.00</td>
      </tr>
      <tr>
        <td>INV004</td>
        <td>Paid</td>
        <td>Credit Card</td>
        <td class="text_right">$450.00</td>
      </tr>
      <tr>
        <td>INV005</td>
        <td>Paid</td>
        <td>PayPal</td>
        <td class="text_right">$550.00</td>
      </tr>
      <tr>
        <td>INV006</td>
        <td>Pending</td>
        <td>Bank Transfer</td>
        <td class="text_right">$200.00</td>
      </tr>
      <tr>
        <td>INV007</td>
        <td>Unpaid</td>
        <td>Credit Card</td>
        <td class="text_right">$300.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total</td>
        <td class="text_right">$2,500.00</td>
      </tr>
    </tfoot>
  </table>
</div>

Tabs

Tab 1
Tab 2
Tab 3

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

<div class="tabs">
  <ul class="tab_links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab_content">
    <div class="tab_item active" id="tab1">
      Content
    </div>

    <div class="tab_item" id="tab2">
      Content
    </div>

    <div class="tab_item" id="tab3">
      Content
    </div>
  </div>
</div>

Text Area

<textarea placeholder="Type your message here"></textarea>

YouTube Embed

Default

<div class="youtube_embed">
  <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/EMBED_CODE"></iframe>
</div>

With Lazy Load

<div class="youtube_embed lazy" data-embed="EMBED_CODE">
  <div class="play_button">
    <span>
      <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z"></path></svg>
    </span>
  </div>
</div>

Fitur ini akan berfungsi jika postingan Anda menyertakan judul h2, h3, dan h4.

<div class="toc_wrap">
  <div class="toc_header">Table of Contents</div>
  <div class="toc_content"></div>
</div>

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.

GMP

Komponen

Accordion

Alert

Blockquote

Buttons

Default Button

Button Rounded

Button with Colors

Button Sizes

Floating Action Button (FAB)

Disabled Button

Download Box

Input

List

Guide List

Bahan-Bahan:

Cara Memasak:

Tips Tambahan:

Ordered List

Unordered List

Post Reference

Related Posts (manual)

Spoiler

Syntax Highlighter

Default

Multi Tabs

Table

Tabs

Text Area

YouTube Embed

Default

With Lazy Load

Table Of Contents