ADVERTISEMENT

Components (Manual Mode)

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

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. 
<blockquote>
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.
</blockquote>

Buttons

Default Button

<button class="elementskit_button">Button Default</button>
<button class="elementskit_button outlined">Button Outlined</button>
<button class="elementskit_button unelevated">Button Unelevated</button>
<button class="elementskit_button raised">Button Raised</button>

Button Rounded

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

Button with Colors

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

Button Sizes

<button class="elementskit_button button_small unelevated">Button Small</button>
<button class="elementskit_button unelevated">Button Normal</button>
<button class="elementskit_button button_large unelevated">Button Large</button>

Floating Action Button (FAB)

<button aria-label="Button" class="elementskit_button fab unelevated"><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></button>
<button aria-label="Button" class="elementskit_button button_large fab unelevated"><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></button>
<button aria-label="Button" class="elementskit_button fab extended unelevated"><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</button>
<button aria-label="Button" class="elementskit_button button_large fab extended unelevated"><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</button>

Disabled Button

<button class="elementskit_button disabled">Button Default</button>
<button class="elementskit_button outlined disabled">Button Outlined</button>
<button class="elementskit_button unelevated disabled">Button Unelevated</button>
<button class="elementskit_button raised disabled">Button Raised</button>
<button aria-label="Button" class="elementskit_button fab unelevated disabled"><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></button>
<button aria-label="Button" class="elementskit_button button_large fab unelevated disabled"><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></button>
<button aria-label="Button" class="elementskit_button fab extended unelevated disabled"><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</button>
<button aria-label="Button" class="elementskit_button button_large fab extended unelevated disabled"><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</button>

Guide List

  1. 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.

  2. 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. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

  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).

<div class="guide_list">
  <ol>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
  </ol>
</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"/>

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>

Related Posts (manual)

Read Also: Gila Material Pro - Premium Blogger Template
Read Also: Jobzeek - Best Premium Blogger Template for Job Posting
Read Also: Spaceback UI - Best Premium Blogger Template With UI Modern 
<div class="related_posts_manual">
  <b>Read Also</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>

<div class="related_posts_manual">
  <b>Read Also</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>

<div class="related_posts_manual">
  <b>Read Also</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>

Spoiler

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>

Multi Tabs

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

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).
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>
Related Jobs
  • Skeleton Image
  • Skeleton Image
  • Skeleton Image
  • Skeleton Image
  • Skeleton Image
  • Skeleton Image
Post a Comment
Cancel
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT