Template Components

October 06, 2024 - (Updated: November 07, 2026)

haxorai.com

Halaman Template Components merupakan dokumentasi referensi komponen antarmuka (UI) yang tersedia pada template Blogger ini. Dokumentasi ini dibuat sebagai catatan teknis untuk membantu pengembang dan pengguna template memahami struktur HTML, variasi tampilan, serta cara menerapkan setiap komponen di dalam postingan atau halaman Blogger.

Setiap bagian menampilkan contoh visual dan potongan kode HTML yang dapat disesuaikan dengan kebutuhan. Komponen yang tersedia meliputi alert, blockquote, button, collapsible panel, guide list, syntax highlighter, tabel, tab, form field, embed YouTube, dan Table of Contents.

Catatan penggunaan: contoh kode pada halaman ini merupakan referensi implementasi. Beberapa elemen memerlukan stylesheet dan JavaScript bawaan template agar dapat berfungsi sebagaimana mestinya. Nama class dan struktur elemen sebaiknya dipertahankan ketika digunakan.

Table of Contents

Alerts

Alert merupakan komponen pesan yang digunakan untuk menyampaikan informasi, peringatan, keberhasilan, atau kesalahan kepada pengunjung. Komponen ini membantu membedakan pesan berdasarkan tingkat kepentingannya.

Variasi Alert

Variasi default dan outline dapat digunakan untuk menampilkan pesan sederhana dengan tampilan yang berbeda.

Informasi: pengaturan telah berhasil disimpan.

<div class="spade_alert">
  <div class="alert_message">
    Informasi: pengaturan telah berhasil disimpan.
  </div>
</div>

<div class="spade_alert alert_outline">
  <div class="alert_message">
    Informasi: pengaturan telah berhasil disimpan.
  </div>
</div>

Alert dengan Background Solid

Gunakan class alert_info, alert_warning, alert_success, atau alert_error untuk menentukan jenis pesan yang ingin ditampilkan.

Informasi: tersedia pembaruan dokumentasi komponen.

Peringatan: periksa kembali konfigurasi sebelum menyimpan perubahan.

Berhasil: konfigurasi berhasil diterapkan.

Kesalahan: data yang dimasukkan belum sesuai.

<div class="spade_alert alert_info">
  <div class="alert_message">
    Informasi: tersedia pembaruan dokumentasi komponen.
  </div>
</div>

<div class="spade_alert alert_warning">
  <div class="alert_message">
    Peringatan: periksa kembali konfigurasi.
  </div>
</div>

<div class="spade_alert alert_success">
  <div class="alert_message">
    Berhasil: konfigurasi berhasil diterapkan.
  </div>
</div>

<div class="spade_alert alert_error">
  <div class="alert_message">
    Kesalahan: data yang dimasukkan belum sesuai.
  </div>
</div>

Alert dengan Gaya Garis

Variasi outline menggunakan garis tepi untuk membedakan jenis pesan tanpa memenuhi seluruh area komponen dengan warna latar.

Informasi: dokumentasi tersedia untuk referensi pengembangan.

Peringatan: pastikan class komponen sesuai dengan struktur HTML.

Berhasil: proses pengujian komponen selesai.

Kesalahan: komponen tidak dapat ditampilkan dengan konfigurasi saat ini.

<div class="spade_alert alert_info alert_outline">
  <div class="alert_message">
    Informasi: dokumentasi tersedia untuk referensi.
  </div>
</div>

<div class="spade_alert alert_warning alert_outline">
  <div class="alert_message">
    Peringatan: periksa struktur HTML.
  </div>
</div>

<div class="spade_alert alert_success alert_outline">
  <div class="alert_message">
    Berhasil: pengujian komponen selesai.
  </div>
</div>

<div class="spade_alert alert_error alert_outline">
  <div class="alert_message">
    Kesalahan: komponen tidak dapat ditampilkan.
  </div>
</div>

Alert dengan Judul dan Deskripsi

Elemen strong dapat digunakan untuk menambahkan judul singkat pada pesan sehingga pengunjung lebih mudah memahami konteks informasi.

Informasi Gunakan komponen alert untuk menyampaikan informasi penting kepada pengunjung.

Peringatan Periksa kembali kode sebelum menerapkannya pada template.

Berhasil Komponen berhasil diterapkan pada halaman.

Kesalahan Periksa konfigurasi dan struktur elemen yang digunakan.

<div class="spade_alert alert_info">
  <div class="alert_message">
    <strong>Informasi</strong>
    Deskripsi informasi ditampilkan di sini.
  </div>
</div>

<div class="spade_alert alert_warning">
  <div class="alert_message">
    <strong>Peringatan</strong>
    Deskripsi peringatan ditampilkan di sini.
  </div>
</div>

<div class="spade_alert alert_success">
  <div class="alert_message">
    <strong>Berhasil</strong>
    Deskripsi keberhasilan ditampilkan di sini.
  </div>
</div>

<div class="spade_alert alert_error">
  <div class="alert_message">
    <strong>Kesalahan</strong>
    Deskripsi kesalahan ditampilkan di sini.
  </div>
</div>

Alert dengan Judul dan Gaya Garis

Informasi Gunakan variasi outline untuk pesan dengan tampilan lebih sederhana.

Peringatan Pastikan setiap konfigurasi telah diperiksa.

Berhasil Proses berhasil diselesaikan.

Kesalahan Terdapat konfigurasi yang perlu diperbaiki.

<div class="spade_alert alert_info alert_outline">
  <div class="alert_message">
    <strong>Informasi</strong>
    Deskripsi informasi.
  </div>
</div>

<div class="spade_alert alert_warning alert_outline">
  <div class="alert_message">
    <strong>Peringatan</strong>
    Deskripsi peringatan.
  </div>
</div>

<div class="spade_alert alert_success alert_outline">
  <div class="alert_message">
    <strong>Berhasil</strong>
    Deskripsi keberhasilan.
  </div>
</div>

<div class="spade_alert alert_error alert_outline">
  <div class="alert_message">
    <strong>Kesalahan</strong>
    Deskripsi kesalahan.
  </div>
</div>

Blockquote

Blockquote merupakan elemen HTML untuk menampilkan kutipan atau informasi penting yang ingin dipisahkan dari paragraf utama. Elemen ini dapat digunakan untuk menonjolkan catatan, pernyataan, atau ringkasan.

Struktur antarmuka yang baik membantu pengunjung memahami informasi dan menggunakan fitur situs dengan lebih mudah.

<blockquote>
  Struktur antarmuka yang baik membantu pengunjung
  memahami informasi dan menggunakan fitur situs
  dengan lebih mudah.
</blockquote>

Buttons

Button merupakan elemen antarmuka yang digunakan untuk menyediakan tindakan atau navigasi. Template ini menyediakan beberapa variasi tampilan, ukuran, bentuk, serta gaya tombol.

Variasi Button

Contoh berikut memperlihatkan beberapa gaya tombol yang tersedia. Tautan # hanya digunakan sebagai placeholder demonstrasi.

Default Elevated Filled Filled Tonal Outlined Tambah Data

<a class="spade_button small rounded fwm" href="#">
  Default
</a>

<a class="spade_button small elevated rounded fwm" href="#">
  Elevated
</a>

<a class="spade_button small filled rounded fwm" href="#">
  Filled
</a>

<a class="spade_button small filled_tonal rounded fwm" href="#">
  Filled Tonal
</a>

<a class="spade_button small outlined rounded fwm" href="#">
  Outlined
</a>

<a class="spade_button small fab elevated filled_tonal"
   href="#" aria-label="Tambah">
  <svg fill="none" stroke="currentColor"
       stroke-linecap="round" stroke-linejoin="round"
       stroke-width="1" viewBox="0 0 24 24">
    <path d="M12 5v14"></path>
    <path d="M5 12h14"></path>
  </svg>
</a>

Button Size

Ukuran tombol dapat ditentukan menggunakan class small, medium, dan large.

Small Button Medium Button Large Button

<a class="spade_button small elevated filled_tonal fwm" href="#">
  Small Button
</a>

<a class="spade_button medium elevated filled_tonal fwm" href="#">
  Medium Button
</a>

<a class="spade_button large elevated filled_tonal fwm" href="#">
  Large Button
</a>

Floating Action Button (FAB)

Floating Action Button atau FAB merupakan tombol berbentuk ikon yang digunakan untuk menonjolkan satu tindakan utama. Class fab digunakan untuk mengaktifkan bentuk tombol tersebut.

Small Medium Large

<a class="spade_button fab small elevated filled_tonal"
   href="#" aria-label="Tambah">
  <svg fill="none" stroke="currentColor"
       stroke-linecap="round" stroke-linejoin="round"
       stroke-width="1" viewBox="0 0 24 24">
    <path d="M12 5v14"></path>
    <path d="M5 12h14"></path>
  </svg>
</a>

<a class="spade_button fab extended medium elevated filled_tonal fwm"
   href="#">
  <svg fill="none" stroke="currentColor"
       stroke-linecap="round" stroke-linejoin="round"
       stroke-width="1" viewBox="0 0 24 24">
    <path d="M12 5v14"></path>
    <path d="M5 12h14"></path>
  </svg>
  Tambah Data
</a>

Button Disabled

Class disabled digunakan untuk memperlihatkan tampilan tombol yang sedang tidak aktif. Contoh berikut hanya menunjukkan tampilan visual sesuai stylesheet template.

Default Elevated Filled Filled Tonal Outlined

<a class="spade_button small rounded fwm disabled"
   href="#" aria-disabled="true">
  Default
</a>

<a class="spade_button small elevated rounded fwm disabled"
   href="#" aria-disabled="true">
  Elevated
</a>

<a class="spade_button small filled rounded fwm disabled"
   href="#" aria-disabled="true">
  Filled
</a>

Collapsible Panel

Collapsible Panel adalah komponen untuk menyusun informasi dalam bagian yang dapat dibuka dan ditutup. Komponen ini berguna ketika halaman memiliki beberapa kelompok informasi yang ingin ditampilkan secara ringkas.

Setiap panel menggunakan struktur collapse_panel, collapse_header, collapse_title, dan collapse_content.

Apa fungsi komponen Alert?

Alert digunakan untuk menyampaikan informasi, peringatan, status keberhasilan, atau pesan kesalahan kepada pengunjung.

Bagaimana menggunakan Button?

Button menggunakan elemen HTML anchor dengan class spade_button. Pengembang dapat menyesuaikan ukuran, bentuk, warna, dan variasi tampilannya melalui class yang tersedia.

Apa kegunaan Syntax Highlighter?

Syntax Highlighter digunakan untuk menampilkan potongan kode dengan format dan pewarnaan sintaks berdasarkan bahasa pemrograman yang ditentukan.

Bagaimana menggunakan Table of Contents?

Table of Contents menyusun tautan navigasi berdasarkan heading pada artikel. Fitur ini menggunakan judul h2 dan h3 yang tersedia di dalam konten.

<div class="spade_collapse">
  <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">
        Judul Panel
      </div>
    </div>
    <div class="collapse_content">
      Isi informasi panel.
    </div>
  </div>

  <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">
        Judul Panel Berikutnya
      </div>
    </div>
    <div class="collapse_content">
      Isi informasi panel berikutnya.
    </div>
  </div>
</div>

Guide List

Guide List merupakan komponen daftar berurutan yang dapat digunakan untuk menjelaskan langkah-langkah, prosedur konfigurasi, atau tahapan penggunaan suatu fitur.

Siapkan struktur HTML yang diperlukan sesuai dengan dokumentasi komponen. Pastikan setiap elemen menggunakan class yang benar.
Tambahkan komponen ke dalam halaman atau postingan Blogger melalui editor HTML. Periksa kembali susunan elemen pembuka dan penutup.
Simpan perubahan dan buka halaman untuk memeriksa hasil tampilannya. Jika komponen tidak berfungsi, periksa ketersediaan stylesheet dan JavaScript bawaan template.

<div class="guide_list">
  <ol>
    <li>
      <p>Langkah pertama.</p>
    </li>
    <li>
      <p>Langkah kedua.</p>
    </li>
    <li>
      <p>Langkah ketiga.</p>
    </li>
  </ol>
</div>

Image with Caption

Komponen gambar dengan caption digunakan untuk menampilkan gambar beserta keterangan atau sumbernya. Caption membantu memberikan konteks tambahan terhadap gambar yang ditampilkan dalam artikel.

Contoh gambar dedaunan untuk demonstrasi komponen gambar dengan caption

Contoh tampilan gambar dengan keterangan.

