Iklan - scroll ke bawah untuk lanjut membaca

Komponen

Imam Al Ghazali
Oleh Imam Al Ghazali
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.
<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 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"></path></svg>
      </div>
    </div>
    <div class="accordion_content">
      <div class="accordion_inner">CONTENT</div>
    </div>
  </div>
</div>

Alert

Default Alert

Info alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Error alert! Change a few things up and try submitting again. 
<div class="elementskit_alert alert_info">
  <div class="alert_message">
    <strong>Info alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_success">
  <div class="alert_message">
    <strong>Success alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_warning">
  <div class="alert_message">
    <strong>Warning alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_error">
  <div class="alert_message">
    <strong>Error alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

Outlined Alert

Info alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Error alert! Change a few things up and try submitting again. 
<div class="elementskit_alert alert_outline alert_info">
  <div class="alert_message">
    <strong>Info alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_success">
  <div class="alert_message">
    <strong>Success alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_warning">
  <div class="alert_message">
    <strong>Warning alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_error">
  <div class="alert_message">
    <strong>Error alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

Blockquote

if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from fonts.google.com. 
<blockquote>if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from <a href="#">fonts.google.com</a>.</blockquote>

Buttons

Square (default)

Filled Outlined Elevated Tonal Text 
<a class="elementskit_button filled medium_font" href="#">Filled</a>
<a class="elementskit_button outlined medium_font" href="#">Outlined</a>
<a class="elementskit_button elevated medium_font" href="#">Elevated</a>
<a class="elementskit_button tonal medium_font" href="#">Tonal</a>
<a class="elementskit_button medium_font" href="#">Text</a>

Rounded

Filled Outlined Elevated Tonal Text 
<a class="elementskit_button filled rounded medium_font" href="#">Filled</a>
<a class="elementskit_button outlined rounded medium_font" href="#">Outlined</a>
<a class="elementskit_button elevated rounded medium_font" href="#">Elevated</a>
<a class="elementskit_button tonal rounded medium_font" href="#">Tonal</a>
<a class="elementskit_button rounded medium_font" href="#">Text</a>

Square with Icon

Filled Outlined Elevated Tonal Text 
<a class="elementskit_button filled medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Filled
</a>
<a class="elementskit_button outlined medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Outlined
</a>
<a class="elementskit_button elevated medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Elevated
</a>
<a class="elementskit_button tonal medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Tonal
</a>
<a class="elementskit_button medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Text
</a>

Rounded with Icon

Filled Outlined Elevated Tonal Text 
<a class="elementskit_button filled rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Filled
</a>
<a class="elementskit_button outlined rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Outlined
</a>
<a class="elementskit_button elevated rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Elevated
</a>
<a class="elementskit_button tonal rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Tonal
</a>
<a class="elementskit_button rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Text
</a>

Download Box

If you have a dedicated image, you can use it as shown below.

Adobe Photoshop
Adobe Photoshop
Size: 20 GB
Updated: October 24, 2025
File Type: .zip
Download 
<div class="download_box">
  <div class="app_title">Adobe Photoshop</div>
  <div class="app_inner">
    <div class="app_icon">
      <img alt="Adobe Photoshop" height="64" src="IMAGE_URL" width="64"/>
    </div>
    <div class="app_meta">
      <div class="app_size">Size: 20 GB</div>
      <div class="app_update">Updated: October 24, 2025</div>
      <div class="app_type">File Type: .zip</div>
    </div>
    <div class="download_right">
      <a class="elementskit_button filled rounded medium_font" href="#">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
        Download
      </a>
    </div>
  </div>
</div>

If no image is available, you may use an alternative icon. The icon can be customized as needed.

Adobe Illustrator
Size: 3 GB
Updated: October 28, 2025
File Type: .zip
Download 
<div class="download_box">
  <div class="app_title">Adobe Illustrator</div>
  <div class="app_inner">
    <div class="app_icon no_image">
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17V15H14V17H12M14 13V11H12V13H14M14 9V7H12V9H14M10 11H12V9H10V11M10 15H12V13H10V15M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H12V7H10V5H5V19H19V5Z"></path></svg>
    </div>
    <div class="app_meta">
      <div class="app_size">Size: 3 GB</div>
      <div class="app_update">Updated: October 28, 2025</div>
      <div class="app_type">File Type: .zip</div>
    </div>
    <div class="download_right">
      <a class="elementskit_button filled rounded medium_font" href="#">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
        Download
      </a>
    </div>
  </div>
</div>

