The Eighteen Hundred

Dokumentasi Kode Untuk Situs Ini

Indentasi Paragraf

Fitur untuk membuat baris pertama pada paragraf menjorok ke dalam (indentasi).

Contoh Tampilan (Live Preview):

Ini adalah contoh paragraf yang baris pertamanya menjorok ke dalam. Tampilan ini akan membuat artikel panjang terlihat lebih rapi dan profesional.

Kode HTML:

<!-- Tambahkan class pIndent pada tag p -->
<p class="pIndent">
Ini adalah contoh paragraf yang baris pertamanya menjorok ke dalam.
Tampilan ini akan membuat artikel panjang terlihat lebih rapi dan profesional.
</p>

Memperbesar Huruf Pertama (Drop Cap)

Fitur untuk memperbesar satu huruf pertama di awal paragraf agar terlihat seperti tata letak majalah.

Contoh Tampilan (Live Preview):

Desain artikel kamu akan terlihat lebih menarik dengan huruf pertama yang menonjol seperti ini.

Kode HTML:

<!-- Bungkus huruf pertama dengan span class dropCap -->
<p><span class="dropCap">D</span>esain artikel kamu akan terlihat lebih menarik dengan huruf pertama yang menonjol seperti ini.</p>

Pembatas Estetik

Fitur untuk menambahkan garis pembatas horizontal yang memberikan kesan visual yang lebih rapi dan estetis di antara bagian-bagian konten.

Contoh Tampilan (Live Preview):

Kode HTML:

<!-- Gunakan tag hr dengan class pembatas-estetik -->
<hr class="pembatas-estetik" />

Fitur Tombol Cetak (Print)

Fitur untuk memunculkan tombol cetak halaman secara instan di dalam artikel menggunakan shortcode berbasis tag <kbd>.

Contoh Tampilan (Live Preview):

Cetak Data Penelitian atau Cetak Abstrak

Kode HTML:

<!-- Gunakan tag kbd dengan menyertakan kata 'Cetak' -->
<kbd>Cetak Data Penelitian</kbd>

<!-- Contoh lain -->
<kbd>Cetak Abstrak</kbd>

Fitur Dengarkan Artikel (Audio)

Fitur Text-to-Speech mandiri untuk mendengarkan isi tulisan artikel dalam Bahasa Indonesia berbasis tag <samp>.

Contoh Tampilan (Live Preview):

Dengarkan Artikel

Kode HTML:

<!-- Gunakan tag samp dengan perintah kata 'Dengarkan' -->
<samp>Dengarkan Artikel</samp>

Kutipan Teks (Standard & Style 1)

Menampilkan kutipan teks dengan desain khusus standar dan bergaya latar belakang tanda kutip (Style 1).

Contoh Tampilan (Live Preview):

"Satu-satunya cara untuk melakukan pekerjaan besar adalah dengan mencintai apa yang Anda lakukan." - Steve Jobs

Ini adalah tampilan kutipan dengan tambahan dekorasi ikon tanda kutip di latar belakangnya.

Kode HTML:

<!-- Blockquote Standar -->
<blockquote>
"Satu-satunya cara untuk melakukan pekerjaan besar adalah dengan mencintai apa yang Anda lakukan." - Steve Jobs
</blockquote>

<!-- Blockquote Style 1 (Dengan Ikon) -->
<blockquote class="s-1">
Ini adalah tampilan kutipan dengan tambahan dekorasi ikon tanda kutip di latar belakangnya.
</blockquote>

Membuat Kutipan Teks Modern (Blockquote-nw)

Fitur untuk menampilkan kutipan teks elegan dengan garis samping tebal dan footer nama tokoh.

Contoh Tampilan (Live Preview):

Tulis kalimat kutipan di sini.
Nama Tokoh/Sumber

Kode HTML:

<blockquote class="blockquote-nw">
  Tulis kalimat kutipan di sini.
  <footer>Nama Tokoh/Sumber</footer>
</blockquote>

Menonjolkan Informasi / Peringatan

Digunakan untuk menonjolkan catatan informasi (Biru) atau catatan peringatan (Merah) di tengah artikel.

Contoh Tampilan (Live Preview):

Ini adalah catatan informasi penting untuk pembaca.

Ini adalah catatan peringatan atau hal yang harus dihindari.

Kode HTML:

<!-- Catatan Standar (Warna Biru) -->
<div class="note">
Ini adalah catatan informasi penting untuk pembaca.
</div>

<!-- Catatan Peringatan (Warna Merah) -->
<div class="note wr">
Ini adalah catatan peringatan atau hal yang harus dihindari.
</div>

Daftar Referensi / Sumber

Untuk merapikan daftar sumber atau referensi di bagian akhir artikel dengan ukuran teks proporsional.

Contoh Tampilan (Live Preview):

Referensi:

Dokumentasi Resmi MDN Web Docs
Panduan Desain Material Google

Kode HTML:

<div class="pRef">
<b>Referensi:</b>
<ol>
<li>Dokumentasi Resmi MDN Web Docs</li>
<li>Panduan Desain Material Google</li>
</ol>
</div>

Daftar ul/li (Tutorial, Kelebihan, Kekurangan)

Mengubah daftar list (ul/li) biasa menjadi list tutorial bertingkat (step), kelebihan (pros), atau kekurangan (cons).

Contoh Tampilan (Live Preview):

Langkah pertama: Install tema.

Loading sangat cepat.

Hanya untuk pengguna mahir.

Kode HTML:

<!-- List Tutorial (Step by Step) -->
<ul class="step">
<li>Langkah pertama: Install tema.</li>
</ul>

<!-- List Kelebihan -->
<ul class="pros">
<li>Loading sangat cepat.</li>
</ul>

<!-- List Kekurangan -->
<ul class="cons">
<li>Hanya untuk pengguna mahir.</li>
</ul>

Daftar Langkah (ol.step)

Fitur penomoran langkah terstruktur menggunakan tag <ol class="step">.

Contoh Tampilan (Live Preview):

Satu
Dua
Tiga

Kode HTML:

<!-- Kode HTML untuk daftar -->
<ol class="step">
  <li style="text-align: justify;">Satu</li>
  <li style="text-align: justify;">Dua</li>
  <li style="text-align: justify;">Tiga</li>
</ol>

Fitur Spoiler (Standard & Alternatif)

Fitur untuk menyembunyikan konten panjang (spoiler) bergaya standard (`ac`) dan plus/minus (`ac alt`).

Contoh Tampilan (Live Preview):

Klik untuk melihat detail

Konten yang disembunyikan ada di sini.

Buka Spesifikasi Produk

Ram 8GB, Storage 256GB, Screen OLED.

Kode HTML:

<!-- Gaya Standar -->
<details class="ac">
<summary>Klik untuk melihat detail</summary>
<div class="aC">
Konten yang disembunyikan ada di sini.
</div>
</details>

<!-- Gaya Alternatif (Plus/Minus) -->
<details class="ac alt">
<summary>Buka Spesifikasi Produk</summary>
<div class="aC">
Ram 8GB, Storage 256GB, Screen OLED.
</div>
</details>

Membuat Spoiler Baru (Buka Tutup)

Fitur menyembunyikan konten rahasia dengan tombol buka-tutup berikon panah yang berputar otomatis (`spoiler-nw`).

Contoh Tampilan (Live Preview):

Klik untuk melihat konten

Tulis isi konten atau rahasiamu di sini.

Kode HTML:

<details class="spoiler-nw">
  <summary>Klik untuk melihat konten</summary>
  <div class="spoiler-isi">
    Tulis isi konten atau rahasiamu di sini.
  </div>
</details>

Ikon Panah Keluar Situs

Memberikan indikasi visual berupa ikon panah kecil secara otomatis untuk setiap link yang mengarah ke luar situs.

Contoh Tampilan (Live Preview):

Kunjungi Google

Kode HTML:

<!-- Tambahkan class extL pada tag a -->
<a href="https://www.google.com" class="extL" target="_blank" rel="noopener">Kunjungi Google</a>

Penggunaan Kotak Kode (Pre Code Standard & Custom)

Gunakan kode bawaan untuk HTML/CSS/JS, atau gunakan class custom + atribut data-text="..." untuk melabeli bahasa kustom lainnya.

Contoh Tampilan (Live Preview):

<!-- Contoh teks HTML -->

/* Contoh teks CSS/Custom */

Kode HTML:

<!-- Kotak Kode Standar -->
<div class="pre html" data-text="HTML">
  <pre><code class="language-html">
    &lt;!-- Kode Anda di sini --&gt;
  </code></pre>
</div>

<!-- Kotak Kode Bahasa Kustom -->
<div class="pre custom" data-text="Kode Kustom Saya">
  <pre><code class="language-css">
    /* Kode Anda di sini */
  </code></pre>
</div>

Font Arab (Noto Naskh Arabic)

Fitur font Noto Naskh Arabic agar tulisan Arab terlihat lebih jelas, besar, dan nyaman dibaca.

Contoh Tampilan (Live Preview):

بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

Kode HTML:

<div style="text-align: right; font-family: 'Noto Naskh Arabic', serif; font-size: 24px;" dir="rtl">
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ
</div>

Font Hangyaboly & Luckyfield

Fitur font Hangyaboly untuk memberikan kesan estetis, unik, dan tulisan tangan personal pada blog.

Contoh Tampilan (Live Preview):

dan ini seharusnya hangyaboly

Ini adalah contoh teks paragraf menggunakan font Hangyaboly.

Kode HTML:

<!-- Menggunakan span -->
<span class="f-hangyaboly">dan ini seharusnya hangyaboly</span>

<!-- Menggunakan div -->
<div class="f-hangyaboly">
  Ini adalah contoh teks paragraf menggunakan font Hangyaboly dan f-luckyfield
</div>

Font Pompiere

Fitur font Pompiere untuk memunculkan teks dengan gaya ramping tanpa ter-reset font default tema (Inter).

Contoh Tampilan (Live Preview):

Ini adalah teks percobaan menggunakan font Pompiere (Paragraf).

Teks pendek dengan font Pompiere

Kode HTML:

<!-- Menggunakan div -->
<div class="f-pompiere">
  Ini adalah teks percobaan menggunakan class khusus, teks ini akan menggunakan font Pompiere dan tidak akan kalah oleh font Inter! (Paragraf).
</div>

<!-- Menggunakan span -->
<span class="f-pompiere">Teks pendek dengan font Pompiere</span>

Teks dengan Font Poppins

Menerapkan font Poppins (variabel header tema) yang memberikan kesan tegas, modern, dan rapi pada teks sorotan.

Contoh Tampilan (Live Preview):

Teks ini menggunakan font Poppins.

Kode HTML:

<div style="font-family: var(--fontHead) !important; font-weight: bold;">
  Teks ini menggunakan font Poppins.
</div>

Teks dengan Font Fira Sans

Menerapkan font Fira Sans (variabel alt body) yang sangat empuk dan nyaman dibaca untuk durasi penulisan artikel yang panjang.

Contoh Tampilan (Live Preview):

Ini adalah contoh paragraf yang menggunakan font Fira Sans. Font ini memberikan kenyamanan ekstra bagi pembaca.

Kode HTML:

<p style="font-family: var(--fontBody-alt) !important; line-height: 1.6;">
  Ini adalah contoh paragraf yang menggunakan font Fira Sans. Font ini memberikan kenyamanan ekstra bagi pembaca saat membaca teks panjang di dalam blog.
</p>

Putar Musik Dalam Postingan

Struktur pemutar audio tersembunyi HTML5 untuk memutar file musik secara otomatis (`autoplay`) dari sumber tautan URL langsung.

Contoh Tampilan (Live Preview):

[Audio Player Aktif - Musik akan berputar otomatis jika URL valid]

Kode HTML:

<div class="audioPlayer">
  <div class="audioContainer">
    <div class="audioList">
      <audio autoplay="autoplay" src="https://www.ihfandicahyo.com/musik.mp3"></audio>
    </div>
  </div>
</div>

Memberikan Label / Lencana Klasik

Memberikan badge mini berwarna cerah bawaan tema (red, blue, green) untuk menyorot status info teks.

Contoh Tampilan (Live Preview):

Status: Penting Status: Update Status: Selesai

Kode HTML:

Status: <span class="badge red">Penting</span>
Status: <span class="badge blue">Update</span>
Status: <span class="badge green">Selesai</span>

Memberikan Label / Lencana Modern (Badge-nw)

Memberikan label penanda model UI flat modern yang lebih teduh dipandang mata dengan kelas baru `badge-nw`.

Contoh Tampilan (Live Preview):

Info Sukses Peringatan Bahaya

Kode HTML:

<span class="badge-nw blue">Info</span>
<span class="badge-nw green">Sukses</span>
<span class="badge-nw yellow">Peringatan</span>
<span class="badge-nw red">Bahaya</span>

Membuat Highlight Warna Aksen

Fitur penanda stabilo teks (`mark`) yang warnanya otomatis selaras dengan warna primer tema blog Anda.

Contoh Tampilan (Live Preview):

Ini contoh teks di-highlight aksen. Ini contoh highlight kuning. Ini contoh highlight merah.

Kode HTML:

Ini adalah contoh <mark>teks yang di-highlight</mark> menggunakan warna aksen.
Ini adalah contoh <mark class="yellow">teks highlight kuning</mark> untuk peringatan.
Ini adalah contoh <mark class="red">teks highlight merah</mark> untuk bahaya.

Download Box & SVG

Membuat kotak unduhan file eksklusif yang rapi, lengkap beserta jenis file tag label, info ukuran, dan ikon SVG tombol download.

Contoh Tampilan (Live Preview):

file_name.zip 200kb

Kode HTML:

<div class='dlBox'>
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  <a class='button' aria-label='Download' href='WWW'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Figure & Figcaption (Gambar Tunggal)

Fitur pembungkus gambar terstandarisasi untuk memunculkan teks keterangan di bawah media dengan gaya modern card layout.

Contoh Tampilan (Live Preview):

[ Simulasi Media Gambar ]

Ini teks keterangan gambar

Kode HTML:

<figure>
  <img src="URL_GAMBAR" alt="Test" />
  <figcaption>Ini teks keterangan gambar</figcaption>
</figure>

Gallery Carousel (Multi-Frame)

Susunan layout album foto horizontal geser yang interaktif di mana masing-masing item gambarnya menyimpan box takarir sendiri-sendiri.

Contoh Tampilan (Live Preview):

Ket 1

Ket 2

Kode HTML:

<div class="gallery-wrapper"> 
  <button class="gallery-btn prev" aria-label="Previous">
    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg>
  </button>
  <div class="gallery-swipe">
    <figure>
      <img src="www" alt="Gambar 1" />
      <figcaption>Keterangan 1</figcaption>
    </figure>
    <figure>
      <img src="www" alt="Gambar 2" />
      <figcaption>Keterangan 2</figcaption>
    </figure>
  </div>
  <button class="gallery-btn next" aria-label="Next">
    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>
  </button>
</div>

Gallery Carousel (Single-Frame)

Fitur galeri geser rasio statis ala grid Instagram yang menggunakan satu takarir utama untuk seluruh jajaran foto di dalamnya.

Contoh Tampilan (Live Preview):

1 / 2

Ini caption untuk semua fotonya.

Kode HTML:

<figure class="gallery-single-frame">
  <div class="gallery-wrapper">
    <button class="gallery-btn prev" aria-label="Previous"><svg viewBox="0 0 24 24">...</svg></button>
    <div class="gallery-counter">1 / 2</div>
    <div class="gallery-swipe">
      <img src="www" />
      <img src="www" />
    </div>
    <button class="gallery-btn next" aria-label="Next"><svg viewBox="0 0 24 24">...</svg></button>
  </div>
  <figcaption>Ini caption untuk semua fotonya.</figcaption>
</figure>

Membuat Kotak Informasi (Box Alert)

Fitur kotak maklumat UI modern warna blok solid (`info`, `success`, `warning`, `danger`, `sparkle`) lengkap berikon otomatis.

Contoh Tampilan (Live Preview):

Ini adalah kotak informasi biru.

Ini adalah kotak sukses hijau.

Kode HTML:

<!-- Varian warna: info, success, warning, danger, sparkle -->
<div class="box-nw info">Ini adalah kotak informasi biru.</div>
<div class="box-nw success">Ini adalah kotak sukses hijau.</div>
<div class="box-nw warning">Ini adalah kotak peringatan kuning.</div>
<div class="box-nw danger">Ini adalah kotak bahaya merah.</div>
<div class="box-nw sparkle">Ini adalah kotak ide ungu.</div>

Membuat Kotak Informasi (Box Alert Garis)

Varian kotak maklumat beraksen garis tepi tipis (`box-nw-gar`) yang tampak jauh lebih bersih, ringkas, dan elegan.

Contoh Tampilan (Live Preview):

Ini adalah kotak peringatan kuning bergaris.

Ini adalah kotak bahaya merah bergaris.

Kode HTML:

<!-- Varian warna: info, success, warning, danger, sparkle -->
<div class="box-nw-gar info">Ini adalah kotak informasi biru bergaris.</div>
<div class="box-nw-gar success">Ini adalah kotak sukses hijau bergaris.</div>
<div class="box-nw-gar warning">Ini adalah kotak peringatan kuning bergaris.</div>
<div class="box-nw-gar danger">Ini adalah kotak bahaya merah bergaris.</div>
<div class="box-nw-gar sparkle">Ini adalah kotak ide ungu bergaris.</div>

Dokumentasi resmi Jago Desain