Informasi

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

Dalam bar editor postingan, klik ikon
Dua opsi akan muncul: Tampilan HTML dan Tampilan penulisan
Pilih ' Tampilan HTML '

Mengatur Paragraf Kalimat

Format penulisan :

<p>Your_paragraph_here</p>

Gunakan tag Your_paragraph_here untuk mengatur paragraf pada Artikel kamu.

Gambar dengan latar polos otomatis & Tekan gambar untuk mencobanya

Gambar Dengan Deskripsi dan Dengan Latar Polos Otomatis

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>

Menambahkan class='full' berfungsi untuk menghilangkan batas atau jarak pada sisi gambar dan layar. Perlu kamu ketahui fungsi ini hanya bekerja pada tampilan seluler saja.

Membuat Gambar Dengan Tata Letak Kotak

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>

Menampilkan Gambar Yang disembunyikan Pada Postingan

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>

Menambahkan Fungsi Efek Gulir Pada Gambar

Untuk berikutnya gambar dengan menambahkan fungsi efek gulir. Berlaku hanya untuk tampilan Seluler saja.

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

Lazyload Image merupakan teknik yang sering diterapkan pada website. Teknik ini sangat mempengaruhi kecepatan page load website. Sebagai gambaran, pengguna membuka website kamu dan pada artikel terdapat gambar. Jika tidak menerapkan Lazyload Image maka gambar-gambar akan di proses. Hal ini tentu akan memperberat load page website.

Jika kamu menerapkan Lazyload Image ketika pengguna membuka artikel pada website kamu. Gambar-gambar tidak akan di proses secara bersamaan. Gambar pertama akan di proses secara penuh ketika pengguna menggulir ke halaman selanjutnya gambar baru akan di proses. Tentu saja ini akan mempengaruhi PageSpeed. Website kamu akan lebih ringan.

Sebelum itu gunakan <noscript> untuk tetap menampilkan gambar-gambar ketika pengguna tidak mengaktifkan javascript pada browser yang digunakan.

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>

Paragraf Dengan Indentasi Teks

Dapat digunakan untuk mengatur kalimat menjorok ke dalam dalam baris kalimat pertama. Indentasi teks ini bisa kamu terapkan diparagraf lainnya juga.

Format penulisan :

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

Dekorasi Paragraf Kapital Drop Cap

Paragraf drop cap merupakan dekorasi pada suatu kalimat paragraf biasanya dengan ukuran besaran 2 atau 3 baris kalimat. Sering di jumpai pada koran, buku, majalah dan media cetak lainnya. Tentu fungsi dari drop cap sebagai dekorasi agar menambah daya tarik visual dari artikel tersebut.

  <p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote / Penegasan ataupun Kutipan Kalimat

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

* No Name.

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>

Atau gaya lain berikut yang bisa kamu coba.

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>

Note Block

Dapat digunakan sebagai sorotan kalimat, ataupun catatan informasi penting untuk pembaca.

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

Format Penulisan:

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

Berikut Note Block dengan gaya yang berbeda.

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

Format Penulisan:

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

Post Break

Berfungsi sebagai pemisahan paragraf ataupun untuk memisahkan pembahasan bab baru. Bisa kamu lihat pada postingan ini.
Format Penulisan:

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

Membuat Tabel

Tabel dengan tambahan otomatis fitur gulir jika tabel melebihi tampilan layar kamu. Penggunaan fitur tabel ini lebih rumit. Kami merekomendasikan agar lebih memahami lebih tentang tabel HTML ini sebelum menggunakannya. Berikut contoh tabel dengan data.

Name	Position	Office	Age	Start date	Salary
Alexsandria	Administator	Edinburgh	30	2011/04/25	$420,800
Lyn Mayasa	Accountant	Nagasaki	32	2011/07/25	$370,750
Hasimoto kanna	Junior Technical Author	San Francisco	37	2009/01/12	$86,000
Claudia Bella	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Haruno Sakura	Accountant	Tokyo	33	2007/11/28	$169,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>Alexsandria</td>
        <td>Administator</td>
        <td>Edinburgh</td>
        <td>30</td>
        <td>2011/04/25</td>
        <td>$420,800</td>
      </tr>
      <tr>
        <td>Lyn Mayasa</td>
        <td>Accountant</td>
        <td>Nagasaki</td>
        <td>32</td>
        <td>2011/07/25</td>
        <td>$370,750</td>
      </tr>
      <tr>
        <td>Hasimoto kanna</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>37</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Claudia Bella</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Haruno Sakura</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2007/11/28</td>
        <td>$169,700</td>
      </tr>
    </tbody>
  </table>
</div>

Syntax Highalighter

Digunakan untuk menentukan baris kode komputer seperti HTML, CSS, Javascript, dll dalam pesan.
Format penulisan :

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

Format Penulisan:

Menambahkan kode warna ke sintaks dapat ditulis secara manual, akan tetapi kami juga menyediakan fungsi Syntax dengan warna otomatis.

Ubah data-text='.html'untuk menentukan format kode lain, kamu bisa menulis seperti data-text='.css' untuk css, data-text='.js' untuk js,dan data-text='.php' untuk kode php,dll bisa kamu tentukan sendiri.

Nilai white-space:pre-wrap;berguna untuk menonaktifkan pengguliran samping, kode panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.

Kode max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilai menjadi nonemisalnya 400pxuntuk menentukan tinggi maksimum sintaks hanya 400 piksel.

Gunakan code_hereuntuk menambahkan warna merah.

Gunakan code_hereuntuk menambahkan warna biru.

Gunakan code_hereuntuk menambahkan warna hijau.

Gunakan code_hereuntuk menambahkan warna abu-abu.

Gunakan code_hereuntuk menambahkan blok warna biru.

Syntax Highalighter Dengan warna Otomatis

Syntax berikut secara otomatis disorot/diwarnai oleh Highlight.js
Format Penulisan :

  &lt;!--[ Change data-text to .html, .css, .js or any language ]--&gt;
&lt;div class='pre pu notranslate' data-text='.html'&gt;
  &lt;pre style='white-space:pre-wrap; max-height:none;'&gt;Your_code_is_here&lt;/pre&gt;
&lt;/div&gt<!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>

Catatan:
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 hl. Berikut contohnya.
Format Penulisan:

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

Kamu tidak dapat menambahkan tag apa pun di Kode tersebut. Termasuk, Kamu akan menambahkan , yang tidak lagi diblokir dengan warna biru.

Syntax Highalighter Multi Fungsional

<!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.

Tombol Tampilkan / Sembunyikan Kalimat

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

Spoiler: