All Typography, Writing Formats and Other Additional Features

Sebagian besar fitur ini hanya bisa digunakan dalam mode 'Tampilan HTML', Anda juga tidak bisa berganti ke mode 'Tampilan menulis' selama menggunakan beberapa fitur ini.

Pada tampilan editor postingan, klik ikon yang ada pada bagian kanan bawah judul,
akan muncul 2 pilihan: Tampilan HTML dan Tampilan menulis,
pilih '' Tampilan HTML.

Daftar isi

Paragraf

Gunakan tag p untuk menambahkan paragraf pada artikel.

<!-- paragraph -->
<p>contoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraf dengan Text Indent

Fitur ini berfungsi untuk membuat sebuah baris pertama pada paragraf memiliki indentasi dengan nilai yang sudah ditentukan. Anda juga bisa menerapkannya ke beberapa paragraf lain.

<p class="pIndent">contoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraf dengan Drop Cap

Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf, ukuran biasanya adalah dua baris atau lebih.

Drop cap akan mengubah ukuran huruf pertama sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tarik visual.

<p><span class="dropCap">C</span>ontoh paragraf, lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Gambar

Format postingan gambar:

Caption gambar dan lightbox otomatis

Gambar Standar (tanpa lightbox).

<img alt="judul_gambar" class="full" src="tautan_gambar" />

Menambahkan className full pada tag img berfungsi untuk menghilangkan jarak batas antara gambar dan layar, hanya berfungsi untuk tampilan seluler.

Gambar dengan lightbox + caption (dari atribut alt tag img).

<div class="lbx">
  <img alt="judul_gambar" class="full c sz" src="tautan_gambar"/>
</div>

Keterangan:

Semua gambar dalam postingan akan otomatis memiliki fungsi lightbox dengan catatan parentElement memiliki salah satu className lbx, separator, psImg, btImg, galWrp. Atau selector : .pS .tr-caption-container td > a, .pS .tr-caption-container td > img. Dan tag img tidak memiliki className n.
Menambahkan class c pada tag img berfungsi untuk menampilkan attribute value alt img sebagai caption lighbox.
Dan menambahkan class sz pada tag img berfungsi untuk mengubah ukuran gambar saat lighbox diload atau gambar diklik.

Gambar dengan caption dalam tag table.

descripksi - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae numquam quaerat voluptatibus.

<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <img alt="judul_gambar" class="full" src="tautan_gambar"/>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">caption_gambar</td>
    </tr>
  </tbody>
</table>

Gambar dengan Tata Letak Grid

<!--[ Grid Image ]-->
<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>

Gambar dengan fungsi tampilkan semua

Tampilkan Semua

<!--[ Show All Image ]-->
<input class="inImg hidden" id="for-hideImage" 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">
    <img alt="judul_gambar" src="tautan_gambar"/>

    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all image">tampilkan semua</label>
  </div>

  <!--[ Hide the rest image 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>

Fungsi 'Show All' hanya bisa di klik satu kali, gambar tidak bisa disembunyikan kembali ketika Anda sudah mengaktifkannya.

Gambar dengan Tata Letak Gulir

Gulir Tata Letak - Tipe 1.

<!--[ Scroll Image Type 1]-->
<div class="galWrp">
  <img alt="lighbox gambar tanpa caption" src="tautan_gambar"/>
  <img class="c" alt="lighbox gambar dengan caption" src="tautan_gambar"/>
  <img class="c sz" alt="lighbox dengan mengubah ukuran gambar" src="tautan_gambar"/>
  <img class="c sz n" alt="gambar tanpa lighbox" src="tautan_gambar"/>
  <img class="c sz" alt="judul_gambar" src="tautan_gambar"/>
</div>

Anda bisa menggubah ukuran tinggi Scroll Image dengan menambahkan salah satu className: h150 / h200 / h250, di element div.galWrp.

Gulir Tata Letak - Tipe 2.

Menambahkan fungsi gulir pada gambar yang hanya akan aktif di tampilan seluler.

<!--[ Scroll Image 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 Gambar

Fitur ini berguna untuk meningkatkan skor PageSpeed blog, pemuatan gambar akan ditunda sampai pengguna menggulir halaman ke area gambar tersebut.

<!-- Lazy Image -->
<img class="lazy" alt="judul_gambar" data-src="tautan_gambar" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

Keterangan:

className lazy adalah nama class sebagai selector element lazyLoad.
nilai dari attributeName data-src, merupakan source atau tautan dari gambar.
jika menggunakan lazyLoad, nilai dari attributeName src menjadi opsional. karena nanti otomatis akan diubah nilainya dengan attributeName data-src

Semua gambar dalam postingan akan otomatis menjadi lazyLoad, terkecuali untuk gambar yang pertama. Jadi anda bisa menulis tag img seperti biasa. Dan jika tidak ingin menggunakan lazyLoad, Anda bisa menambahkan className nolazy pada tag img.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <span>Anonymous</span>
</blockquote>

Jika Anda bosan dengan tampilan blockquote standar, kami memberikan 2 style lain. Tambahkan className: s1 atau s2 pada tag blockquote.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Anonymous

Note Block

Digunakan untuk menambahkan info penting, kalimat warning atau kalimat sorotan. Ada dua style yang bisa anda coba:

Info!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum rem quisquam deserunt quaerat, labore ipsum ab. Vel perspiciatis distinctio cumque.

<p class="note"><b>Info!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad iusto totam animi?
</p>

Dengan warna berbeda:

Warning!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur veniam nemo blanditiis laboriosam dolorum amet aliquid? Minus reiciendis voluptatem possimus.

<p class="note wr"><b>Warning!</b><br/>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod atque sequi dolorem.
</p>

Alert

Sama seperti Note Block, hanya saja Alert memiiki style yang lebih bervariasi:

Default A simple default alert - Lorem ipsum dolor sit amet.

Outline A simple outlined alert - Lorem ipsum dolor sit amet.

<!-- alert default -->
<div class="alert"><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

<!-- alert outline -->
<div class="alert outline"><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

Success! A simple success alert - Lorem ipsum dolor sit amet.

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!-- alert variant with solid background -->
<div class="alert info"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert error"><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

Success! A simple success alert - Lorem ipsum dolor sit amet.

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!-- alert variant with outline -->
<div class="alert info outline"><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert warning outline"><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert success outline"><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

<div class="alert error outline"><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Tabel

Penggunaan tabel sedikit lebih rumit pada HTML, kami merekomendasikan Anda untuk mempelajari lebih lanjut tentang table HTML sebelum menggunakannya. Berikut contoh tabel dengan data:

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

<div class="table">
  <table>
    <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>
    </tbody>
  </table>
</div>

Untuk style tabel Anda bisa menambahkan className pada tag table, diataranya:

cborder : border untuk kontainer tabel.
bordered / noborder (pilih salah satu) : border konten tabel.
clr / primary / warning / success / error : background heading tabel.
stripped : style stripped baris tabel.
hovered : hover baris tabel.
mh100 / mhvh / mh200 / mh300 : maxHeight tabel.
sticky : sticky header tabel.
sp5 / sp10 / sp20 : padding konten tabel.

Tabel of Content

Fitur ini akan menampilkan semua tag heading dalam postingan Anda (tiga tingkat h2 - h4), untuk itu pastikan Anda menulis tag heading secara berurutan. Lihat contoh dihalaman ini.

Kode untuk menentukan letak widget ToC:

<details class="sp toc">
  <summary>Daftar isi</summary>
  <div class="toC" id="toContent"></div>
</details>

Tambahkan className s1 pada tag details untuk mengubah style list disc

Menambahkan nomor atau simbol/marker pada Heading:

<!-- sebelum -->
<h2>Title_here</h2>

<!-- setelah ditambahkan -->
<h2 class="h" data-text="1. ">Title_here</h2>

Keterangan:

className untuk penomoran heading.
ubah nilai attributeName data-text untung mengubah nomor atau simbol.

Untuk menyembunyikan heading di Table of Content, Anda bisa menambahkan className n pada tag heading.

Syntax Highlighter

Digunakan untuk mendefinisikan baris kode komputer seperti (HTML, CSS, Javascript, dll.) dalam postingan. Berikut format kodenya:

<div class="pre notranslate" data-text="html" data-tx="deskripsi">
  <pre>kode_disini</pre>
</div>

Keterangan:

mendefinisikan format kode
sebagai judul atau deskripsi kode
kode yang sudah diparse.

Untuk membuat post kode / Syntax Highlighter, Anda bisa dengan mudah menggunakan HLJS Tools.

MultiTabs Syntax Highlighter

[HTML] kode_disini

[CSS] kode_disini

[JS] kode_disini

<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>[HTML] kode_disini</pre>
  </div>
  <div class="preC-2">
    <pre>[CSS] kode_disini</pre>
  </div>
  <div class="preC-3">
    <pre>[JS] kode_disini</pre>
  </div>
</div>

Keterangan:

pastikan atrributeName id dan for memiliki nilai yang sama, dan satu halaman tidak boleh lebih dari satu ID.
attributeName checked mendefinisikan tab pertama yang muncul sebagai default.
ganti nilai attributName data-text sesuai judul tab.
className kontainer kode harus memiliki format nama C-* (* = nomor urut).
kode yang sudah diparse.

Collapse

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

Spoiler:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quo aliquid praesentium est dolores molestias. Nobis porro corrupti necessitatibus ipsa.

<details class='sp'>
  <summary>judul_disini</summary>
  <p>konten_disini</p>
</details>

Keterangan:

sebagai judul konten collapse.
kamu bisa menggunakan konten apapun. dan pastikan kode berada dibawah tagName summary.

Untuk membuat konten Collapse secara default terbuka, Anda bisa menambahkan attributeName open pada tag details.

Accordion

Menentukan konten tambahan yang dapat dibuka dan tutup pengguna sesuai permintaan dalam beberapa kelompok, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Accordion_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi vero dolorem nesciunt eum ipsa corrupti recusandae provident aspernatur debitis unde.

<details class="ac">
  <summary>judul_disini</summary>
  <div>
    <p>konten_disini</p>
  </div>
</details>

Accordion_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, delectus! Vel, voluptatem aut atque placeat illo velit fugiat delectus possimus.

Tambahkan className alt pada tag details untuk alternatif icon summary seperti contoh accordion diatas. Dan untuk membuat accordion secara default terbuka, Anda bisa menambahkan attributeName open pada tag details.

Jika ingin mengelompokkan atau membuat group accordion, Anda bisa membungkus konten accordion dengan kontainer element div.showH. Contohnya seperti dibawah ini:

Accordion_first_title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos illum officiis blanditiis quam maiores totam.

Accordion_second_title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non culpa voluptates blanditiis, libero temporibus nihil.

Accordion_third_title (alt)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit possimus dicta officia exercitationem sequi veritatis.

Accordion_fourth_title (alt)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta pariatur mollitia officia sint nihil expedita.

<div class="showH">
  <!--[ Accordion ]-->
  <details class="ac">
    <summary>judul_disini</summary>
    <div>
      <p>konten_disini</p>
    </div>
  </details>

  <!--[ More accordions here ]-->
  <!-- <details class="ac"> ... </details>-->
</div>

Tautan Eksternal

Memberitahu pengguna jika link tersebut akan menuju ke situs atau halaman lain.

Contoh_Tautan_Eksternal

<a class="extL" href="tautan_disini" rel="noreferrer" target="_blank">judul_tautan</a>

Tautan Tombol

Mendefinisikan tombol yang dapat di klik oleh pengguna.

Button

<a class="button" href="tautan_disini">judul_tautan</a>

Alternatif style:

Button

<a class="button ln" href="tautan_disini">judul_tautan</a>

Dengan icon:

Download
Demo

<a class="button" href="tautan_disini"><i class="icon dl"></i>judul_tautan</a>
<a class="button" href="tautan_disini"><i class="icon demo"></i>judul_tautan</a>

Dua tombol dalam satu baris:

Demo Download

<div class="btnF">
  <a class="button ln" href="tautan_disini">Demo</a>
  <a class="button" href="tautan_disini"><i class="icon dl"></i>Download</a>
</div>

Tautan Unduh

Untuk memberikan informasi berkas yang diunduh kepada pengguna.

file_name.zip 200kb

<div class="dlBox">
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class="fS">200kb</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class="button" aria-label="Download" href="tautan_disini" rel="noreferrer" target="_blank"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Berguna untuk menunda pemuatan video Youtube setelah pengguna menggulir halaman.

<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="Youtube_video_ID">
  <div class="play">
    <svg viewbox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon> <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

Menunda pemuatan iframe dengan fungsi defer.js:

<!--[ Lazysize iframe ]-->
<div class="videoYt">
  <iframe title="Lazy Iframe" class="lazy" data-src="url_embed_iframe" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Referensi Posting

Untuk menuliskan daftar referensi atau catatan kaki di bawah postingan.

Source:
https://www.example.com

<p class="pRef">Source:<br> https://www.example.com</p>

Header Subtitle

Untuk mengubah Subtitle Header pada postingan atau halaman tertentu.

<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"Typography"}
/*]]>*/</style>

You may want to read this post :

How to Replace Blogger Comments
Replace or Add New Fonts
Guide to Adding Tab Function in Post

<div class="pRelate">
  <!--[ Related title ]-->
  <b>Anda mungkin ingin membaca posting ini :</b>
  <ul>
    <li><a href="tautan_post">judul_post</a></li>
    <li><a href="tautan_post">judul_post</a></li>
    <li><a href="tautan_post">judul_post</a></li>
  </ul>
</div>

Auto Related Post

<details class="sp toc s1" open="">
  <summary>Related Post</summary>
  <div class="toC" id="aRel" data-label="Docs" data-mrst="7" data-sby="published"></div>
</details>

Keterangan:

judul related post
(opsional) : nama label untul related post, nilai defaultnya adalah random dari label postingan yang tersebut.
(opsional) : maksimal postingan yang akan ditampilkan, nilai defaultnya 6.
(opsional) : postingan diurutan berdasarkan tanggal published, nilai defaultnya updated.

1 komentar

Pesan komentar Media +

• Tinggalkan komentar sesuai dengan topik tulisan.
• Ceklis / Centang Beri Tahu Saya (Supaya saya langsung merespons)

Terima Kasih.......

Masukkan URL Gambar / Cuplikan Kode / Kutipan / tag nama, lalu klik tombol parse sesuai yang sudah anda masukkan. kemudian salin hasil parse dan tempelkan ke kolom komentar.

Aruf Yudhistiar Fahza 26 April, 2022 00:44

Hapus Komentar …

comment test..

Search Suggest

All Typography, Writing Formats and Other Additional Features

Paragraf

Paragraf dengan Text Indent

Paragraf dengan Drop Cap

Gambar

Caption gambar dan lightbox otomatis

Gambar dengan Tata Letak Grid

Gambar dengan fungsi tampilkan semua

Gambar dengan Tata Letak Gulir

lazyLoad Gambar

Blockquote

Note Block

Alert

Tabel

Tabel of Content

Syntax Highlighter

MultiTabs Syntax Highlighter

Collapse

Accordion

Tautan Eksternal

Tautan Tombol

Tautan Unduh

Lazy Youtube

Referensi Posting

Header Subtitle

Related Post

Auto Related Post

Anda mungkin menyukai postingan ini

1 komentar

Cookie Consent

Oops!

AdBlock Detected