Typography PLUS UI

Terima kasih atas pembelian Anda! Kami senang Anda memilih template Blogger kami, dan kami harap ini akan meningkatkan blog Anda ke tingkat yang lebih tinggi.

Pemberitahuan Penting!

Karena postingan ini sangat sering dikunjungi oleh pengguna template, saya ingin memberi tahu Anda sesuatu.

Pembaruan kecil diperkirakan akan dirilis. Jika Anda sudah membeli templat ini, Anda akan mendapatkannya melalui Gumroad. Jika Anda sudah membelinya tetapi tidak melalui Gumroad (misalnya melalui PayPal atau UPI), Anda perlu memberi tahu saya agar terdaftar dalam daftar Gumroad. Anda dapat mengirimkan email ke deo@fineshopdesign.com dengan bukti pembayaran agar saya dapat membagikan tautan untuk terdaftar di sana. Terima kasih!

Beberapa format kode akan diubah/dihapus dalam pembaruan kecil berikutnya.

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

Tips: Gunakan tag Paragraf_anda_disini untuk menambahkan paragraf ke artikel.

Format Penulisan untuk: Plus UI v2.6.1
Template Diperbarui pada: 1 Juni 2022

Gambar dengan Keterangan dan Kotak Cahaya Otomatis

Keterangan pada gambar 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='judul_gambar_disini' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>keterangan_gambar_disini</td>
    </tr>
  </tbody>
</table>

Gambar dengan Tata Letak Grid

Format penulisan:

<!--[ Gambar Grid ]-->
<div class='psImg grImg'>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
</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

Format penulisan:

<!--[ Tampilkan Semua Gambar ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Gambar tombol untuk mengaktifkan ]-->
    <label for='for-hideImage' aria-label='Tampilkan semua gambar'>Tampilkan Semua</label>
  </div>

  <!--[ Sembunyikan gambar lainnya disini ]-->
  <div class='psImg shImg'>
    <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Gambar dengan Tata Letak Gulir

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:

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

Gambar Lazyload

Format kode untuk gambar Lazyload telah diubah pada pembaruan minor berikutnya. Tidak disarankan untuk menggunakan format berikut.

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='judul_gambar_disini' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='judul_gambar_disini' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Posting Terkait Manual

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

Anda mungkin ingin membaca posting ini:

Format penulisan:

<div class='pRelate'>
  <!--[ Judul terkait ]-->
  <b>Anda mungkin ingin membaca posting ini :</b>

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

Posting Terkait Otomatis

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

Postingan Terkait

Format Penulisan:

<details class='sp toc' open=''>
  <summary data-show='Buka' data-hide='Tutup'>Postingan Terkait</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 contoh tampilannya:

Format penulisan:

<!--[ Untuk memisahkan paragraf ]-->
<hr>

Paragraf 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'>Paragraf_Anda_disini.</p>

Paragraf dengan Drop cap

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.

— Anonim

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>

Kutipan Blok Sosial

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='Anonim'>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:

Peringatan!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 telah diatur responsif. Misalnya, jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak tata letak, tabel akan otomatis memiliki fungsi gulir.

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

Nama	Posisi	Kantor	Usia	Tgl Mulai	Gaji
Tiara Nur Rahmawati	Arsitek Sistem	Jakarta	61	25/04/2011	Rp. 3,208,000
Galih Suhendro	Akuntan	Semarang	63	25/07/2011	Rp. 1,707,500
Anton Congek	Penulis Teknis Junior	Bandung	66	12/01/2009	Rp. 860,000
Candra Kirana	Pengembang Javascript Senior	Jakarta	22	29/03/2012	Rp. 4,330,600
Ahmad Santoso	Akuntan	Semarang	33	28/11/2008	Rp. 1,627,000

Format penulisan:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Nama</th>
        <th>Posisi</th>
        <th>Kantor</th>
        <th>Usia</th>
        <th>Tgl Mulai</th>
        <th>Gaji</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiara Nur Rahmawati</td>
        <td>Arsitek Sistem</td>
        <td>Jakarta</td>
        <td>61</td>
        <td>25/04/2011</td>
        <td>Rp. 3,208,000</td>
      </tr>
      <tr>
        <td>Galih Suhendro</td>
        <td>Akuntan</td>
        <td>Semarang</td>
        <td>63</td>
        <td>25/07/2011</td>
        <td>Rp. 1,707,500</td>
      </tr>
      <tr>
        <td>Anton Congek</td>
        <td>Penulis Teknis Junior</td>
        <td>Bandung</td>
        <td>66</td>
        <td>12/01/2009</td>
        <td>Rp. 860,000</td>
      </tr>
      <tr>
        <td>Candra Kirana</td>
        <td>Pengembang Javascript Senior</td>
        <td>Jakarta</td>
        <td>22</td>
        <td>29/03/2012</td>
        <td>Rp. 4,330,600</td>
      </tr>
      <tr>
        <td>Ahmad Santoso</td>
        <td>Akuntan</td>
        <td>Semarang</td>
        <td>33</td>
        <td>28/11/2008</td>
        <td>Rp. 1,627,000</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.

Daftar Isi Manual

Daftar Isi

Gambar dengan Keterangan
Posting Terkait Manual
Jeda Posting
Kutipan blok

Dengan subjudul:

Judul_judul

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='judul'>Judul_Anda</h2>
    
<h3 id='subJudul'>Sub_Judul_1</h3>

Format penulisan:

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

    <!--[ Contoh ToC dengan subjudul ]-->
    <ol>
      <li><a href='#judul'>Judul_Anda</a>
        <ol>
          <li><a href='#subJudul'>Sub_Judul_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

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

Daftar Isi Semi Otomatis

Daftar Isi

Pilihan 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</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Penyorot Sintaks

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

<!--[ Ubah data-teks menjadi .html, .css, .js atau bahasa apa pun ]-->
<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, misalnya data-text='.css', data-text='.js', data-text='.php', dll.
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; menentukan tinggi maksimum sintaksis yang tidak diatur (otomatis), ubah nilai none menjadi, misalnya, 400px untuk menentukan tinggi maksimum sintaksis 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.

Penyorot Sintaks Berwarna Otomatis

Sintaks berikut secara otomatis disorot/diwarnai menggunakan Highlight.js

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

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

Kode untuk mewarnai sintaksis:

<!--[ Tambahkan classname hl untuk mewarnai sintaksis secara otomatis ]-->
<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 classname sesuai bahasanya. Misalnya, jika kodenya html, Anda harus menambahkan html atau language-html bersama dengan hl.

Sebagai Contoh:

<!--[ Tambahkan classname hl untuk mewarnai sintaksis secara otomatis ]-->
<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 di Kode Praformat Anda. Misalnya, Anda akan menambahkan , yang tidak akan lagi diblokir dengan warna biru.

Penyorot Sintaks Multifungsi

Kode_Anda_disini

Format Penulisan:

<!--[ Ganti data-teks dengan nama apa pun untuk ditampilkan, data-file dengan nama file, data-lang dengan ekstensi file, data-time dengan hitungan mundur dalam detik ]-->
<div class='pre pu notranslate' data-time='5' data-text='Format Penulisan Kotak Kode' data-file='Kotak Kode Tipografi' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Kode_Anda_disini</pre>
</div>

Penyorot Sintaks MultiTabs

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Halaman Contoh</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://preview.plusui.my.id/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://preview.plusui.my.id/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Kode Penulisan:

<div class='pre tb'>
  <!--[ Fungsi aktif ]-->
  <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'>
  <!--[ Judul/header ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Ubah atribut data-text='...' untuk mengganti judul ]-->
    <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>

  <!--[ Isi ]-->
  <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 menentukan 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.

Tampilkan / Sembunyikan

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 ditambahkan ke widget ini.

Spoiler: