UI Components and Typography PLUS UI v2.6.1

Pengguna PLUS UI diatas v2.6?
Jika Anda merupakan pengguna Template PLUS UI diatas v2.6, seperti v2.7, v2.8, v3.0, v3.1, dan v3.2 silahkan lihat dokumentasinya di Dokumentasi Baru.

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 icon di kiri bawah judul.
Dua opsi akan muncul: Tampilan HTML dan Tampilan menulis.
Pilih 'Tampilan HTML'.

Tips: Gunakan tag Paragraf_Anda_di_sini untuk menambahkan paragraf ke artikel.

Writing Format for : Plus UI Themed v2.6.1
Template Updated on : Jun 1, 2022

Image with Caption and Auto Lightbox

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

Semua gambar dalam postingan akan secara otomatis memiliki fungsi lightbox, klik gambar ini untuk mencobanya.

Tambahkan class='full' berfungsi untuk menghapus gambar margin dan layar, hanya berfungsi untuk tampilan seluler.

Format penulisan:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout

Format penulisan:

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

Image with Show All Function

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.

Show All

Format penulisan:

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Image with Scroll Layout

Sama seperti tata letak gambar di atas, hanya saja pada tampilan seluler, gambar akan disusun secara paralel dengan fungsi gulir samping tambahan pada tampilan seluler.

Kami juga menambahkan efek gulir halus pada fitur ini. Silakan coba buka halaman ini di perangkat seluler Anda:

Format penulisan:

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Lazyload Image

Format kode untuk gambar Lazyload telah diubah dalam pembaruan kecil berikutnya, tidak disarankan untuk menggunakan yang berikut ini.

Berguna untuk menunda pemuatan gambar agar skor PageSpeed blog lebih tinggi. Gambar hanya akan dimuat ketika pengguna menggulir ke area gambar. Semua gambar dalam artikel ini menggunakan Lazyload.

Format penulisan:

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Manual Related Post

Penting untuk dicatat bahwa fitur ini ditulis secara manual, tidak muncul secara otomatis di setiap halaman.

Anda mungkin tertarik artikel ini :

Format penulisan:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Anda mungkin tertarik artikel ini :</b>

  <ul>
    <li><a href='#'>Judul_postingan_disini</a></li>
    <li><a href='#'>Judul_postingan_disini</a></li>
    <li><a href='#'>Judul_postingan_disini</a></li>
  </ul>
</div>

Auto Related Post

Format kode untuk postingan terkait Otomatis telah diubah dalam pembaruan kecil berikutnya, tidak disarankan untuk menggunakan yang berikut ini.

Post Break

Anda dapat menggunakan fitur ini untuk memisahkan paragraf atau membuka bab baru dalam sebuah postingan, berikut contoh tampilannya:

Format penulisan:

<!--[ To break paragraphs apart ]-->
<hr>

Paragraph with Text Indent

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

Format penulisan:

<p class='pIndent'>Paragraf_Anda_disini.</p>

Paragraph with Drop cap

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

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.

Format penulisan:

<p><span class='dropCap'>P</span>aragraf_Anda_disini.</p>

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

Format penulisan:

<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.</blockquote>

Gaya Lain:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.

Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Format penulisan:

<blockquote class='s-1'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Social 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. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Format penulisan:

<blockquote class='pu_blq' data-author='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. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.</blockquote>

Note Block

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau menyorot kalimat, ada dua gaya yang dapat Anda coba diantaranya:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Dengan Warna Berbeda:

Warning!Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Table

Tabel pada tema ini telah diatur responsif, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak tata letak, tabel akan secara otomatis memiliki fungsi gulir.

Please open this article on your mobile device and highlight the table section below:

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
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

Format penulisan:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <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>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

white-space:nowrap; menentukan teks menjadi satu baris, teks tidak akan berpindah ke baris berikutnya dan akan berlanjut hingga tag   ditemukan.
min-width:100%; menentukan lebar minimum tabel, Anda dapat mengubahnya ke satuan px, misalnya 500px. Ubah ke 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Manual Table of Content

Daftar Isi Artikel

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading:

Heading_title

Menggunakan Daftar Isi manual lebih rumit daripada versi otomatis. Anda harus menambahkan atribut ID yang berbeda di setiap tag heading dan menuliskannya di daftar konten.

Berikut adalah contoh tag heading dengan ID khusus:

<h2>Judul_Anda</h2>
    
<h3>Sub_Judul_1</h3>

<h2 id='heading'>Judul_Anda</h2>
    
<h3 id='subHeading'>Sub_Judul_1</h3>

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Buka' data-hide='Tutup'>Daftar Isi Artikel</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Judul_Anda</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Judul_Anda</a>
        <ol>
          <li><a href='#subHeading'>Sub_Judul_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

Hapus atribut open='' untuk menutup otomatis Daftar Isi saat halaman pertama kali dimuat.
Anda dapat mengubah judul atau frasa 'Buka / Tutup' di bagian yang ditandai.

Semi Automatic Table of Content

Daftar Isi Artikel

Opsi termudah untuk menampilkan Daftar Isi. Fitur ini akan menampilkan semua tag heading di postingan Anda (tiga tingkatan h2 - h4), jadi pastikan Anda menulis tag heading secara berurutan.

Format kode untuk Daftar Isi Otomatis telah diubah dalam pembaruan kecil berikutnya, tidak disarankan untuk menggunakan yang berikut ini.

Kode untuk menentukan lokasi widget ToC semi-otomatis:

<details class='sp toc'>
  <summary data-show='Buka' data-hide='Tutup'>Daftar Isi Otomatis</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Syntax Highlighter

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

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Kode_Anda_disini</pre>
</div>

Penambahan kode warna dalam sintaksis dapat ditulis secara manual, tetapi kami juga menyediakan fitur sintaksis berwarna otomatis.

Ubah data-text='.html' untuk menentukan format kode lain, yaitu data-text='.css', data-text='.js', data-text='.php', dan lain sebagainya
Nilai white-space:pre-wrap; berguna untuk menonaktifkan pengguliran samping, kode yang panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.
max-height:none; mendefinisikan tinggi maksimum sintaks tidak ditetapkan (otomatis), ubah nilai none menjadi misalnya 400px untuk menentukan tinggi maksimum sintaks hanya 400 piksel.
Gunakan kode_disini untuk menambahkan warna merah/oranye.
Gunakan kode_disini untuk menambahkan warna biru.
Gunakan kode_disini untuk menambahkan warna hijau.
Gunakan kode_disini untuk menambahkan warna abu-abu.
Gunakan kode_disini untuk menambahkan blok warna biru.

Automatic Colored Syntax Highlighter

Sintaks berikut secara otomatis disorot / diwarnai menggunakan Highlight.js

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Contoh Halaman</title>
  </head>
  
  <!--[ <body> open ]-->
  <body>
    <p>Contoh konten di sini!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Kode untuk mewarnai sintaksis:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Kode_Anda_disini</pre>
</div>

Kesalahan Umum:

Fitur ini otomatis mendeteksi bahasa dan menyorot warnanya. Namun, dalam beberapa kasus, fitur ini mungkin tidak otomatis mendeteksi bahasa kode. Pada saat itu, Anda harus menambahkan nama kelas sesuai bahasanya. Misalnya, jika HTML, Anda harus menambahkan html atau language-html bersama dengan hl.

Contoh:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Kode_Anda_disini</pre>
</div>

Keterbatasan penggunaan Automatic Colored Syntax Highlighter:

Anda tidak dapat menambahkan tag apa pun ke dalam Kode Praformat Anda. Misalnya, Anda akan menambahkan , itu tidak akan lagi diblokir dengan warna biru.

Multi Functional Syntax Highlighter

Kode_Anda_disini

Format penulisan:

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Kode_Anda_disini</pre>
</div>

MultiTabs Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Contoh Halaman</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Contoh konten di sini!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://plus-ui.fineshopdesign.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://plus-ui.fineshopdesign.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Format kode:

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ 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>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Kode_Anda_disini</pre>
  </div>
  <div class='preC-2'>
    <pre>Kode_Anda_disini</pre>
  </div>
  <div class='preC-3'>
    <pre>Kode_Anda_disini</pre>
  </div>
</div>

Atribut checked mendefinisikan tab pertama yang muncul secara default.
Pastikan atribut id='...' dan for='...' memiliki nilai yang sama. ID harus unik, tidak boleh ada dua ID yang identik dalam satu halaman.
Ubah atribut data-text='HTML' di bagian yang disorot untuk mengganti nama tab.

Toggle Show / Hide

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 disertakan dalam widget ini.

Spoiler: