Komponen dan Format Penulisan

Pengguna Plus UI v2.6? Jika Anda masih menggunakan Template Plus UI v2.6.1, v2.6.2, v2.6.3, v2.6.4, dan v2.6.5, silahkan lihat dokumentasi v2.6 di dokumentasi lama.

Daftar Isi Artikel

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

Dalam tampilan editor posting, klik ikon di sebelah kiri bawah kolom judul.
Dua pilihan akan muncul: Tampilan HTML dan Tampilan Menulis.
Pilih Tampilan HTML.
Salin dan tempel kode komponen di mana pun Anda ingin menambahkannya dan buat perubahan yang sesuai.

Format Paragraf

Gunakan tag p untuk menambahkan paragraf pada artikel.

<!--[ Paragraph ]-->
<p>Ini adalah contoh paragraf</p>

Paragraf dengan Text Indent

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

<!--[ Paragraf Text Indent ]-->
<p class='pIndent'>Ini adalah paragraf dengan teks yang menjorok.</p>

Paragraf dengan Drop Cap

Drop cap akan mengubah ukuran huruf pertama paragraf sehingga turun satu baris atau lebih. Banyak jenis media cetak menggunakan drop cap seperti buku, majalah, surat kabar, dan sebagainya karena dapat menambah daya tarik visual.

Madalah huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Batas menurun biasanya dua baris atau lebih.

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

Paragraf Referensi

Untuk menulis daftar referensi atau catatan kaki di bawah postingan.

Sumber:
www.contoh.com

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

Gambar Posting

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

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

Tips!
Pernahkah Anda memperhatikan classname full? Menambahkan classname ini ke tag img akan menghapus margin horizontal dan menyesuaikan lebar layar penuh di Perangkat Seluler.

Perlu diketahui:

Kami menyarankan untuk menambahkan atribut alt, width, dan height ke tag img.

Gambar dengan Keterangan

Keterangan pada gambar ini tidak akan terbaca dalam deskripsi/cuplikan artikel. Anda juga dapat memilih agar keterangan pada cuplikan artikel tetap terbaca.

Keterangan gambarnya ada di sini! Di mana Anda mencarinya?

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

Peringatan!
Anda sebaiknya tidak menambahkan komponen ini secara manual ke postingan atau halaman karena merupakan cuplikan kode HTML yang digunakan oleh Blogger untuk gambar dengan keterangan. Oleh karena itu, kami menyarankan Anda untuk menggunakan pendekatan di bawah ini saat menambahkan gambar dengan komponen keterangan secara manual.

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

Baik, saya jelaskan! Hal ini karena ketika kita menambahkan keterangan pada gambar melalui editor postingan Blogger, dan bukan secara manual dengan mengedit HTML, cuplikan kode di atas digunakan untuk gambar yang memiliki keterangan. Oleh karena itu, perlu untuk mendukungnya.

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

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

Gambar dengan Lightbox Otomatis

Lighbox membantu memperbesar gambar dan membuatnya dapat difokuskan sepenuhnya saat diklik. Lightbox juga berisi konten atribut alt gambar yang akan muncul saat diklik.

Di mana Anda menemukan Lightboxnya? Klik gambar ini!

Informasi penting:

Semua gambar dalam postingan akan secara otomatis memiliki fungsi lightbox jika gambar dibungkus di bawah wadah induk yang memiliki salah satu classnames 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 di bawah tag jangkar, mengklik gambar hanya akan membuka tautan ketika lightbox ditampilkan.
Untuk menonaktifkan fungsi lightbox otomatis secara eksplisit pada gambar tertentu, tambahkan atribut data-lightbox='false' ke tag img.
Untuk menonaktifkan lightbox otomatis yang berisi konten atribut alt secara eksplisit, tambahkan atribut data-caption='false' ke tag img.

Gambar dengan Tata Letak Kisi

Tata letak kisi dalam konteks gambar biasanya mengacu pada penataan beberapa gambar dalam format kisi terstruktur pada halaman web atau dokumen. Tata letak ini populer untuk galeri, portofolio, atau koleksi gambar apa pun yang ingin Anda tampilkan beberapa gambar dengan rapi dan teratur.

<!--[ Gambar dengan Tata Letak Grid ]-->
<div class='psImg grImg'>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_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 diaktifkan.

Tampilkan Semua

<!--[ Gambar dengan Fungsi Tampilkan Semua ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='judul_gambar' src='link_gambar'/>
    
    <!--[ Tombol untuk mengaktifkan ]-->
    <label for='hideImg1' aria-label='Tampilkan semua gambar'>Tampilkan Semua</label>
  </div>

  <!--[ Sembunyikan sisa gambar disini ]-->
  <div class='psImg shImg'>
    <img alt='judul_gambar' src='link_gambar'/>
    <img alt='judul_gambar' src='link_gambar'/>
    <img alt='judul_gambar' src='link_gambar'/>
    <img alt='judul_gambar' src='link_gambar'/>
  </div>
</div>

Gambar dengan Tata Letak Gulir

Gambar dengan tata letak gulir biasanya mengacu pada teknik desain di mana gambar ditampilkan dengan cara menggulir horizontal atau vertikal di dalam sebuah wadah. Pendekatan ini sering digunakan ketika Anda memiliki kumpulan 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='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
</div>

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

Gaya tata letak gulir ini hanya akan aktif di 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='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
  <img alt='judul_gambar' src='link_gambar'/>
</div>

Gambar Lazyload

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

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

Peringatan!
Jangan pernah melakukan lazyload pada gambar pertama postingan secara manual. Hal ini dapat mengakibatkan perilaku yang tidak terduga.
Disarankan juga untuk tidak menggunakannya. Sebagai gantinya, Anda dapat mengaktifkan Lazy load images di pengaturan Blog. Fitur ini akan secara otomatis melakukan lazyload pada gambar postingan Anda.

Tautan Eksternal

Memberitahu pengguna jika tautan akan mengarah ke situs lain.

Tautan Eksternal

<a class='extL' href='link_disini' rel='nofollow noreferrer noopener' target='_blank'>judul_link</a>

Gaya alternatif:

Tautan Eksternal

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

Tautan Eksternal

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

Tombol

Menentukan tombol yang dapat diklik oleh pengguna.

Teks Tombol

<!--[ Tombol ]-->
<a class='button' href='link_disini'>judul_link</a>

Teks Tombol

<!--[ Tombol Bergaris ]-->
<a class='button ln' href='link_disini'>judul_link</a>

Download

<!--[ Tombol dengan ikon download ]-->
<a class='button' href='link_disini'><i class='icon dl'></i>judul_link</a>

Demo

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

Download Link

Untuk memberikan informasi tentang berkas yang diunduh kepada pengguna.

nama_file.zip 200kb

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

  <!--[ Link unduhan (ubah atribut href='...' untuk link download) ]-->
  <a class='button' aria-label='Download' href='link_disini' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

Blockquote

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

<!--[ Standard Blockquote ]-->
<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 dirimu sendiri dan katakan apa yang kamu rasakan, karena mereka yang peduli tidak penting, dan mereka yang penting tidak peduli.
Bernard M. Baruch

<!--[ Blockquote (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 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

<!--[ Blockquote (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>

Note Block

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau kalimat highlight, ada dua gaya seperti gambar di bawah ini.

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

<!--[ Note info ]-->
<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.

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

Alert

Mirip dengan Note Block, satu-satunya perbedaan adalah Alert memiliki gaya yang berbeda dan memiliki lebih banyak varian:

Default A simple default alert - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

Outline A simple outline alert - Lorem ipsum dolor sit amet.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

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

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

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

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - 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. Berikut adalah contoh tabel dengan data:

Name	Position	Office	Age	Start date	Salary
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

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</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 classname ke elemen .table, termasuk:

cborder: border untuk wadah tabel.
bordered / noborder (pilih salah satu): border konten tabel.
clr / primary / warning / success / error: header tabel latar belakang.
stripped: gaya baris tabel yang dilucuti.
hovered: baris tabel yang di-hover.
mh100 / mhvh / mh200 / mh300: max-height dari tabel dalam px (pengecualian: mh100 menetapkan tinggi ke 100%).
sp5 / sp10 / sp20 : padding isi tabel

Classname stripped dan hovered telah ditambahkan pada v3.1.0

Steps

Digunakan untuk menentukan langkah-langkah panduan.

step_1
step_2
step_3

<!--[ Steps ]-->
<ol class='steps'>
  <li>step_1</li>
  <li>step_2</li>
  <li>step_3</li>
</ol>

Blok Kode

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

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

Tag code dapat digunakan untuk mendefinisikan kode sebaris seperti ini: kode_yang_telah_diparse_disini.

<code>kode_yang_telah_diparse_disini</code>

Tag kbd dapat digunakan untuk mendefinisikan masukan keyboard seperti ini: ⌘ + A.

<kbd>⌘</kbd> + <kbd>A</kbd>

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

// contoh tanda
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// kode tanda
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Teks sebelumnya'>Hello World!</mark>");
console.log("<mark class='block' data-before='Teks sebelumnya'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Teks setelahnya'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

Perlu diketahui:

Anda harus menggunakan kode yang telah diparse di dalam elemen <code>, yang berarti Anda harus parse atau 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 khusus. Tombol salin dan nomor baris juga ditambahkan secara otomatis.
Library dimuat jika dan hanya jika terdapat setidaknya satu blok kode di dalam postingan untuk memastikan kami tidak membuat permintaan tambahan.
Kode sebaris juga disorot.
Library secara otomatis mendeteksi bahasa yang paling cocok untuk kode Anda dan menyorotnya, tetapi terkadang library mungkin tidak mendeteksi bahasa yang tepat.
Jika library mendeteksi bahasa secara tidak tepat atau Anda ingin menentukan bahasa kode secara eksplisit, Anda dapat menambahkan classname dengan cara tersebut, nama bahasa diawali dengan language-, ke elemen <code>. Misalnya, jika kode Anda ditulis dalam JavaScript, Anda dapat menambahkan classname language-js atau language-javascript ke elemen <code>.

Blok Kode Multi-tab

Digunakan untuk mengelompokkan beberapa blok kode secara bersama-sama.

[HTML] kode_yang_telah_diparse_disini

[CSS] kode_yang_telah_diparse_disini

[JS] kode_yang_telah_diparse_disini

[JSON] kode_yang_telah_diparse_disini

<!--[ 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'/>
  
  <!--[ Judul/header ]-->
  <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>

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

Spoiler

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

Spoiler:

teks_disini

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Buka' data-hide='Tutup'>Spoiler:</summary>
  <div>
    <p>teks_disini</p>
  </div>
</details>

Accordion

Menentukan konten tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan dalam grup, biasanya digunakan untuk daftar pertanyaan atau FAQ (Pertanyaan yang Sering Diajukan).

Judul_disini

teks_disini

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Judul_disini</summary>
  <div>
    <p>teks_disini</p>
  </div>
</details>

Judul_disini

teks_disini

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

Judul_disini

teks_disini

Judul_disini

teks_disini

Judul_disini

teks_disini

Judul_disini

teks_disini

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

FAQ tentang mikrodata

Halaman Pertanyaan yang Sering Diajukan (FAQ) berisi daftar pertanyaan dan jawaban yang berkaitan dengan topik tertentu. Halaman FAQ yang ditandai dengan benar dapat memenuhi syarat untuk mendapatkan hasil kaya di Penelusuran dan Aksi di Asisten Google, yang dapat membantu situs Anda menjangkau pengguna yang tepat.

<!--[ Accordion (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_disini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_disini</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_disini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_disini</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_disini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_disini</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Judul_disini</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>teks_disini</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) membantu pengguna menavigasi konten halaman web dengan cepat dengan menyediakan tautan langsung ke berbagai bagian. Ini sangat berguna untuk artikel yang lebih panjang atau halaman dengan beberapa bagian terpisah.

Ada dua cara untuk menentukan TOC.

Daftar Isi Manual

Menggunakan TOC Manual sangat rumit, Anda harus menambahkan atribut id yang berbeda di setiap tag heading dan menuliskannya di daftar konten.

Daftar Isi Otomatis

Menggunakan TOC Manual tidaklah mudah, oleh karena itu kami menyediakan TOC Otomatis yang mencari semua judul dalam postingan dan mengisi daftar konten secara terorganisir.

Daftar Isi Artikel

<!--[ Daftar Isi Otomatis ]-->
<details class='sp toc' open>
  <summary data-show='Buka' data-hide='Tutup'>Daftar Isi Artikel</summary>
  <div class='aToc'></div>
</details>

Postingan Terkait

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

Ada dua cara untuk mendefinisikan komponen ini.

Postingan Terkait Manual

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

Anda mungkin ingin membaca posting ini:

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

Postingan Terkait Otomatis

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

Postingan Terkait

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

Informasi penting:

Fitur ini menampilkan daftar postingan dengan 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 dalam data-label, maka label tersebut akan kembali ke label acak dari postingan saat ini jika digunakan dalam postingan, atau label acak dari blog jika digunakan di halaman.
Fitur ini akan memfilter postingan yang sedang dilihat.
Untuk mengatur jumlah postingan maksimum, tambahkan atribut data-max-posts='6', di mana 6 adalah jumlah postingan maksimum.

Lazy YouTube

Memuat iframe setelah tombol putar diklik, jika tidak, akan menampilkan gambar mini sebagai placeholder yang lazyloaded menggunakan @aFarkas/lazysizes.

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

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

Defer YouTube

Menunda pemuatan iframe menggunakan @aFarkas/lazysizes.

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

Informasi 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/video_id' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Hal-hal Penting

Bagian ini tidak menyediakan komponen apa pun, tetapi berisi potongan kode HTML umum yang dapat digunakan untuk berbagai tujuan.

Cuplikan Postingan Eksplisit

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

<!--[ Cuplikan posting eksplisit ]-->
<div hidden aria-hidden='true'>posting_eksplisit</div>

<!--more-->

Thumbnail Postingan Eksplisit

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

<!--[ Thumbnail postingan eksplisit ]-->
<!--[
  <div class='separator'><img src='link_gambar'/></div>
]-->

<!--more-->

Anda dapat mengatur cuplikan posting dan gambar mini posting khusus dengan menggabungkan dua cuplikan kode di atas seperti yang ditunjukkan di bawah ini:

<!--[ Cuplikan posting eksplisit ]-->
<div hidden aria-hidden='true'>posting_eksplisit</div>

<!--[ Thumbnail postingan eksplisit ]-->
<!--[
  <div class='separator'><img src='link_gambar'/></div>
]-->

<!--more-->

Subjudul Header

Menambahkan subjudul di samping judul header pada postingan atau halaman tertentu.

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

Komponen dan Format Penulisan

Format Paragraf

Paragraf dengan Text Indent

Paragraf dengan Drop Cap

Paragraf Referensi

Gambar Posting

Gambar dengan Keterangan

Gambar dengan Lightbox Otomatis

Gambar dengan Tata Letak Kisi

Gambar dengan Fungsi Tampilkan Semua

Gambar dengan Tata Letak Gulir

Gambar Lazyload

Tautan Eksternal

Tombol

Download Link

Blockquote

Note Block

Alert

Tabel

Steps

Blok Kode

Blok Kode Multi-tab

Spoiler

Accordion

FAQ tentang mikrodata

Daftar Isi

Daftar Isi Manual

Daftar Isi Otomatis

Postingan Terkait

Postingan Terkait Manual

Postingan Terkait Otomatis

Lazy YouTube

Defer YouTube

Hal-hal Penting

Cuplikan Postingan Eksplisit

Thumbnail Postingan Eksplisit

Subjudul Header

Posting Komentar