Notifikasi
  • Mengonfigurasi Google Custom Search Engine
    Fitur ini berguna untuk mengaktifkan atau menonaktifkan Google Custom Search Engine (CSE) untuk bilah pencarian. Berikut adalah beberapa langkah untuk mengaturnya dan penjelasannya. Daftar Isi Cara Mengaktifkan Fitur Google Custom Search Engine Ikuti langkah-langkah berikut. Masuk ke Dashboard Blogger > pilih menu Tema. …
  • Cara Membuat Postingan Produk
    Untuk membuat postingan Produk harus menggunakan kode HTML khusus yang sudah disediakan, jadi tidak sama seperti membuat postingan biasa. Daftar Isi Cara Membuat Kode HTML Postingan Produk Berikut langkah-langkahnya. Siapkan dulu URL gambar produk yang akan diposting. Berikut langkah-langkahnya: Masuk ke Dashboard Blogger > pilih menu…
  • Mengonfigurasi Tools Generator SafeLink
    Safelink adalah website yang dibuat untuk mengalihkan pengguna dari situs awal ke website tujuan. Safelink dapat memudahkan Anda karena Anda tidak harus selalu membuat URL baru untuk setiap link tujuan. Daftar Isi Menambahkan Halaman Generator URL Safelink Selanjutnya, Anda harus membuat dan menerbitkan halaman statis di Blogger. Ikuti langkah-langkah berikut: …
  • Mengonfigurasi Widget Postingan Berdasarkan Label
    Widget Postingan Berdasarkan Label merupakan salah satu widget yang dapat menampilkan artikel terbaru berdasarkan label di Homepage. Widget ini sendiri banyak sekali fungsinya, diantaranya yang paling populer adalah untuk mempermudah pengunjung menemukan postingan dari yang paling terbaru hingga ke postingan ke yang paling lama, artinya widget ini bisa saya simpulkan sebagai Tampilan Postingan berdasarkan Waktu, karena postingannya di sortir dari yang paling baru. Ada 6 widget yang…
  • Product Showcase
    Widget ini berguna khususnya untuk para affiliator seperti untuk produk Shopee, Tokopedia, atau lainnya. Dengan widget ini kita bisa memajang produk lebih dari 1 namun tidak menghabiskan banyak space di blog. Sehingga kemungkinan mendapatkan klik produk lebih banyak lagi. Widget ini sudah responsif, jadi bisa ditaruh di mana aja misal di header, sidebar, atau postingan. Tapi saran saya, tempat terbaik untuk menaruh widget ini yaitu di bawah postingan karena kemungkinan mendapat kliknya…
  • Widget Subscribe Box
    Blogger mengucapkan selamat tinggal pada gadget atau widget FollowByEmail. Keputusan ini muncul setelah Feedburner memutuskan untuk menutup layanan Subscribe email. Sebelumnya, kita bisa menggunakan widget melalui opsi Layout di dashboard Blogger. Fitur ini memungkinkan pengunjung blog untuk berlangganan atau berlangganan konten kami melalui email. Sayangnya, fitur ini tidak lagi didukung oleh Blogger. Ini berarti bahwa kita tidak dapat lagi mengandalkan Blogger untuk mengirimkan…
  • Mengonfigurasi Widget Kustom Halaman Facebook dan Youtube Channel
    Daftar Isi Cara mengonfigurasi widget Halaman Facebook Ikuti langkah ini: Masuk ke Dashboard Blogger > pilih menu Tata Letak. Cari bagian yang berjudul MENU SIDEBAR. Klik tombol edit (ikon pensil) di Gadget Ikuti di Facebook (Gadget…
  • Cara Menampilkan Kotak Penulis di Bawah Postingan
    Kotak Penulis di bawah posting dalam template Gila Material PRO secara otomatis diambil dari profil Blogger. Ikuti langkah ini: Cara Menampilkan Profil Blogger Masuk ke Dashboard Blogger > pilih menu Setelan. Klik Profil Pengguna. Pada bagian Perkenalkan Diri Anda, isikan teks yang ingin ditampilkan. Kotak Author…
  • Mengonfigurasi Widget Iklan
    Gila Material Pro menyematkan widget iklan di bagian berikut: Iklan Di Bawah Header. Iklan Infeed (Homepage). Iklan Dalam Postingan: Iklan Atas Iklan Tengah 1 Iklan Parallax Iklan Tengah 2 Iklan Bawah Iklan Matched Content Anda dapat mengatur semua widget iklan ini dengan cara berikut: Daftar Isi Iklan Di Bawah Header Ikuti langkah ini: …
  • Mengonfigurasi Ikon Kustom
    Gila Material Pro menggunakan ikon SVG dengan tema Desain Material. Ada beberapa keuntungan untuk ikon SVG, termasuk skalabilitas, SEO friendly, kemampuan mengedit, dan resolusi independen. Oleh karena itu, masa depan SVG akan terlihat cerah dan tren penggunaan SVG akan terus meningkat. Berikut adalah beberapa keuntungan menggunakan ikon SVG: Tidak akan kabur dan tidak akan pecah saat diperbesar. Tidak akan blur dan tidak pecah saat resolusi diperbesar. Kualitas gambar akan tetap…
Iklan Billboard

Gila Material Pro - Komponen Template

Komponen yang tersedia di template Gila Material Pro.
Iklan Atas

Mulai dengan lebih dari selusin komponen Gila Material Pro yang dapat digunakan kembali dengan gaya pemutakhiran serta komponen dan opsi tambahan.

Alerts

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa.

Varian Alert

Alert memiliki dua varian berbeda:

A simple default alert—check it out!
A simple outlined alert—check it out!
<div class="gmp_alert">
  <div class="alert_message">
    A simple default 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>
Salin

Alert dengan Background Solid

Varian gaya background yang solid. 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">
  <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>
Salin

Alert dengan Gaya Garis

Varian gaya garis tepi dengan batas. 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>
Salin

Alert dengan Deskripsi Background Solid

Anda dapat 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>
Salin

Alert dengan Gaya Garis Deskripsi

Anda dapat menggunakan alert dengan isi deskripsi gaya garis:

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

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 button mengungkapkan tindakan apa yang akan terjadi saat pengguna berinteraksi dengannya.

Varian Button

Button memiliki empat varian berbeda:

Iklan Tengah 1
<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>
Salin

Ukuran Button

Button memiliki tiga ukuran berbeda:

<a class="gmp_button small unelevated" href="#">Small Button</a>
<a class="gmp_button medium unelevated" href="#">Medium Button</a>
<a class="gmp_button large unelevated" href="#">Large Button</a>
Salin

Bentuk Button

Button dapat memiliki bentuk tambahan:

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

Button Dinonaktifkan

Button jika tidak ada tindakan:

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

Button dengan Ikon

Buat button dengan ikon cukup tambahkan Ikon SVG:

<a class="gmp_button outline" href="#">
  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
    <path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
  </svg>
  Demo
</a>

<a class="gmp_button unelevated" href="#">
  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <path d="m7 10 5 5 5-5"></path>
    <path d="M12 15V3"></path>
  </svg>
  Download
</a>
Salin

Tabel

Menggunakan markup tabel paling dasar, inilah tampilan Tabel. Semua gaya tabel diwariskan, artinya setiap tabel bertingkat 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.
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>
      <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>
Salin

Opsi Kepala Tabel

Gunakan pilihan dari keempat class ini untuk mengubah warna Kepala Tabel: table_primary, table_warning, table_success, dan 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.
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_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>
Salin

Tabel dengan Baris Bergaris

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

Iklan Parallax
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_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>
Salin

Tabel dengan Baris yang Dapat Dilayangkan

Gunakan class table_hovered untuk mengaktifkan efek hover pada baris tabel di 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>
Salin

Tabel 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.
6 Tidak ada data. Tidak ada data. Tidak ada data. Tidak ada data.
7 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>
          <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>
Salin

Accordion/Collapsible Panel

Contoh:

Ciutkan 1 - Klik Saya!
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.
Ciutkan 2 - Klik Saya!
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.
Ciutkan 3 - Klik Saya!
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 class="gmp_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>
Salin

Blockquote

Gunakan blockquote dengan span, small atau footer.

Gila Temax selalu berusaha memberikan yang terbaik untuk Anda. @isharyuliansatriani
<blockquote>
  Gila Temax selalu berusaha memberikan yang terbaik untuk Anda.
  <span>@isharyuliansatriani</span>
</blockquote>
Salin

Tag Pre Code

Tag pre code telah disertakan dengan fitur copy to clipboard. Jika teksnya HTML jangan lupa untuk mem-parse teks menggunakan Alat Parse HTML.

Di bawah ini adalah kombinasi dari tag awal dengan tag kode dan tambahkan judul ke tag awal seperti di bawah ini:

<div class="gmp_highlight">
  <pre data-lang="yout-title-here"><code>Your code here</code></pre>
</div>
Salin

Contoh:

<!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>
Salin
body{font-size:14px;font-weight:400;color:inherit;}
Salin
$('#mybutton').click(function() {
  $(this).toggleClass('active');
});
Salin

Di bawah ini seperti dokumen angular.io:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}
Salin

Postingan Terkait Manual

Postingan Terkait Manual dapat digunakan untuk membuat artikel terkait dalam postingan secara manual.

Contoh:

Baca Juga: Gila Material Pro - Komponen Template
<div class="manual_related_post">
  <span>Baca Juga:</span>
  <a href="#">
    Gila Material Pro - Komponen Template
  </a>
</div>
Salin

Media

Gunakan class media_player untuk membuat embed, iframe, dan object yang responsif.

Iklan Tengah 2

Contoh untuk embed iframe YouTube dengan fitur lazyload.

Youtube video
<div class="media_player lyt" data-embed="2Oi87E2Wk2g">
  <div class="play_button">
    <svg viewBox="0 0 24 24">
      <path d="M10 15l5.2-3L10 9v6m11.6-7.8a8.4 8.4 0 0 1 .2 1.9 16.2 16.2 0 0 1 .1 2.1v.8a25.1 25.1 0 0 1-.4 4.8 2.7 2.7 0 0 1-1.8 1.8l-2.6.2H12a50.8 50.8 0 0 1-7.8-.4 2.7 2.7 0 0 1-1.8-1.8 8.4 8.4 0 0 1-.2-1.9 16.2 16.2 0 0 1-.1-2.1V12a25.1 25.1 0 0 1 .4-4.8 2.7 2.7 0 0 1 1.7-1.8 12.6 12.6 0 0 1 2.6-.2H12a50.8 50.8 0 0 1 7.8.4 2.7 2.7 0 0 1 1.8 1.6z"></path>
    </svg>
  </div>
</div>
Salin
Bagian yang diberi tanda kuning ganti dengan kode embed dari video YouTube.

Contoh:
https://www.youtube.com/embed/XXXXXXXX

Postingan Referensi

Untuk menambahkan daftar referensi ke artikel yang Anda tulis:

Referensi:
https://gilamaterialpro.gilatemax.com/

<p class="post_reference">
  Reference:
  <br />
  https://gilamaterialpro.gilatemax.com/
</p>
Salin

Lain-lain

Ini adalah komponen lain yang berguna untuk digunakan.

Daftar Isi

Dengan JavaScript, secara otomatis membuat Daftar Isi untuk postingan Anda. Ini akan berfungsi jika postingan Anda menyertakan judul h2 dan h3.

Gunakan kode HTML di bawah ini dan tempelkan di Postingan Blogger dalam mode Tampilan HTML.

<div id="toc_wrap">
  <div class="toc_header">
    <div class="toc_title">
      Daftar Isi
    </div>
    <div class="show_hide_toc_button">
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="m18 15-6-6-6 6"></path>
      </svg>
    </div>
  </div>
  <div id="toc_content"></div>
</div>
Salin

Semua komponen yang tercantum di sini akan diperbarui saat tersedia.
Jika Anda ingin melaporkan beberapa bug, Anda dapat menulisnya di bagian komentar halaman Laporkan Bug dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tulis di bagian komentar di halaman Request dan Feedback.
Iklan Bawah
Dokumentasi
Ishar Yulian Satriani
Ishar Yulian Satriani
Front-end web developer at Gila Temax.
Follow me on: Instagram
Iklan Matched Content
Gabung dalam percakapan (9)
9 komentar
Admin berhak menghapus komentar Anda jika mengandung kata-kata yang tidak pantas, silahkan berkomentar dengan bijak.
  1. RICKY
    13 Agustus, 2023 19:44
    Profil
    RICKY
    RICKY
    Berkata: Mas ini nggak ada fitur baca juga otomatis kah?
    Mas ini nggak ada fitur baca juga otomatis kah?
  2. The Admin
    05 Desember, 2022 23:57
    Profil
    The Admin
    The Admin
    Berkata: Provide css file for us on other theme
    Provide css file for us on other theme
  3. Asupan Viral Bocil Doodstream
    29 November, 2022 16:13
    Profil
    Asupan Viral Bocil Doodstream
    Asupan Viral Bocil Doodstream
    Komentar ini telah dihapus oleh pengarang.
    Komentar ini telah dihapus oleh pengarang.
  4. Mas Dar
    01 November, 2022 14:26
    Profil
    Mas Dar
    Mas Dar
    Berkata: Tes
    Tes
  5. Iamuki
    25 Oktober, 2022 17:31
    Profil
    Iamuki
    Iamuki
    Berkata: Mantap
    Mantap
  6. Admin
    07 Juli, 2022 09:06
    Profil
    Admin
    Admin
    Berkata: Keren templatex simple ringan dan Seo friendly
    Keren templatex simple ringan dan Seo friendly
    • Ehsaaan
      08 Juli, 2022 07:21
      Profil
      Ehsaaan
      Ehsaaan
      Berkata: keren templatenya. tp sy liat versi desktop templatenya ga punya sidebar kah mas? semuanya 1 kolom kebawah gitu. smg bisa kebeli theme nya
      keren templatenya. tp sy liat versi desktop templatenya ga punya sidebar kah mas? semuanya 1 kolom kebawah gitu. smg bisa kebeli theme nya
    • Ishar Yulian Satriani
      08 Juli, 2022 09:43
      Profil
      Ishar Yulian Satriani
      Ishar Yulian Satriani
      Berkata: ada sidebar mas, tapi kalo di tampilan desktop 1024px diatur ke bawah semua.
      ada sidebar mas, tapi kalo di tampilan desktop 1024px diatur ke bawah semua.