Components
Accordion
<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
Default Alert
<div class="elementskit_alert alert_success">
<div class="alert_message">
This is a success Alert.
</div>
</div>
<div class="elementskit_alert alert_info">
<div class="alert_message">
This is an info Alert.
</div>
</div>
<div class="elementskit_alert alert_warning">
<div class="alert_message">
This is a warning Alert.
</div>
</div>
<div class="elementskit_alert alert_error">
<div class="alert_message">
This is an error Alert.
</div>
</div>
Outlined Alert
<div class="elementskit_alert alert_outline alert_success">
<div class="alert_message">
This is a success Alert.
</div>
</div>
<div class="elementskit_alert alert_outline alert_info">
<div class="alert_message">
This is an info Alert.
</div>
</div>
<div class="elementskit_alert alert_outline alert_warning">
<div class="alert_message">
This is a warning Alert.
</div>
</div>
<div class="elementskit_alert alert_outline alert_error">
<div class="alert_message">
This is an error Alert.
</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
<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 aria-label="Button" 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 aria-label="Button" 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 aria-label="Button" 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 aria-label="Button" 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>
Downloadable File
<div class="elementskit_downloadable">
<div class="downloadable_icon">
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6H12L10 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6M18 12H16V14H18V16H16V18H14V16H16V14H14V12H16V10H14V8H16V10H18V12Z"/></svg>
</div>
<div class="downloadable_content">
<strong class="downloadable_filename">Whitespace v1.0.zip</strong>
<em class="downloadable_filesize">9999 GB</em>
</div>
<a class="downloadable_url" href="https://whitespace.gilatemax.com/" title="Whitespace v1.0.zip" rel="nofollow noopener noreferer" target="_blank">
<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"/></svg>
</a>
</div>
Guide List
-
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.
-
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.
-
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.
<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
- https://www.gilatemax.com/2024/04/insanews-best-premium-news-blogger.html
- https://www.gilatemax.com/2024/03/duid-best-premium-blogger-template-with.html
- https://www.gilatemax.com/2023/11/bio-sphere-best-premium-bio-link.html
- https://www.gilatemax.com/2023/07/spade-best-premium-blogger-template-for.html
- https://www.gilatemax.com/2023/04/maximum-best-premium-blogger-landing.html
- https://www.gilatemax.com/2022/10/spaceback-ui-best-premium-blogger.html
- https://www.gilatemax.com/2022/08/jobzeek-best-premium-blogger-template.html
- https://www.gilatemax.com/2022/07/zerch-pro-best-premium-blogger-template.html
- https://www.gilatemax.com/2022/06/vulia-theme-premium-blogger-template.html
- https://www.gilatemax.com/2022/04/gila-material-pro-premium-blogger.html
- https://www.gilatemax.com/2022/01/gila-material-free-blogger-template-for.html
<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 Mode)
<div class="related_posts_manual">
<b>Also Read</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>
<div class="related_posts_manual">
<b>Also Read</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>
<div class="related_posts_manual">
<b>Also Read</b>: <a href="LINK_HERE">TITLE_HERE</a>
</div>
Spoiler
<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
<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>
Table Of Contents
<div class="toc_wrap">
<div class="toc_header">Table of Contents</div>
<div class="toc_content"></div>
</div>