Komponen UI dan Tipografi

v3.2 Dokumentasi untuk versi lebih lama, misa v2.6, mungkin tersedia di dokumentasi lama.

Daftar Isi

Sebagian besar fitur ini hanya dapat digunakan dalam mode Tampilan HTML, dan Anda juga tidak dapat beralih ke mode 'Tampilan Menulis' saat menggunakan beberapa fitur ini.

Dalam tampilan editor posting, klik ikon di kiri bawah judul.
Dua opsi tersedia: Tampilan HTML dan Tampilan menulis.
Pilih Tampilan HTML
Salin (Copy) dan tempel (Paste) kode komponen di mana pun Anda ingin menambahkannya dan lakukan perubahan yang sesuai.

Paragraf

Gunakan tag p untuk menambahkan paragraf ke dalam artikel.

<!--[ Paragraf ]-->
<p>Ini adalah sebuah paragraf</p>

Paragraf dengan Indentasi Teks

Fitur ini berfungsi untuk membuat baris pertama paragraf menjorok ke dalam dengan nilai yang telah ditentukan. Anda juga dapat menerapkannya ke beberapa paragraf lainnya.

<!--[ Paragraf Indentasi Teks ]-->
<p class='pIndent'>Ini adalah paragraf dengan indentasi teks.</p>

Paragraf dengan Drop Cap

Huruf kapital besar di awal paragraf (Drop Cap) akan mengubah ukuran huruf pertama paragraf sehingga turun satu atau lebih baris. Banyak jenis media cetak menggunakan huruf kapital besar di awal paragraf, seperti buku, majalah, surat kabar, dan sebagainya, karena dapat menambah daya tarik visual.

M adalah huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas menurun biasanya dua baris atau lebih.

<!--[ Paragraf Drop Cap ]-->
<p><span class='dropCap'>I</span>ni adalah paragraf dengan drop cap.</p>

Paragraf Referensi Postingan

Untuk menulis daftar referensi atau catatan kaki di bawah postingan.

Sumber:
www.example.com

<!--[ Paragraf Referensi Postingan ]-->
<p class='pRef'>Sumber:<br> www.example.com</p>

Gambar Postingan

Berikut ini adalah gambar standar tanpa wadah apa pun yang berarti tidak akan ada lightbox untuk gambar ini.

<!--[ Gambar Standar ]-->
<img class='full' alt='alt_di_sini' width='1280' height='720' src='tautan_gambar'/>

Tips!
Apakah Anda melihat classname full?Menambahkan classname ini ke tag img akan menghilangkan margin horizontal dan menyesuaikan lebar layar penuh pada perangkat seluler.

Informasi penting:

Disarankan menambahkan atribut alt, width dan height ke tag img.

Gambar dengan Keterangan

Keterangan gambar ini tidak akan dibaca dalam deskripsi/cuplikan artikel. Anda juga dapat memilih untuk tetap menampilkan keterangan gambar pada cuplikan artikel.

Keterangan gambarnya ada di sini! Anda mencarinya di mana?

<!--[ Gambar dengan Keterangan ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
<img alt='alt_gambar' src='tautan_gambar'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>keterangan_gambar</td>
    </tr>
  </tbody>
</table>

Peringatan!
Sebaiknya tidak menambahkan komponen ini secara manual ke dalam postingan atau halaman karena ini adalah cuplikan kode HTML yang digunakan oleh Blogger khusus untuk gambar dengan keterangan (caption). Oleh karena itu, disarankan menggunakan pendekatan di bawah ini saat ingin menambahkan komponen gambar dengan keterangan secara manual.

Anda mungkin bertanya-tanya, mengapa harus menggunakan tag table hanya untuk menambahkan keterangan pada gambar, padahal sudah tersedia tag HTML figure dan figcaption?

Mari saya jelaskan! Hal ini dikarenakan saat kita menambahkan keterangan pada gambar melalui editor postingan Blogger (dan bukan secara manual dengan mengedit HTML), Blogger secara otomatis menggunakan cuplikan kode tersebut. Oleh karena itu, sangat penting bagi kita untuk tetap mengikuti format tersebut agar tampilannya tetap konsisten.

Anda juga dapat menggunakan tag figure dan figcaption sebagai pengganti tag table seperti yang ditunjukkan di bawah ini.

<!--[ Gambar dengan Keterangan ]-->
<figure>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <figcaption>keterangan_gambar</figcaption>
</figure>

Gambar dengan Lightbox Otomatis

Lightbox membantu memperbesar gambar dan membuatnya sepenuhnya fokus saat diklik. Lightbox juga memuat isi atribut alt dari gambar saat muncul ketika gambar diklik.

Di mana lightbox-nya? Klik pada gambar ini!

Info penting:

Semua gambar dalam postingan akan secara otomatis memiliki fungsi lightbox jika gambar tersebut berada di dalam wadah induk yang memiliki salah satu nama kelas berikut lbx, separator, psImg, btImg, glImg atau memenuhi salah satu selektor .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
Jika gambar dengan lightbox dibungkus dalam tag anchor, mengklik gambar hanya akan membuka tautan saat lightbox ditampilkan.
Untuk menonaktifkan fungsi lightbox otomatis secara eksplisit untuk gambar tertentu, tambahkan atribut data-lightbox='false' ke tag img.
Untuk secara eksplisit menonaktifkan lightbox yang secara otomatis berisi konten atribut alt, tambahkan atribut data-caption='false' ke tag img.

Gambar dengan Tata Letak Kisi

Tata letak kisi (grid) dalam konteks gambar biasanya mengacu pada pengaturan beberapa gambar dalam format kisi terstruktur di halaman web atau dokumen. Tata letak ini populer untuk galeri, portofolio, atau koleksi gambar apa pun di mana Anda ingin menampilkan beberapa gambar dengan cara yang rapi dan terorganisir.

<!--[ Gambar dengan Tata Letak Kisi ]-->
<div class='psImg grImg'>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
</div>

Gambar dengan Fungsi Tampilkan Semua

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika pengguna mengklik tombol Tampilkan Semua. Fungsi Tampilkan Semua hanya dapat diaktifkan sekali, gambar tidak dapat disembunyikan lagi setelah Anda mengaktifkannya.

Tampilkan Semua

<!--[ Gambar dengan Fungsi Tampilkan Semua ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
<div class='btImg'>
    <!--[ Gambar yang bertindak sebagai tombol ]-->
    <img alt='alt_gambar' src='tautan_gambar'/>
    
    <!--[ Tombol untuk mengaktifkan ]-->
<label for='hideImg1' aria-label='Tampilkan semua gambar'>Tampilkan Semua</label>
  </div>

  <!--[ Sembunyikan sisa gambar di sini ]-->
<div class='psImg shImg'>
    <img alt='alt_gambar' src='tautan_gambar'/>
    <img alt='alt_gambar' src='tautan_gambar'/>
    <img alt='alt_gambar' src='tautan_gambar'/>
    <img alt='alt_gambar' src='tautan_gambar'/>
  </div>
</div>

Gambar dengan Tata Letak Gulir

Gambar dengan tata letak gulir (scroll layout) biasanya mengacu pada teknik desain di mana gambar ditampilkan dengan cara menggulir secara horizontal atau vertikal di dalam wadah. Pendekatan ini sering digunakan ketika Anda memiliki koleksi gambar yang mungkin melebihi ruang yang tersedia di layar, dan Anda ingin pengguna dapat menggulirnya.

<!--[ Gambar dengan Tata Letak Gulir (Gaya 1) ]-->
<div class='glImg'>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
</div>

Tips!
Anda dapat mengubah ketinggian gambar gulir dengan menambahkan salah satu nama kelas h150, h200, h250, ke elemen div.galWrp.

Gaya tata letak gulir ini hanya akan aktif dalam tampilan seluler. Silakan coba buka halaman ini di perangkat seluler Anda.

<!--[ Gambar dengan Tata Letak Gulir (Gaya 2) ]-->
 <div class='psImg scImg scrlH'>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
  <img alt='alt_gambar' src='tautan_gambar'/>
 </div>

Gambar Muat Lambat (Lazyload Image)

Berguna untuk menunda pemuatan gambar sehingga skor PageSpeed blog lebih tinggi, gambar hanya akan dimuat ketika pengguna menggulir ke area gambar. Fitur ini menggunakan @aFarkas/lazysizes untuk memuat lambat gambar.

<!--[ Gambar Muat Lambat ]-->
 <img class='lazyload' alt='judul_gambar' data-src='tautan_gambar' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Peringatan!
Jangan pernah memuat lambat (lazyload) gambar pertama dari postingan secara manual. Melakukan hal itu dapat menyebabkan perilaku yang tidak terduga.
Disarankan juga untuk tidak menggunakannya, sebagai gantinya Anda dapat mengaktifkan Muat lambat gambar (Lazy load images) di pengaturan Blog. Ini akan secara otomatis memuat lambat gambar postingan Anda.

Tautan Eksternal

Memberi tahu pengguna jika tautan akan mengarah ke situs lain.

Tautan Eksternal

<a class='extL' href='tautan_di_sini' rel='nofollow noreferrer noopener' target='_blank'>judul_tautan</a>

Gaya alternatif:

Tautan Eksternal

<a class='extL alt' href='tautan_di_sini' rel='nofollow noreferrer noopener' target='_blank'>judul_tautan</a>

Tautan Eksternal

<a class='extL sec' href='tautan_di_sini' rel='nofollow noreferrer noopener' target='_blank'>judul_tautan</a>

Tombol

Mendefinisikan tombol yang dapat diklik oleh pengguna.

Teks Tombol

<!--[ Tombol ]-->
 <a class='button' href='tautan_di_sini'>judul_tautan</a>

Teks Tombol

<!--[ Tombol bergaris luar ]-->
 <a class='button ln' href='tautan_di_sini'>judul_tautan</a>

Unduh

<!--[ Tombol dengan ikon unduh ]-->
<a class='button' href='tautan_di_sini'><i class='icon dl'></i>judul_tautan</a>

Demo

<!--[ Tombol dengan ikon demo ]-->
 <a class='button' href='tautan_di_sini'><i class='icon demo'></i>judul_tautan</a>

Tautan Unduh

Untuk memberikan informasi tentang file yang diunduh kepada pengguna.

nama_file.zip 200kb

<!--[ Kotak Unduhan ]-->
<div class='dlBox'>
  <!--[ Ubah atribut data-text='...' untuk menambahkan jenis file baru ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
 <!--[ Nama file ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200KiB</span>
  </div>

  <!--[ Tautan unduhan (ubah atribut href='...' untuk menambahkan tautan unduhan) ]-->
 <a class='button' aria-label='Unduh' href='tautan_di_sini' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
 </div>

Kutipan Blok (Blockquote)

Dua hal yang tak terbatas: alam semesta dan kebodohan manusia; dan saya tidak yakin tentang alam semesta.
Albert Einstein

<!--[ Kutipan Blok Standar ]-->
<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
 Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonim</span>
</blockquote>

Jadilah diri sendiri dan katakan apa yang Anda rasakan, karena mereka yang peduli tidak penting, dan mereka yang penting tidak peduli.
Bernard M. Baruch

<!--[ Kutipan Blok (Gaya 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonim</span>
</blockquote>

Saya telah belajar bahwa orang akan melupakan apa yang Anda katakan, orang akan melupakan apa yang Anda lakukan, tetapi orang tidak akan pernah melupakan bagaimana Anda membuat mereka merasa.
Maya Angelou

<!--[ Kutipan Blok (Gaya 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonim</span>
</blockquote>

Blok Catatan (Note Block)

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau kalimat sorotan, ada dua gaya seperti yang ditunjukkan di bawah ini.

Info!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Info catatan ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Peringatan!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Peringatan catatan ]-->
<p class='note wr'><b>Peringatan!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Peringatan (Alert)

Mirip dengan Blok Catatan, perbedaannya hanyalah Alert memiliki gaya yang berbeda dan memiliki lebih banyak varian:

Bawaan (Default) Alert bawaan sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Bawaan (Default)</b>
  Alert bawaan sederhana - Lorem ipsum dolor sit amet.
</div>

Garis Luar Alert garis luar sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert bergaris luar ]-->
<div class='alert outline'><b>Garis Luar</b>
  Alert garis luar sederhana - Lorem ipsum dolor sit amet.
</div>

Info! Alert info sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian info ]-->
<div class='alert info'><b>Info!</b>
  Alert info sederhana - Lorem ipsum dolor sit amet.
</div>

Peringatan! Alert peringatan sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian peringatan ]-->
<div class='alert warning'><b>Peringatan!</b>
  Alert peringatan sederhana - Lorem ipsum dolor sit amet.
</div>

Sukses! Alert sukses sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian sukses ]-->
<div class='alert success'><b>Sukses!</b>
  Alert sukses sederhana - Lorem ipsum dolor sit amet.
</div>

Error! Alert error sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian error ]-->
<div class='alert error'><b>Error!</b>
  Alert error sederhana - Lorem ipsum dolor sit amet.
</div>

Info! Alert info sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian info bergaris luar ]-->
<div class='alert info outline'><b>Info!</b>
 Alert info sederhana - Lorem ipsum dolor sit amet.
</div>

Peringatan! Alert peringatan sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian peringatan bergaris luar ]-->
<div class='alert warning outline'><b>Peringatan!</b>
 Alert peringatan sederhana - Lorem ipsum dolor sit amet.
</div>

Sukses! Alert sukses sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian sukses bergaris luar ]-->
<div class='alert success outline'><b>Sukses!</b>
 Alert sukses sederhana - Lorem ipsum dolor sit amet.
</div>

Error! Alert error sederhana - Lorem ipsum dolor sit amet.

<!--[ Alert varian error bergaris luar ]-->
<div class='alert error outline'><b>Error!</b>
Alert error sederhana - Lorem ipsum dolor sit amet.
</div>

Tabel

Menggunakan tabel sedikit lebih rumit dalam HTML, kami sarankan Anda mempelajari lebih lanjut tentang tabel HTML sebelum menggunakannya. erikut ini adalah contoh tabel dengan data:

Nama	Posisi	Kantor	Umur	Tanggal mulai	Gaji
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<!--[ Tabel ]-->
 <div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Nama</th>
        <th>Posisi</th>
        <th>Kantor</th>
        <th>Umur</th>
        <th>Tanggal mulai</th>
        <th>Gaji</th>
      </tr>
    </thead>
    <tbody>
      <tr>
 <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
 <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
 </div>

Untuk gaya tabel, Anda dapat menambahkan nama kelas ke elemen .table, termasuk:

cborder : batas untuk wadah tabel.
bordered / noborder (pilih salah satu): batas konten tabel.
clr / primary / warning / success / error : latar belakang tajuk tabel.
stripped : gaya baris tabel bergaris.
hovered : sorotan saat kursor melayang di baris tabel.
mh100 / mhvh / mh200 / mh300 : tinggi maksimum tabel dalam px (pengecualian: mh100 mengatur tinggi menjadi 100%).
sp5 / sp10 / sp20 : bantalan (padding) konten tabel