<table class="tr-caption-container"
       align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align:center;">
        <a href="URL-GAMBAR">
          <img
            src="URL-GAMBAR"
            alt="Deskripsi gambar"
            width="600"
          />
        </a>
      </td>
    </tr>
    <tr>
      <td class="tr-caption" style="text-align:center;">
        Keterangan gambar.
      </td>
    </tr>
  </tbody>
</table>

Post Reference

Post Reference merupakan komponen untuk mencantumkan sumber atau referensi yang digunakan dalam sebuah artikel. Bagian ini dapat membantu pembaca menemukan dokumentasi, panduan, atau sumber informasi terkait.

Reference:
MDN Web Docs - HTML
MDN Web Docs - CSS
MDN Web Docs - JavaScript

<div class="post_reference">
  <strong>Reference:</strong>
  <br />
  <a href="URL-REFERENSI-1">
    Nama Referensi Pertama
  </a>
  <br />
  <a href="URL-REFERENSI-2">
    Nama Referensi Kedua
  </a>
</div>

Spoiler

Spoiler merupakan komponen untuk menyembunyikan informasi dan menampilkannya ketika pengunjung memilih tombol yang tersedia. Komponen ini dapat digunakan untuk menyimpan catatan tambahan, penjelasan, atau informasi yang tidak harus langsung terlihat.

Lihat Informasi Tambahan

<div class="spoiler">
  <div class="spoiler_title">
    Lihat Informasi Tambahan

    <button
      aria-label="Buka atau tutup informasi spoiler"
      class="spade_button fab small filled rounded"
      type="button">

      <svg fill="currentColor" viewBox="0 0 24 24"
           aria-hidden="true">
        <path d="M7,10L12,15L17,10H7Z"></path>
      </svg>
    </button>
  </div>

  <div class="spoiler_content hidden">
    Isi informasi tambahan.
  </div>
</div>

Syntax Highlighter

Syntax Highlighter merupakan komponen untuk menampilkan kode sumber dengan format yang lebih mudah dibaca. Komponen ini mendukung penandaan bahasa seperti HTML, CSS, dan JavaScript melalui class bahasa pada elemen code.

Struktur Dasar Syntax Highlighter

Gunakan elemen pre dan code untuk membungkus potongan kode. Atribut data-lang digunakan sebagai label bahasa atau judul yang ditampilkan oleh template.

<div class="spade_highlight">
  <pre data-lang="HTML">
    <code class="language-html">
      Tulis kode HTML di sini.
    </code>
  </pre>
</div>

Penjelasan atribut:
data-lang digunakan untuk menentukan label bahasa atau judul kode.
language-html digunakan untuk menandai kode HTML.
language-css digunakan untuk menandai kode CSS.
language-javascript digunakan untuk menandai kode JavaScript.

Contoh Syntax HTML

Contoh berikut memperlihatkan struktur dasar dokumen HTML dengan deklarasi doctype, metadata, judul halaman, dan elemen body.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Dokumen HTML</title>
</head>
<body>
  <h1>Halo Dunia</h1>
  <p>Ini adalah contoh struktur dokumen HTML.</p>
</body>
</html>

Contoh Syntax CSS

CSS digunakan untuk mengatur tampilan elemen HTML, seperti warna, ukuran teks, jarak, dan tata letak.

body {
  background-color: #ffffff;
  color: #222222;
  font-size: 14px;
  font-weight: 400;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 28px 0 15px;
}

p {
  margin: 15px 0;
}

Contoh Syntax JavaScript

JavaScript digunakan untuk menambahkan interaksi dan perilaku dinamis pada halaman web. Berikut contoh sederhana untuk mengubah class sebuah elemen ketika tombol diklik.

const button = document.querySelector("#mybutton");

button.addEventListener("click", function() {
  this.classList.toggle("active");
});

Multi Tab Syntax

Multi Tab Syntax digunakan untuk mengelompokkan beberapa potongan kode berdasarkan bahasa pemrograman. Pengunjung dapat berpindah tab untuk melihat contoh HTML, CSS, dan JavaScript tanpa harus menampilkan semuanya sekaligus.

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Contoh HTML</title>
</head>
<body>
  <p>Contoh elemen HTML.</p>
</body>
</html>

body {
  color: #222222;
  background: #ffffff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

p {
  margin: 15px 0;
}

const message = "Komponen berhasil dimuat";

console.log(message);

<div class="tabs syntax">
  <ul class="tab_links">
    <li class="active"><a href="#HTML1">HTML</a></li>
    <li><a href="#CSS1">CSS</a></li>
    <li><a href="#JS1">JavaScript</a></li>
  </ul>

  <div class="tab_content">
    <div class="tab_item active" id="HTML1">
      <div class="spade_highlight">
        <pre>
          <code class="language-html">
            Kode HTML di sini.
          </code>
        </pre>
      </div>
    </div>

    <div class="tab_item" id="CSS1">
      <div class="spade_highlight">
        <pre>
          <code class="language-css">
            Kode CSS di sini.
          </code>
        </pre>
      </div>
    </div>

    <div class="tab_item" id="JS1">
      <div class="spade_highlight">
        <pre>
          <code class="language-javascript">
            Kode JavaScript di sini.
          </code>
        </pre>
      </div>
    </div>
  </div>
</div>

Table

Table digunakan untuk menyusun informasi dalam baris dan kolom. Komponen tabel pada template ini menyediakan beberapa variasi tampilan, seperti header berwarna, baris bergaris, dan efek hover.

Data pada tabel berikut hanya merupakan contoh demonstrasi struktur HTML, bukan daftar produk, harga, atau informasi komersial yang sedang ditawarkan.

Default Table

No.	Component	Class	Description
1	Alert	spade_alert	Information message
2	Button	spade_button	Action element
3	Tabs	tabs	Tabbed content

<div class="spade_table">
  <table>
    <thead>
      <tr>
        <th>No.</th>
        <th>Component</th>
        <th>Class</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Alert</td>
        <td>spade_alert</td>
        <td>Information message</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Button</td>
        <td>spade_button</td>
        <td>Action element</td>
      </tr>
    </tbody>
  </table>
</div>

Table Header Primary

Class table_header digunakan untuk memberikan gaya khusus pada bagian header tabel. Class table_primary menentukan variasi warna utama.

No.	Component	Class	Status
1	Alert	spade_alert	Available
2	Button	spade_button	Available
3	Table	spade_table	Available

<div class="spade_table">
  <table class="table_header table_primary">
    <thead>
      <tr>
        <th>No.</th>
        <th>Component</th>
        <th>Class</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Alert</td>
        <td>spade_alert</td>
        <td>Available</td>
      </tr>
    </tbody>
  </table>
</div>

Table Header Info

No.	Component	Class	Category
1	Alert	spade_alert	Message
2	Blockquote	blockquote	Content
3	Guide List	guide_list	Navigation

<table class="table_header table_info">
  <thead>
    <tr>
      <th>No.</th>
      <th>Component</th>
      <th>Class</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Alert</td>
      <td>spade_alert</td>
      <td>Message</td>
    </tr>
  </tbody>
</table>

Table Header Warning

No.	Component	Class	Category
1	Collapsible	spade_collapse	Interactive
2	Spoiler	spoiler	Interactive

<table class="table_header table_warning">
  <thead>
    <tr>
      <th>No.</th>
      <th>Component</th>
      <th>Class</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Collapsible</td>
      <td>spade_collapse</td>
      <td>Interactive</td>
    </tr>
  </tbody>
</table>

Table Header Success

No.	Component	Class	Status
1	Tabs	tabs	Available
2	Text Field	text_field	Available

<table class="table_header table_success">
  <thead>
    <tr>
      <th>No.</th>
      <th>Component</th>
      <th>Class</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Tabs</td>
      <td>tabs</td>
      <td>Available</td>
    </tr>
  </tbody>
</table>

Table Header Error

No.	Component	Class	Category
1	Form Validation	text_field error	Validation
2	Error Alert	alert_error	Message

<table class="table_header table_error">
  <thead>
    <tr>
      <th>No.</th>
      <th>Component</th>
      <th>Class</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Form Validation</td>
      <td>text_field error</td>
      <td>Validation</td>
    </tr>
  </tbody>
</table>

Table with Striped Rows

Class table_striped digunakan untuk memberikan warna latar berselang-seling pada baris tabel sehingga data lebih mudah dibaca.

No.	Element	HTML Tag
1	Heading	h1 - h6
2	Paragraph	p
3	Link	a
4	Image	img

<table class="table_striped">
  <thead>
    <tr>
      <th>No.</th>
      <th>Element</th>
      <th>HTML Tag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Heading</td>
      <td>h1 - h6</td>
    </tr>
  </tbody>
</table>

Table with Hoverable Rows

Class table_hovered digunakan untuk memberikan efek visual ketika pengunjung mengarahkan pointer ke baris tabel.

No.	Component	Purpose
1	Alert	Display messages
2	Button	Provide actions
3	Tabs	Organize content
4	Table	Present structured data

<table class="table_hovered">
  <thead>
    <tr>
      <th>No.</th>
      <th>Component</th>
      <th>Purpose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Alert</td>
      <td>Display messages</td>
    </tr>
  </tbody>
</table>

Tabs

Tabs merupakan komponen navigasi yang digunakan untuk mengelompokkan beberapa bagian konten dalam satu area. Pengunjung dapat memilih tab untuk menampilkan informasi yang berbeda tanpa harus berpindah halaman.

Overview
Features
Documentation

Overview

Bagian ini menampilkan ringkasan informasi mengenai komponen yang sedang didokumentasikan.

Features

Bagian ini dapat digunakan untuk menjelaskan fitur, variasi tampilan, dan kemampuan komponen.

Documentation

Bagian ini dapat memuat petunjuk implementasi, struktur HTML, serta informasi teknis lainnya.

<div class="tabs">
  <ul class="tab_links">
    <li class="active">
      <a href="#tab1">Overview</a>
    </li>
    <li>
      <a href="#tab2">Features</a>
    </li>
    <li>
      <a href="#tab3">Documentation</a>
    </li>
  </ul>

  <div class="tab_content">
    <div class="tab_item active" id="tab1">
      Konten Overview.
    </div>

    <div class="tab_item" id="tab2">
      Konten Features.
    </div>

    <div class="tab_item" id="tab3">
      Konten Documentation.
    </div>
  </div>
</div>

Text Area

Text Area merupakan elemen formulir yang memungkinkan pengunjung memasukkan teks lebih dari satu baris. Komponen ini dapat digunakan untuk kolom pesan, deskripsi, komentar, atau informasi tambahan.

Pesan atau Deskripsi

<div class="textarea outlined">
  <textarea
    cols="25"
    placeholder=" "
    rows="5"
    style="resize:horizontal;"
    aria-label="Contoh text area">
  </textarea>
  <label>Pesan atau Deskripsi</label>
</div>

Text Field

Text Field merupakan komponen formulir untuk menerima masukan teks dari pengguna. Template ini menyediakan variasi filled dan outlined, serta beberapa kondisi seperti helper text, error, dan disabled.

Basic Text Field

Variasi dasar terdiri dari tampilan filled dan outlined. Kedua variasi menggunakan struktur elemen text_field dengan input dan label.

Nama Pengguna

Alamat Email

<div class="text_field filled">
  <label>
    <input type="text" placeholder=" " />
    <span>Nama Pengguna</span>
  </label>
</div>

<div class="text_field outlined">
  <label>
    <input type="email" placeholder=" " />
    <span>Alamat Email</span>
  </label>
</div>

Form Props

Elemen tambahan di luar label dapat digunakan untuk memberikan helper text atau keterangan singkat mengenai input yang harus diisi.

Nama Pengguna Masukkan nama lengkap Anda.

Alamat Email Gunakan alamat email yang aktif.

<div class="text_field filled">
  <label>
    <input type="text" placeholder=" " />
    <span>Nama Pengguna</span>
  </label>
  <i>Masukkan nama lengkap Anda.</i>
</div>

<div class="text_field outlined">
  <label>
    <input type="email" placeholder=" " />
    <span>Alamat Email</span>
  </label>
  <i>Gunakan alamat email yang aktif.</i>
</div>

Validation Text Field

Class error digunakan untuk memperlihatkan kondisi input yang mengalami kesalahan validasi. Keterangan tambahan dapat ditampilkan melalui elemen i.

Nama Pengguna Nama pengguna belum memenuhi ketentuan.

Alamat Email Masukkan alamat email dengan format yang benar.

<div class="text_field filled error">
  <label>
    <input type="text" placeholder=" " />
    <span>Nama Pengguna</span>
  </label>
  <i>Nama pengguna belum memenuhi ketentuan.</i>
</div>

<div class="text_field outlined error">
  <label>
    <input type="email" placeholder=" " />
    <span>Alamat Email</span>
  </label>
  <i>Masukkan alamat email yang benar.</i>
</div>

Disabled Text Field

Class disabled digunakan untuk memperlihatkan kondisi input yang tidak dapat diubah oleh pengguna. Untuk menonaktifkan input secara fungsional, gunakan juga atribut HTML disabled.

Filled Disabled

Outlined Disabled

<div class="text_field filled disabled">
  <label>
    <input type="text"
           value="Data tidak dapat diubah"
           disabled />
    <span>Filled Disabled</span>
  </label>
</div>

<div class="text_field outlined disabled">
  <label>
    <input type="text"
           value="Data tidak dapat diubah"
           disabled />
    <span>Outlined Disabled</span>
  </label>
</div>

YouTube Embed

YouTube Embed merupakan komponen untuk menampilkan video YouTube di dalam halaman atau postingan Blogger. Template ini menyediakan variasi embed standar dan tampilan lazy embed untuk membantu mengatur pemuatan video.

Default Embed

Gunakan URL embed YouTube pada atribut src elemen iframe. Ganti ID video dengan ID video yang ingin ditampilkan.

<div class="youtube_embed">
  <iframe
    title="Contoh video YouTube"
    loading="lazy"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin"
    src="https://www.youtube.com/embed/VIDEO_ID">
  </iframe>
</div>

Ganti VIDEO_ID dengan ID video YouTube yang ingin ditampilkan. ID video merupakan bagian akhir dari URL video atau URL embed.

Lazy Embed

Variasi lazy menggunakan elemen dengan class lazy dan atribut data-embed. Template akan menangani pemuatan video sesuai implementasi JavaScript yang tersedia.

<div class="youtube_embed lazy"
     data-embed="VIDEO_ID">
  <div class="play_button">
    <svg viewBox="0 0 24 24"
         fill="currentColor"
         aria-hidden="true">
      <path d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z">
      </path>
    </svg>
  </div>
</div>

Cara mendapatkan ID video:
Dari URL https://www.youtube.com/watch?v=2Oi87E2Wk2g, ambil bagian setelah v=, yaitu 2Oi87E2Wk2g. Masukkan ID tersebut ke atribut data-embed.

Table of Contents (TOC) merupakan komponen navigasi yang menyusun daftar tautan berdasarkan heading di dalam artikel. Fitur ini membantu pengunjung menemukan bagian pembahasan tertentu tanpa harus menggulir halaman secara manual.

Pada template ini, daftar isi dibuat menggunakan struktur toc_wrap, toc_header, dan toc_content. Sistem TOC akan membaca heading yang tersedia pada konten artikel.

Petunjuk penggunaan:
Gunakan heading h2 untuk bagian utama dan h3 untuk subbagian. Daftar isi akan menyesuaikan struktur heading yang ditemukan oleh script template.

<div class="toc_wrap">
  <div class="toc_header">
    Table of Contents
    <span>
      <svg
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1"
        viewBox="0 0 24 24"
        aria-hidden="true">
        <path d="m18 15-6-6-6 6"></path>
      </svg>
    </span>
  </div>
  <div class="toc_content"></div>
</div>

Component Maintenance and Updates

Dokumentasi ini merupakan referensi teknis untuk komponen antarmuka yang tersedia pada template Blogger. Struktur HTML, nama class, dan contoh implementasi disusun agar pengembang dapat memahami cara menggunakan komponen pada halaman atau postingan.

Komponen dapat mengalami perubahan seiring pembaruan template. Karena itu, periksa dokumentasi ini secara berkala untuk mengetahui penyesuaian struktur, penambahan variasi, atau perbaikan implementasi.

Pembaruan dokumentasi
Komponen dan contoh implementasi pada halaman ini akan diperbarui apabila terdapat perubahan atau penambahan fitur pada template.

Bug Report dan Feature Request
Jika menemukan kesalahan pada komponen, silakan sampaikan melalui halaman Bug Report . Untuk mengusulkan fitur baru atau memberikan masukan, gunakan halaman Request and Feedback .