Semua Typography dan Format Penulisan Code Dokumentasi Template Plus UI

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 pos, klik ikon di kanan bawah judul
Dua opsi akan muncul: Tampilan HTML dan Tampilan Menulis
Pilih 'Tampilan HTML'.

Tips: Gunakan Your_paragraph_here tag untuk menambahkan paragraf ke artikel.

Format penulisan untuk : Plus UI Themed v2.6.1
Template Updated pada : Jun 1, 2022

Gambar dengan Teks dan Lightbox Otomatis

Caption pada gambar ini tidak akan terbaca pada deskripsi/cuplikan artikel. Anda juga dapat memilih agar teks tetap terbaca di cuplikan artikel.

Semua gambar di postingan otomatis akan ada fungsi lightbox, klik gambar ini untuk mencobanya.

Pekerjaan yang ditambahkan class='full' untuk menghapus gambar dan layar margin, 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>

Gambar dengan 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>

Gambar dengan fungsi Show All

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan saat pengguna mengklik tombol 'Tampilkan Semua'. Fungsi Tampilkan Semua hanya dapat diaktifkan satu kali, Gambar tidak dapat disembunyikan lagi saat Anda mengaktifkannya.

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>

Gambar dengan Scroll Layout

Sama seperti layout gambar di atas, hanya saja pada tampilan mobile gambar akan tersusun paralel dengan tambahan fungsi side scroll pada tampilan mobile.

Kami juga menambahkan efek gulir halus ke 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>

Gambar dengan Lazyload

Berguna untuk menunda pemuatan gambar agar skor PageSpeed blog lebih tinggi, gambar hanya akan dimuat saat 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 secara otomatis muncul di setiap halaman.

You may want to read this post :

Format penulisan:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

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

Auto Related Post

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Post Break

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

Format penulisan:

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

Paragraph dengan 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'>Your_paragraph_is_here.</p>

Paragraph dengan Drop cap

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

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

Format penulisan:

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</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>

Format Lainnya:

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

This feature serves to add important info, warning sentences or highlight sentences, there are two styles that you can try including:

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>

Tabel

Tabel pada tema ini sudah di setting responsive, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak tata letak maka secara otomatis tabel akan memiliki fungsi scroll.

Silakan buka artikel ini di perangkat seluler Anda dan sorot bagian tabel di bawah ini:

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, itu tidak akan membungkus ke baris berikutnya dan akan berlanjut sampai   tag ditemukan.
min-width:100%; menentukan lebar minimum tabel, Anda dapat mengubahnya ke unit px misalnya 500px. Ubah ke 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Manual Table of Content

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading:

Heading_title

Menggunakan Table of Content manual lebih rumit daripada versi otomatis, Anda harus menambahkan atribut ID yang berbeda di setiap tag judul dan menuliskannya di daftar konten.

Ini adalah contoh tag tajuk dengan ID khusus:

<h2>Your_Heading</h2>
    
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
    
<h3 id='subHeading'>Sub_Heading_1</h3>

Format Penulisan

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

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

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

Semi Automatic Table of Content

Table of Contents

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

Kode untuk menentukan lokasi widget ToC semi-otomatis:

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Syntax Highlighter

Digunakan untuk mendefinisikan baris-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;'>Your_code_is_here</pre>
</div>

Penambahan kode warna pada sintaks dapat ditulis secara manual, namun kami juga menyediakan fitur sintaks berwarna otomatis.

Ganti data-text='.html' untuk menentukan format kode lain, yaitu data-text='.css', data-text='.js', data-text='.php', dll.
Nilai white-space:pre-wrap; berguna untuk menonaktifkan pengguliran samping, kode panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.
max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilai none menjadi misalnya 400px untuk menentukan tinggi maksimum sintaks hanya 400 piksel.
Gunakan code_here untuk menambahkan warna merah/oranye.
Gunakan code_here untuk menambahkan warna biru.
Gunakan code_here untuk menambahkan warna hijau.
Gunakan code_here untuk menambahkan warna abu-abu.
Gunakan code_here 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>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Sintaks kode ke warna:

<!--[ 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;'>Your_code_is_here</pre>
</div>

Kesalahan Umum:

Fitur ini secara otomatis mendeteksi bahasa dan menyorot warna. Tetapi dalam beberapa kasus, mungkin tidak secara otomatis mendeteksi bahasa kode, pada saat itu Anda harus menambahkan nama kelas sesuai dengan bahasanya, yaitu jika html, Anda harus menambahkan html atau language-html bersama dengan hl.

Sebagai 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;'>Your_code_is_here</pre>
</div>

Batasan penggunaan Penyorot Sintaks Berwarna Otomatis:

Anda tidak dapat menambahkan tag apa pun di Kode Terformat Anda. Misalnya, Anda akan menambahkan , yang tidak lagi diblokir dengan warna biru.

Multi Functional Syntax Highlighter

Your_code_is_here

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;'>Your_code_is_here</pre>
</div>

MultiTabs Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</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 penulisan:

<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>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

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

Toggle Show / Hide

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

Konten apa pun dapat dimasukkan dalam widget ini.

Spoiler: