Sumber

Ihfandi Cahyo

Beranda

Kode Fitur Situs

Dokumentasi Kode Untuk Situs Ini
Indentasi Paragraf

Fitur untuk membuat baris pertama pada paragraf menjorok ke dalam (indentasi).
<!-- 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

Fitur untuk memperbesar satu huruf pertama di awal paragraf agar terlihat seperti tata letak majalah.
<!-- 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. 
<!-- 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. Tidak perlu menulis kode panjang, cukup gunakan shortcode berbasis tag <kbd>. Tombol akan otomatis menyesuaikan gaya tema dan memiliki ikon printer yang elegan. 
<!-- 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. Sistem secara pintar hanya akan mengekstrak teks tulisan utama di postingan, serta mengabaikan tombol cetak, kode skrip pemrograman, maupun link navigasi bawah artikel. 
<!-- Gunakan tag samp dengan perintah kata 'Dengarkan' -->
<samp>Dengarkan Artikel</samp>

Kutipan Teks

Menampilkan kutipan teks dengan desain khusus. Tersedia gaya standar dan gaya dengan ikon tanda kutip (Style 1).
<!-- Blockquote Standar -->
<blockquote>
"Satu-satunya cara untuk melakukan pekerjaan besar adalah dengan mencintai apa yang Anda lakukan." - Steve Jobs
</blockquote>



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

Membuat Kutipan Teks (Blockquote)

Fitur untuk menampilkan kutipan teks elegan dengan garis samping tebal dan ikon kutipan Iconsax. Dilengkapi dengan footer untuk nama tokoh.
<blockquote class="blockquote-nw">
  Tulis kalimat kutipan di sini.
  <footer>Nama Tokoh/Sumber</footer>
</blockquote>

Menonjolkan Informasi/ Peringatan

Digunakan untuk menonjolkan informasi penting atau peringatan (warning) di tengah artikel.
<!-- Catatan Standar (Warna Biru) -->
<div class="note">
Ini adalah catatan informasi penting untuk pembaca.
</div>



Ini adalah catatan peringatan atau hal yang harus dihindari.

Daftar Referensi/ Sumber

Untuk merapikan daftar sumber atau referensi di bagian akhir artikel dengan ukuran teks yang lebih proporsional.
<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

Mengubah daftar list (ul/li) biasa menjadi list tutorial bertingkat, daftar kelebihan (pros), atau daftar kekurangan (cons).
<!-- List Tutorial (Step by Step) -->
<ul class="step">
<li>Langkah pertama: Install tema.</li>
<li>Langkah kedua: Masuk ke tata letak.</li>
</ul>


    

  • Loading sangat cepat.
    • 




    

  • Hanya untuk pengguna mahir.
    •

Daftar Langkah

  1. Satu
  2. Dua
  3. Tiga
<!-- 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

Fitur untuk menyembunyikan konten panjang (spoiler) yang hanya akan muncul jika judulnya diklik.
<!-- Gaya Standar -->
<details class="ac">
<summary>Klik untuk melihat detail</summary>
<div class="aC">
Konten yang disembunyikan ada di sini.
</div>
</details>



Buka Spesifikasi Produk


Ram 8GB, Storage 256GB, Screen OLED.

Membuat Spoiler (Buka Tutup)

Fitur untuk menyembunyikan konten panjang atau rahasia dengan tombol buka-tutup yang menggunakan ikon panah Iconsax yang akan berputar otomatis.
<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.
<!-- 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)

Gunakan format kelas bawaan ini untuk bahasa pemrograman yang sudah didukung langsung oleh tema (seperti HTML, CSS, dan JS).
<div class="pre html" data-text="HTML">
  <pre><code class="language-html">
    &lt;!-- Kode Anda di sini --&gt;
  </code></pre>
</div>

Karena label bawaan tema hanya mendukung HTML, CSS, dan JS, Anda wajib menggunakan alternatif kelas custom dan atribut data-text untuk bahasa lainnya. Opsi ini memberikan fleksibilitas penuh untuk menuliskan teks label apa pun di sudut kotak kode.
<div class="pre custom" data-text="Kode Kustom Saya">
  <pre><code class="language-css">
    /* Kode Anda di sini */
  </code></pre>
</div>

Font Arab

Fitur font Noto Naskh Arabic agar tulisan Arab terlihat lebih jelas dan nyaman dibaca.
<!-- Gunakan class khusus jika tersedia atau bungkus dengan div untuk pengaturan rata kanan -->
<div style="text-align: right; font-family: 'Noto Naskh Arabic', serif; font-size: 24px;" dir="rtl">
بِسْÙ…ِ اللَّÙ‡ِ الرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيمِ
</div>

Font Hangyaboly & Luckyfield

Fitur font Hangyaboly agar tampilan tulisan terlihat lebih estetik, unik, dan memberikan kesan personal pada desain blog.
<!-- Gunakan class f-hangyaboly dan beberapa font lain untuk menerapkan font pada teks tertentu -->
<span class="f-hangyaboly">dan ini seharusnya hangyaboly</span>
<!-- Atau gunakan div jika ingin diterapkan pada satu paragraf penuh -->
<div class="f-hangyaboly">
  Ini adalah contoh teks paragraf menggunakan font Hangyaboly dan f-luckyfield
</div>

Font Pompiere

Fitur font Pompiere untuk menampilkan teks dengan gaya khusus tanpa tertimpa oleh font bawaan tema (Inter).
<!-- Gunakan class khusus untuk menerapkan font Pompiere pada paragraf -->
<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>

<!-- Gunakan pada elemen span untuk teks pendek di dalam kalimat -->
<span class="f-pompiere">Teks pendek dengan font Pompiere</span>

Teks dengan Font Poppins

Gunakan kode ini untuk menerapkan font Poppins. Sangat cocok digunakan untuk teks yang membutuhkan penekanan, seperti Judul, Sub-judul, atau elemen sorotan, karena memberikan kesan tegas dan modern. 
<!-- Terapkan pada elemen div, p, span, atau heading (h2, h3, dll) -->
<div style="font-family: var(--fontHead) !important; font-weight: bold;">
  Teks ini menggunakan font Poppins.
</div>

<!-- Contoh pada elemen heading -->
<h3 style="font-family: var(--fontHead) !important;">Judul Artikel Menarik</h3>

Teks dengan Font Fira Sans

Gunakan kode ini untuk menerapkan font Fira Sans. Font ini sangat nyaman dibaca untuk teks yang panjang, sehingga ideal untuk isi paragraf, kutipan panjang, atau deksripsi konten. 
<!-- Terapkan pada elemen div, p, span, atau elemen teks lainnya -->
<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>

<!-- Contoh penggunaan pada span di tengah kalimat -->
<span style="font-family: var(--fontBody-alt) !important;">Teks Fira Sans</span>

Putar Musik Dalam Postingan

Struktur pemutar audio standar yang menggunakan tag HTML5 untuk memutar file musik secara otomatis dari sumber URL tertentu. 
<!-- Pemutar audio otomatis dengan kontainer pembungkus -->
<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

Memberikan label atau lencana (badge) berwarna yang dapat disesuaikan untuk menyoroti status atau informasi penting pada teks.
<!-- Tambahkan class badge beserta warnanya (red, blue, green, orange) -->
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

Memberikan label atau lencana (badge) berwarna yang dapat disesuaikan untuk menyoroti status atau informasi penting pada teks.
<!-- Contoh penggunaan badge-nw dengan berbagai warna -->
<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 untuk menampilkan teks dengan highlight yang warnanya mengikuti warna utama (aksen) tema blog secara otomatis.
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

Fitur Download Box untuk menampilkan tautan unduhan file secara elegan, lengkap dengan ekstensi, nama file dan ukurannya.
<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

Fitur untuk menampilkan gambar tunggal lengkap dengan keterangan (caption) bergaya card modern. Bisa dipadukan dengan class="ratio-4-5", tersedia: 1-1, 4-5, 3-4 dan 16-9.
<figure>
  <img src="www" alt="Test" />
  <figcaption>Ini teks keterangan gambar</figcaption>
</figure>

Gallery Carousel (Multi-Frame)

Fitur galeri foto yang dapat digeser (swipe) lengkap dengan tombol navigasi. Setiap foto memiliki kotak keterangannya masing-masing.
<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>
    <figure>
      <img src="www" alt="Gambar 3" />
      <figcaption>Keterangan 3</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 foto ala Instagram dengan satu rasio bingkai tetap. Menggunakan satu keterangan utama untuk semua foto di dalamnya.
<figure class="gallery-single-frame">
  <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-counter">1 / 1</div>
    <div class="gallery-swipe">
      <a href="www"><img src="www" /></a>
      <a href="www"><img src="www" /></a>
      <img src="www" />
    </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>
  <figcaption>Ini caption untuk semua fotonya.</figcaption>
</figure>

Membuat Kotak Informasi (Box Alert)

Fitur untuk menampilkan kotak informasi, sukses, peringatan, atau bahaya lengkap dengan ikon Iconsax yang otomatis muncul di sisi kiri.
<!-- Varian warna: info, success, warning, danger -->
<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)

Fitur untuk menampilkan kotak informasi, sukses, peringatan, atau bahaya lengkap dengan ikon Iconsax yang otomatis muncul di sisi kiri dan bergaris.
<!-- Varian warna: info, success, warning, danger -->
<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 
Teks berhasil disalin!