nama kelas stripped dan hovered ditambahkan pada v3.1.0

Langkah-langkah

Digunakan untuk menentukan langkah-langkah untuk panduan.

langkah_1
langkah_2
langkah_3

<!--[ Langkah-langkah ]-->
 <ol class='steps'>
  <li>langkah_1</li>
  <li>langkah_2</li>
  <li>langkah_3</li>
</ol>

Blok Kode

Digunakan untuk mendefinisikan baris kode komputer (HTML, CSS, Javascript, dll.) di dalam postingan.

<pre data-comment='.html' data-source='src/index.html'><code>kode_di-escape_di_sini</code></pre>

tag code dapat digunakan untuk mendefinisikan kode sebaris seperti ini: kode_di-escape_di_sini.

<code>kode_di-escape_di_sini</code>

tag kbd dapat digunakan untuk menentukan input keyboard seperti ini: ⌘ + A.

<kbd>⌘ + A</kbd>

Di dalam tag <code>, sebuah bagian dapat ditandai dengan membungkusnya menggunakan tag <mark>.

// contoh mark
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");
console.log("Halo Dunia!");

// kode mark
console.log("<mark>Halo Dunia!</mark>");
console.log("<mark class='block'>Halo Dunia!</mark>");
console.log("<mark class='gray'>Halo Dunia!</mark>");
console.log("<mark class='red'>Halo Dunia!</mark>");
console.log("<mark class='orange'>Halo Dunia!</mark>");
console.log("<mark class='blue'>Halo Dunia!</mark>");
console.log("<mark class='green block'>Halo Dunia!</mark>");
console.log("<mark class='gold'>Halo Dunia!</mark>");
console.log("<mark class='purple'>Halo Dunia!</mark>");
console.log("<mark data-before='Pesan sebelum'>Halo Dunia!</mark>");
console.log("<mark class='block red' data-after='Pesan sesudah'>Halo Dunia!</mark>");
console.log("<mark class='green' data-before='$'>Halo Dunia!</mark>");
console.log("<mark data-after='$'>Halo Dunia!</mark>");

Info penting:

Anda perlu menggunakan kode yang di-escape di dalam elemen <code>, yang berarti Anda harus mengganti semua & menjadi &, < menjadi < dan > menjadi >.
Semua blok kode disorot secara otomatis menggunakan @highlightjs/highlight.js, salah satu pustaka populer untuk penyorotan kode dan plugin kustom. Tombol salin dan nomor baris juga ditambahkan secara otomatis.
Pustaka dimuat jika dan hanya jika ada setidaknya satu blok kode di pos untuk memastikan kami tidak membuat permintaan ekstra.
Kode sebaris juga disorot.
Pustaka secara otomatis mendeteksi bahasa terbaik yang cocok untuk kode Anda dan menyorotnya, tetapi terkadang mungkin tidak mendeteksi bahasa yang benar.
Jika pustaka mendeteksi bahasa secara tidak benar atau Anda ingin menentukan bahasa kode secara eksplisit, Anda dapat menambahkan nama kelas dengan cara tersebut, nama bahasa yang diawali dengan language-, ke elemen <code>. ebagai contoh, jika kode Anda ditulis dalam javascript, Anda dapat menambahkan nama kelas language-js atau language-javascript ke elemen <code>.

Blok Kode Multi-tab

Digunakan untuk mengelompokkan beberapa blok kode bersama-sama.

[HTML] kode_di-escape_di_sini

[CSS] kode_di-escape_di_sini

[JS] kode_di-escape_di_sini

[JSON] kode_di-escape_di_sini

<!--[ Penyorot Blok Kode Multi-tab ]-->
<div class='pre tabs'>
 <!--[ Fungsi aktif ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
 <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Tajuk/judul ]-->
  <div>
    <!--[ Ubah atribut data-text='...' untuk mengganti judul ]-->
    <label for='preT1-1' data-text='HTML'></label>
 <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Konten ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] kode_di-escape_di_sini</code></pre>
 <pre class='preC1-2' data-source='src/style.css'><code>[CSS] kode_di-escape_di_sini</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] kode_di-escape_di_sini</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] kode_di-escape_di_sini</code></pre>
 </div>

Spoiler

Digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna sesuai permintaan. Secara default widget ini ditutup, akan menampilkan konten di dalamnya saat pengguna menekan tombol perintah. Konten apa pun dapat dimasukkan dalam widget ini.

Spoiler:

teks_di_sini

<!--[ Spoiler ]-->
 <details class='sp'>
  <summary data-show='Tampilkan semua' data-hide='Sembunyikan semua'>Spoiler:</summary>
  <div>
    <p>teks_di_sini</p>
  </div>
 </details>

Akordeon (Accordion)

Mendefinisikan konten tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan dalam grup, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Judul_di_sini

teks_di_sini

<!--[ Akordeon ]-->
<details class='ac'>
  <summary>Judul_di_sini</summary>
  <div>
 <p>teks_di_sini</p>
  </div>
</details>

Judul_di_sini

teks_di_sini

<!--[ Akordeon (Alternatif) ]-->
 <details class='ac alt'>
  <summary>Judul_di_sini</summary>
  <div>
    <p>teks_di_sini</p>
  </div>
</details>

Judul_di_sini

teks_di_sini

Judul_di_sini

teks_di_sini

Judul_di_sini

teks_di_sini

Judul_di_sini

teks_di_sini

<!--[ Akordeon (Dikelompokkan) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Judul_di_sini</summary>
    <div>
      <p>teks_di_sini</p>
    </div>
  </details>
  <details class='ac'>
 <summary>Judul_di_sini</summary>
    <div>
      <p>teks_di_sini</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Judul_di_sini</summary>
    <div>
      <p>teks_di_sini</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Judul_di_sini</summary>
    <div>
      <p>teks_di_sini</p>
    </div>
 </details>
</div>

FAQ dalam mikrodata

Halaman Frequently Asked Question (FAQ) berisi daftar pertanyaan dan jawaban yang berkaitan dengan topik tertentu. Halaman FAQ yang ditandai dengan benar mungkin memenuhi syarat untuk memiliki hasil kaya di Penelusuran dan Tindakan di Asisten Google, yang dapat membantu situs Anda menjangkau pengguna yang tepat.

<!--[ Akordeon (Halaman FAQ) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_di_sini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
 <p itemprop='text'>teks_di_sini</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_di_sini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_di_sini</p>
    </div>
  </details>
 <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_di_sini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_di_sini</p>
    </div>
  </details>
 <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_di_sini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_di_sini</p>
    </div>
  </details>
 </div>

Peringatan!
Anda tidak dapat menggunakan komponen ini di lebih dari satu tempat dalam satu postingan atau halaman, pertimbangkan untuk mengelompokkan semua FAQ dalam satu komponen.

Daftar Isi

TOC (singkatan dari Table of Contents / Daftar Isi) membantu pengguna menavigasi konten halaman web dengan cepat dengan menyediakan tautan langsung ke berbagai bagian. Hal ini sangat berguna untuk artikel atau halaman yang lebih panjang dengan beberapa bagian yang berbeda.

Ada dua cara untuk mendefinisikan Daftar Isi.

Daftar Isi Manual

Menggunakan Daftar Isi Manual sangat rumit, Anda harus menambahkan atribut id yang berbeda di setiap tag tajuk dan menulisnya dalam daftar konten.

Daftar Isi Otomatis

Tidak mudah untuk menggunakan Daftar Isi Manual, oleh karena itu kami menyediakan Daftar Isi Otomatis yang mencari semua tajuk dalam postingan dan mengisi daftar isi secara teratur.

Daftar Isi

<!--[ Daftar Isi Otomatis ]-->
 <details class='sp toc' open>
  <summary data-show='Tampilkan semua' data-hide='Sembunyikan semua'>Daftar Isi</summary>
  <div class='aToc'></div>
 </details>

Postingan Terkait

Postingan terkait adalah tautan atau saran konten pada halaman web yang terhubung ke topik atau artikel serupa, membantu pengguna menemukan informasi yang lebih relevan.

Ada dua cara untuk menentukan komponen ini.

Postingan Terkait Manual

Postingan terkait manual dipilih dan ditambahkan oleh penulis berdasarkan relevansi, memberikan kontrol penuh atas saran tersebut.

Anda mungkin ingin membaca postingan ini :

<div class='pRelate'>
 <!--[ Judul terkait ]-->
  <b>Anda mungkin ingin membaca postingan ini :</b>
  <ul>
    <li><a href='tautan_postingan'>judul_postingan</a></li>
    <li><a href='tautan_postingan'>judul_postingan</a></li>
    <li><a href='tautan_postingan'>judul_postingan</a></li>
  </ul>
 </div>

Postingan Terkait Otomatis

Postingan terkait otomatis dihasilkan oleh algoritma menggunakan kategori, menghemat waktu tetapi dengan presisi yang lebih rendah.

Postingan Terkait

<!--[ Postingan Terkait Otomatis ]-->
 <details class='sp arp' open>
  <summary data-show='Tampilkan semua' data-hide='Sembunyikan semua'>Postingan Terkait</summary>  
  <div class='aRel'></div>
 </details>

Info penting:

Fitur ini menampilkan daftar postingan yang memiliki label tertentu.
Untuk menentukan label, tambahkan atribut data-label='Label Saya' ke elemen .aRel.
Jika atribut data-label tidak ditentukan atau tidak ada postingan dengan label yang ditentukan di data-label, maka itu akan mundur ke label acak dari postingan saat ini jika digunakan dalam postingan, jika tidak akan mundur ke label acak dari blog jika digunakan di halaman.
Ini akan menyaring pos yang sedang dilihat.
Untuk menetapkan jumlah maksimum postingan, tambahkan atribut data-max-posts='6', di mana 6 adalah jumlah postingan maksimum.

YouTube Muat Lambat (Lazy YouTube)

Memuat iframe setelah tombol putar diklik jika tidak menampilkan gambar thumbnail sebagai pengganti (placeholder) yang dimuat lambat menggunakan @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='id_video'></div>

Info penting:

Anda dapat mengatur rasio iframe seperti yang ditunjukkan di bawah ini:

<!--[ Lazy YouTube ]-->
 <div class='lazyYt' style='--ratio: 4 / 3' data-embed='id_video'></div>

YouTube Ditangguhkan (Defer YouTube)

Menunda pemuatan iframe menggunakan @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
 <div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/id_video' title='Pemutar video YouTube' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;
 web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Info penting:

Anda dapat mengatur rasio iframe seperti yang ditunjukkan di bawah ini:

<!--[ Defer YouTube ]-->
 <div class='videoYt' style='--ratio: 4 / 3'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/id_video' title='Pemutar video YouTube' frameborder='0' allow='accelerometer; autoplay;
 clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Penting (Essentials)

Bagian ini tidak memberi Anda komponen apa pun, tetapi berisi cuplikan kode HTML umum yang dapat digunakan untuk berbagai tujuan.

Cuplikan Postingan Eksplisit

Cuplikan postingan menampilkan beberapa baris konten teks postingan. Ini secara otomatis memilih teks dari awal postingan. Jika Anda ingin mengatur cuplikan postingan khusus, Anda dapat menambahkan cuplikan kode berikut di awal postingan:

<!--[ Secara eksplisit mengatur cuplikan postingan ]-->
<div hidden aria-hidden='true'>cuplikan_postingan</div>

<!--more-->

Thumbnail Postingan Eksplisit

Blogger secara otomatis memilih gambar pertama postingan sebagai thumbnail-nya. Jika Anda ingin mengatur thumbnail postingan khusus yang seharusnya tidak muncul di pos, Anda dapat menambahkan cuplikan kode berikut di awal postingan:

<!--[ Secara eksplisit mengatur thumbnail postingan ]-->
 <!--[
  <div class='separator'><img src='sumber_gambar'/></div>
]-->

<!--more-->

Anda dapat mengatur cuplikan postingan khusus dan thumbnail postingan dengan menggabungkan dua cuplikan kode di atas seperti yang ditunjukkan di bawah ini:

<!--[ Secara eksplisit mengatur cuplikan postingan ]-->
 <div hidden aria-hidden='true'>cuplikan_postingan</div>

<!--[ Secara eksplisit mengatur thumbnail postingan ]-->
<!--[
  <div class='separator'><img src='sumber_gambar'/></div>
]-->
 <!--more-->

Subjudul Header

Menambahkan subjudul di sebelah judul tajuk di pos atau halaman tertentu.

<style>
  /* Subjudul Header kustom */
  .headH::after{content:'Subjudul'}
</style>

Lalu Abd. Rahman

Komponen UI dan Tipografi

Paragraf

Paragraf dengan Indentasi Teks

Paragraf dengan Drop Cap

Paragraf Referensi Postingan

Gambar Postingan

Gambar dengan Keterangan

Gambar dengan Lightbox Otomatis

Gambar dengan Tata Letak Kisi

Gambar dengan Fungsi Tampilkan Semua

Gambar dengan Tata Letak Gulir

Gambar Muat Lambat (Lazyload Image)

Tautan Eksternal

Tombol

Tautan Unduh

Kutipan Blok (Blockquote)

Blok Catatan (Note Block)

Peringatan (Alert)

Tabel

Langkah-langkah

Blok Kode

Blok Kode Multi-tab

Spoiler

Akordeon (Accordion)

FAQ dalam mikrodata

Daftar Isi

Daftar Isi Manual

Daftar Isi Otomatis

Postingan Terkait

Postingan Terkait Manual

Postingan Terkait Otomatis

YouTube Muat Lambat (Lazy YouTube)

YouTube Ditangguhkan (Defer YouTube)

Penting (Essentials)

Cuplikan Postingan Eksplisit

Thumbnail Postingan Eksplisit

Subjudul Header

Posting Komentar