UI Components and Typography

Daftar Isi Artikel

Artikel Terkait

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

1. Pada tampilan editor postingan, klik ikon di kanan bawah judul.
2. Dua opsi akan muncul: Tampilan HTML dan Tampilan penulisan.
3. Pilih 'Tampilan HTML'.

Paragraph

Gunakan tag p untuk menambahkan paragraf pada artikel.

<!--[ Paragraph ]-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraph with Text Indent

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

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>Your_paragraph_is_here.</p>

Paragraph with Drop Cap

Drop cap akan mengubah ukuran huruf pertama paragraf sehingga menjatuhkan satu baris atau lebih ke bawah. Banyak jenis media cetak yang menggunakan drop cap seperti pada buku, majalah, koran dan lain sebagainya karena dapat menambah daya tarik visual.

Misal huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas menurun biasanya berupa dua garis atau lebih.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Post Reference Paragraph

Untuk menuliskan daftar referensi atau catatan kaki di bawah postingan.

Sumber:
www.contoh.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Sumber:<br/> www.contoh.com</p>

Post Image

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

<!--[ Standard image ]-->
<img class='full' alt='judul_gambar' src='tautan_gambar'/>

Baik untuk diketahui:

1. Semua gambar dalam postingan secara otomatis diubah jika ada atribut width atau height, disajikan dalam format webp dan disimpan dalam cache selama 90 hari.
2. Untuk secara eksplisit memilih tidak ikut mengubah gambar tertentu, tambahkan atribut data-transform='false' ke tag img.
3. Untuk secara eksplisit membatalkan penayangan webp untuk gambar tertentu, tambahkan atribut data-webp='false' ke tag img.
4. Untuk menyetel waktu cache khusus secara eksplisit untuk gambar tertentu, tambahkan atribut data-cache='30' ke tag img dengan 30 sebagai angkanya hari untuk kedaluwarsa cache, rentang yang diterima adalah 1 hingga 90.

Tips!
Perhatikan nama class full. Menambahkan nama class ini ke tag img berfungsi menghapus margin horizontal dan menyesuaikan lebar layar penuh khusus pada perangkat Seluler.

Image with Caption

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

Keterangan gambar ada di sini! Di mana Anda mencarinya?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='full' alt='judul_gambar' src='tautan_gambar'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>keterangan_disini</td>
    </tr>
  </tbody>
</table>

Anda mungkin bertanya-tanya mengapa Anda harus menggunakan tag table hanya untuk menambahkan keterangan pada gambar meskipun ada tag HTML figure dan figcaption yang tersedia?

Biarkan saya menyelesaikannya untuk Anda! Hal ini karena ketika kita menambahkan caption pada gambar melalui editor postingan Blogger dan tidak secara manual dengan mengedit HTML, ia menggunakan cuplikan kode di atas untuk gambar yang memiliki caption. Oleh karena itu, dukungan terhadap mereka perlu dilakukan.

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

Keterangan gambar menggunakan tag figcaption.

<!--[ Image with Caption ]-->
<figure>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <figcaption>keterangan_disini</figcaption>
</figure>

Image with Automatic Lightbox

Lighbox membantu memperbesar gambar dan membuatnya dapat fokus sepenuhnya saat diklik. Lightbox juga berisi konten atribut alt gambar ketika muncul pada gambar yang diklik.

Di mana Anda menemukan lightbox? Klik pada gambar ini!

Baik untuk diketahui:

1. Semua gambar dalam postingan akan secara otomatis memiliki fungsi lightbox jika gambar tersebut dibungkus dalam wadah induk yang memiliki salah satu nama kelas lbx, separator, psImg, btImg, galWrp atau memenuhi salah satu penyeleksi .pS .separator >a, .pS .tr-caption -container td >a, .pS .separator >img, .pS .tr-caption-container td >img, gambar img.
2. Jika gambar dengan lightbox dibungkus di bawah tag jangkar, mengklik gambar hanya akan membuka link ketika lightbox ditampilkan.
3. Untuk secara eksplisit menyisihkan fungsi lightbox otomatis pada gambar tertentu, tambahkan atribut data-lightbox='false' ke tag img.
4. Untuk secara eksplisit menyisih dari lightbox yang secara otomatis berisi konten atribut alt, tambahkan atribut data-caption='false' ke tag img.

Images with Grid Layout

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 di mana Anda ingin menampilkan beberapa gambar secara rapi dan terorganisir.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
</div>

Images with Show All Function

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika pengguna mengklik tombol Tampilkan Semua. Fungsi Tampilkan Semua hanya dapat diaktifkan satu kali, gambar tidak dapat disembunyikan lagi bila diaktifkan.

Tampilkan Semua

<!--[ Images with Show All Function ]-->
<input class='inImg hidden' id='for-hideImage-1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='judul_gambar' src='tautan_gambar'/>
    
    <!--[ Button to activate ]-->
    <label for='for-hideImage-1' aria-label='Show all images'>Tampilkan Semua</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='judul_gambar' src='tautan_gambar'/>
    <img alt='judul_gambar' src='tautan_gambar'/>
    <img alt='judul_gambar' src='tautan_gambar'/>
    <img alt='judul_gambar' src='tautan_gambar'/>
  </div>
</div>

Images with Scroll Layout

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

<!--[ Images with Scroll Layout (Type 1) ]-->
<div class='glImg'>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
</div>

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

Berikut adalah gaya tata letak gulir lainnya tetapi hanya akan aktif dalam tampilan seluler. Silakan coba buka halaman ini di perangkat seluler Anda.

<!--[ Images with Scroll Layout (Type 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
  <img alt='judul_gambar' src='tautan_gambar'/>
</div>

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 gambar dengan lambat.

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

Baik untuk diketahui:

1. Semua gambar dalam postingan otomatis dimuat secara lambat.
2. Karena gambar secara otomatis dimuat secara lambat, kami tidak menyarankan penggunaan cuplikan kode di atas.
3. Untuk secara eksplisit mengecualikan pemuatan lambat otomatis pada gambar tertentu, tambahkan atribut data-lazyload='false' ke tag img.

Peringatan!
Jangan pernah memuat gambar pertama postingan secara manual. Melakukan hal ini akan menghasilkan perilaku yang tidak terduga.

External Link

Memberi tahu pengguna jika tautan tersebut akan mengarah ke situs lain.

judul_tautan

Button

judul_tautan judul_tautan judul_tautan judul_tautan

Download Link

nama_file.zip 200kb

Blockquote

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

Anonymous

<!--[ 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>Anonymous</span>
</blockquote>

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

Anonymous

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

Anonymous

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, et efficitur 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>

Warning!
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>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Alert

Default Peringatan default sederhana - Lorem ipsum dolor sit amet.

Outline Peringatan garis luar sederhana - Lorem ipsum dolor sit amet.

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

Warning! Peringatan sederhana - Lorem ipsum dolor sit amet.

Success! Peringatan sukses sederhana - Lorem ipsum dolor sit amet.

Error! Peringatan kesalahan sederhana - Lorem ipsum dolor sit amet.

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

Warning! Peringatan sederhana - Lorem ipsum dolor sit amet.

Success! Peringatan sukses sederhana - Lorem ipsum dolor sit amet.

Error! Peringatan kesalahan sederhana - Lorem ipsum dolor sit amet.

Table

Nama	Posisi	Kantor	Usia	Tanggal mulai	Gaji
Muhammad Bagus	Arsitek Sistem	Wonosobo	31	25/04/2011	Rp. 3.200.000
Siti Musyarofah	Akuntan	Banjarnegara	33	25/07/2011	Rp. 1.775.000
Anton Prayoga	Penulis Teknis Junior	Semarang	36	12/01/2009	Rp. 860.000

Syntax Highlighter

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

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

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

<code>kode_disini</code>

Baik untuk diketahui:

1. Semua blok kode secara otomatis disorot menggunakan @highlightjs /highlight.js, salah satu perpustakaan populer untuk penyorotan kode dan plugin khusus. Tombol salin dan nomor baris juga otomatis ditambahkan.
2. Perpustakaan dimuat jika dan hanya jika ada setidaknya satu blok kode di postingan untuk memastikan kami tidak membuat permintaan tambahan.
3. Kode sebaris juga disorot.

MultiTabs Syntax Highlighter

Digunakan untuk mengelompokkan beberapa blok kode menjadi satu.

[HTML] kode_disini

[CSS] kode_disini

[JS] kode_disini

[JSON] kode_disini

<!--[ MultiTabs Syntax Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT-1' type='radio' name='preTab' checked=''/>
  <input id='preT-2' type='radio' name='preTab'/>
  <input id='preT-3' type='radio' name='preTab'/>
  <input id='preT-4' type='radio' name='preTab'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
    <label for='preT-4' data-text='JSON'></label>
  </div>

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

Spoiler

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

Spoiler:

teks_disini

Accordion

Mendefinisikan 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

Judul_disini

teks_disini

Judul_disini

teks_disini

Judul_disini

teks_disini

Judul_disini

teks_disini

Judul_disini

teks_disini

Table of Contents

TOC (akronim dari Daftar Isi) membantu pengguna menavigasi konten halaman web dengan cepat dengan menyediakan tautan langsung ke bagian yang berbeda. Ini sangat berguna untuk artikel atau halaman yang lebih panjang dengan beberapa bagian berbeda.

Ada dua cara untuk mendefinisikan TOC.

Manual Table of Contents

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

Automatic Table of Contents

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

Daftar isi

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

Related Posts

Manual Related Posts

Automatic Related Posts

Artikel Terkait

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open=''>
  <summary data-show='Buka' data-hide='Tutup'>Artikel Terkait</summary>  
  <div class='aRel'></div>
</details>

Baik untuk diketahui:

1. Fitur ini menampilkan postingan dengan label tertentu.
2. Untuk menentukan label, tambahkan atribut data-label='Label Saya' ke elemen .aRel.
3. Jika atribut data-label tidak ditentukan atau tidak ada postingan dengan label yang ditentukan di data-label, maka atribut tersebut akan dikembalikan ke label acak dari postingan saat ini jika tidak digunakan dalam postingan, jika tidak, kembalikan ke label acak dari blog jika digunakan di halaman.
4. Ini akan memfilter postingan yang sedang dilihat.
5. Untuk mengatur jumlah maksimum postingan, tambahkan atribut data-max-posts='6', dengan 6 adalah jumlah maksimum postingan.

Lazy YouTube

Memuat iframe setelah tombol putar diklik, jika tidak, tampilkan gambar mini sebagai placeholder yang dimuat dengan lambat menggunakan @aFarkas/lazysizes.

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

Defer YouTube

Menunda pemuatan iframe menggunakan @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/DT61L8hbbJ4' 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>

Header Subtitle

Menambahkan subtitle di samping judul header di postingan atau halaman tertentu.

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

Essentials

Explicit Post Snippet

Cuplikan postingan menunjukkan beberapa baris konten teks postingan. Secara otomatis memilih teks dari awal posting. Jika Anda ingin menyetel cuplikan postingan khusus, Anda dapat menambahkan cuplikan kode berikut di awal postingan:

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--more-->

Explicit Post Thumbnail

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

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

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

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->