Beranda Blogger Template

Gila Material Pro V1.3 Redesign - Template Component

M. Riyan

November 03, 2023

---

A+

A-

GMP V1.3 Redesign - Temlate Component

Mulailah dengan lebih dari selusin komponen Gila Material yang dapat digunakan kembali dengan gaya peningkatan dan komponen serta opsi tambahan

Table of Contents

GMP ALret

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa.

Normal Alret

A simple default alert—check it out!

A simple outlined alert—check it out!

<div class="gmp_alert alert_outline">
  <div class="alert_message">
    A simple outlined alert—check it out!
  </div>
</div>

<div class="gmp_alert alert_outline">
  <div class="alert_message">
    A simple outlined alert—check it out!
  </div>
</div>

Alert with Solid Background

Varian gaya latar belakang yang solid. Gunakan salah satu dari empat gaya di bawah ini: A simple info alert—check it out!

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="gmp_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

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

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

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

Alert with Outline Style

Varian gaya outline dengan border. Gunakan salah satu dari empat gaya di bawah ini:

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="gmp_alert alert_info alert_outline">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

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

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

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

Alert with Description Solid Background

Anda bisa menggunakan alert dengan isi konten deskripsi:

Info A simple info alert—check it out!

Warning A simple warning alert—check it out!

Success A simple success alert—check it out!

Error A simple error alert—check it out!

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

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

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

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

Alert with Description Outline Style

Anda bisa menggunakan alert dengan isi konten deskripsi gaya outline:

Info A simple info alert—check it out!

Warning A simple warning alert—check it out!

Success A simple success alert—check it out!

Error A simple error alert—check it out!

<div class="gmp_alert alert_info alert_outline">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="gmp_alert alert_warning alert_outline">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="gmp_alert alert_success alert_outline">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="gmp_alert alert_error alert_outline">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Button

Button adalah elemen yang dapat diklik yang digunakan untuk memicu tindakan. Mereka mengomunikasikan ajakan bertindak kepada pengguna dan memungkinkan pengguna berinteraksi dengan halaman dalam berbagai cara. Label tombol mengungkapkan tindakan apa yang akan terjadi ketika pengguna berinteraksi dengannya.

Button Variants

Button memiliki empat varian yang berbeda:

Default Button Outline Button Unelevated Button Raised Button

<a class="gmp_button" href="#">Default Button</a>
<a class="gmp_button outline" href="#">Outline Button</a>
<a class="gmp_button unelevated" href="#">Unelevated Button</a>
<a class="gmp_button raised" href="#">Raised Button</a>

Button Shapes

Button dapat memiliki bentuk tambahan:

Default Button Rounded Button

<a class="gmp_button unelevated" href="#">Default Button</a>
<a class="gmp_button unelevated rounded" href="#">Rounded Button</a>

Button Disabled

Button jika tidak ada tindakan:

Default Button Disabled Outline Button Disabled Unelevated Button Disabled Raised Button Disabled Rounded Button Disabled

<a class="gmp_button disabled" href="#">Default Button Disabled</a>
<a class="gmp_button outline disabled" href="#">Outline Button Disabled</a>
<a class="gmp_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="gmp_button raised disabled" href="#">Raised Button Disabled</a>
<a class="gmp_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>

Button with Icons

Buat Button dengan icon hanya menambahkan Icon SVG:

Download

<a class="gmp_button unelevated rounded" href="#">
  <svg viewbox="0 0 24 24">
    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
  </svg>
  Download
</a>

Table

Menggunakan markup tabel paling dasar, inilah tampilan Tabel. Semua gaya tabel diwarisi, artinya setiap tabel bersarang akan ditata dengan cara yang sama seperti induknya.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="gmp_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>
      </tbody>
  </table>
</div>

Table Head Options

Gunakan pilihan dari empat class ini untuk mengubah warna Tabel Head: table_primary, table_warning, table_success, and table_error.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="gmp_table">
  <table class="table_error">
      <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>
      </tbody>
  </table>
</div>

Table with Striped Rows

Gunakan class table_stripped untuk menambahkan zebra-striping ke baris tabel mana pun di dalam tbody.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="gmp_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>
      </tbody>
  </table>
</div>

Table with Hoverable Rows

Gunakan class table_hovered untuk mengaktifkan efek hover pada baris tabel dalam tbody.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="gmp_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>

Table Sticky

Gunakan class table_sticky untuk menggunakan tabel sticky

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="gmp_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>
      </tbody>
  </table>
</div>