All Typography and Codes
Note Block
Memberikan umpan balik yang kontekstual.
Note Block ini memiliki beberapa variasi, anda bisa memilihnya dengan kebutuhan anda.
Note Block Sederhana
<div class="gila_material_alert">
<div class="alert_message">
A simple default alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_outline">
<div class="alert_message">
A simple outlined alert—check it out!
</div>
</div>Note Block Warna
<div class="gila_material_alert alert_info">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>Note Block Dengan Garis Luar
<div class="gila_material_alert alert_info alert_outline">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning alert_outline">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success alert_outline">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error alert_outline">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>Note Block Warna Dan Note Block Garis Luar Dengan Tambahan Catatan Peringatan
//Note Block Warna Dengan Peringatan
<div class="gila_material_alert alert_info">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>
// Note Block Garis Luar Dengan Peringatan
<div class="gila_material_alert alert_info alert_outline">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning alert_outline">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success alert_outline">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error alert_outline">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>Button ( Tombol )
Tombol adalah sebuah elemen yang bisa di klik dan bisa mengalihkan URL ke sebuah halaman blog sendiri atau sebuah halaman blog lain.
Untuk tombol terdapat banyak variasi dari yang memiliki warna background hingga garis luarnya saja.
Semua Jenis Tombol
//Button Varian
<a class="gila_material_button" href="#">Default Button</a>
<a class="gila_material_button outline" href="#">Outline Button</a>
<a class="gila_material_button unelevated" href="#">Unelevated Button</a>
<a class="gila_material_button raised" href="#">Raised Button</a>
//Button Shapes
<a class="gila_material_button unelevated" href="#">Default Button</a>
<a class="gila_material_button unelevated rounded" href="#">Rounded Button</a>
//Button Disabled
<a class="gila_material_button disabled" href="#">Default Button Disabled</a>
<a class="gila_material_button outline disabled" href="#">Outline Button Disabled</a>
<a class="gila_material_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="gila_material_button raised disabled" href="#">Raised Button Disabled</a>
<a class="gila_material_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>
//Button Dengan Icon
<a class="gila_material_button unelevated rounded" href="#">
<svg viewbox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
</svg>
Download
</a>Table
Untuk tabel kami sudah menyiapkan banyak jenis tabel yang bisa anda gunakan.
//Table Sederhana
<div class="gila_material_table">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
//Tabel Dengan Head Pilihan
<div class="gila_material_table">
<table class="table_primary">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
//Tabel Dengan Garis Langkah
<div class="gila_material_table">
<table class="table_stripped">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
//Tabel Dengan Hoverable Rows
<div class="gila_material_table">
<table class="table_hovered">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
//Tabel Sticky
<div class="gila_material_table table_sticky">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>6</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>7</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Accordion/Collapsible Panel
<div class="gila_material_collapse">
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 1 - Click Me!</div>
</div>
<div class="collapse_content">
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.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 2 - Click Me!</div>
</div>
<div class="collapse_content">
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.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 3 - Click Me!</div>
</div>
<div class="collapse_content">
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.
</div>
</div>
</div>Blockquote
Gunakan blockquote dengan span, small atau footer.
<blockquote>
miMagz Material selalu berusaha memberikan yang terbaik untuk Anda.
<span>~ Telat Ngoding</span>
</blockquote>Kode Pre dan Tag
Kode dan Tag sudah disediakan di template blogger yang responsif ini.
Semua Kode Pre
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample HTML</title>
</head>
<body>
<p>Sample Text</p>
</body>
</html>Untuk merubah tulisan HTML silahkan rubah pada bagian yang saya tandai.
Manual Related Post
<div class="manual_related_post">
<a href="#">
Gila Material - Template Components
<span>Related Article</span>
</a>
</div>Table of Contents Otomatis
Sertakan H2 dan H3 maka table of contents akan otomatis
<div class="toc_wrap">
<div class="toc_title">
Table of Contents
</div>
<div id="toc_content"></div>
</div>Post Reference
Bisa digunakan untuk menambahkan referensi artikel anda.
<p class="post_reference">
Referensi:
<br />
https://www.telatngoding.com/
</p>