List

Guide List

  1. Sociis tellus condimentum non commodo amet vulputate leo conubia nunc egestas duis sociosqu fringilla tristique lacinia consequat a pellentesque iaculis!
    1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  2. At libero bibendum semper integer phasellus ultrices volutpat nascetur vel platea hendrerit hac per lorem elementum dolor maecenas venenatis erat?
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.
    • Cras ornare tristique elit.
    • Vivamus vestibulum ntulla nec ante.
  3. Nascetur imperdiet congue facilisi habitasse viverra sit pharetra vulputate tellus viverra amet interdum magna posuere neque class dui suspendisse netus.
  4. Posuere a quam varius natoque blandit primis dui massa tempor praesent non massa orci class vehicula molestie nec nibh cum.
  5. Porta dolor odio diam laoreet augue sed et est tortor.
<div class="guide_list">
  <ol>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ol>
</div>

Ordered List

  1. Satu satu satu
  2. Dua dua dua
  3. Tiga tiga tiga
  4. Empat empat empat
  5. Lima lima lima
  6. Enam enam enam
  7. Tujuh tujuh tujuh
  8. Delapan delapan delapan
  9. Sembilan sembilan sembilan
  10. Sepuluh sepuluh sepuluh

Unordered List

  • 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

Spoiler

Show / hide content with click event to trigger.

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.
<div class="spoiler">
  <div class="spoiler_header">
    <div class="spoiler_title">Spoiler</div>
    <button class="spoiler_toggle_button" type="button">
      <span>Open</span>
      <span>Close</span>
    </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>
<pre><code>Content</code></pre>

Multi Tab

  • HTML
  • CSS
  • JavaScript
<!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="multi_tab_sh">
  <div class="multi_tab_list">
    <ul>
      <li class="current">HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </div>
  <div class="multi_tab_content visible">
    <pre><code>Content</code></pre>
  </div>
  <div class="multi_tab_content">
    <pre><code>Content</code></pre>
  </div>
  <div class="multi_tab_content">
    <pre><code>Content</code></pre>
  </div>
</div>

Table

Spec Minimum Recommended
OS Windows 11 Windows 11
CPU Intel i5-8400 / AMD Ryzen 5 2600 Intel i7-8700 / AMD Ryzen 5 3600
Memory 12 GB RAM 16 GB RAM
GPU NVIDIA RTX 2060 / AMD Radeon RX 5700 NVIDIA RTX 3080 / AMD Radeon RX 6800 XT
Login Required Epic ID Epic ID
Audio Language English English
Text Languages English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian 
<div class="elementskit_table">
  <table>
    <thead>
      <tr>
        <th>Spec</th>
        <th>Minimum</th>
        <th>Recommended</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>OS</strong></td>
        <td>Windows 11</td>
        <td>Windows 11</td>
      </tr>
    </tbody>
  </table>
</div>

WhatsApp Channel Card

Horizontal Card

<div class="wa_channel_card">
  <div class="wa_channel_icon">
    <svg fill="none" viewBox="0 0 24 24">...</svg>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

<div class="wa_channel_card">
  <div class="wa_channel_image">
    <img alt="WhatsApp Channel Card" height="56" src="IMAGE_URL" width="56"/>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

Vertical Card

<div class="wa_channel_card vertical_card">
  <div class="wa_channel_icon">
    <svg fill="none" viewBox="0 0 24 24">...</svg>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

<div class="wa_channel_card vertical_card">
  <div class="wa_channel_image">
    <img alt="WhatsApp Channel Card" height="56" src="IMAGE_URL" width="56"/>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

Table of Contents

<div class="toc active">
  <div class="toc_header">
    <div class="toc_title">
      <svg aria-hidden="true" fill="currentColor"><use xlink:href="#icon_toc"></use></svg>
      <span>Table of Contents</span>
      <div class="toc_toggle">
        <svg aria-hidden="true" fill="currentColor"><use xlink:href="#icon_expand_circle_down"></use></svg>
      </div>
    </div>
  </div>
  <div class="toc_content"></div>
</div>
Baca Juga:
Tersalin 👍
Imam Al Ghazali
Imam Al Ghazali
Blogger and Kreator Digital

Berita Terkait

  • Komponen
  • Komponen
  • Komponen
  • Komponen
  • Komponen
  • Komponen

Berita Terbaru

  • Komponen
  • Komponen
  • Komponen
  • Komponen
  • Komponen
  • Komponen
Lihat Selengkapnya

Posting Komentar