All Typography, Writing Formats and Other Additional Features

Most of these features can only be used in 'HTML View' mode, nor can you switch to 'Writing view' mode while using some of these features.

  1. In post editor view, click icon at the bottom right of the title
  2. Two options will appear: HTML view and Writing view
  3. Select ' HTML View'.

Tips
Use <p>Your_paragraph_here</p> tag to add paragraphs to the article.

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.

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

Tips
Gunakan tag <p>Your_paragraph_here</p> untuk menambahkan paragraf pada artikel.

Image : Caption and Auto Lightbox

Standard Image (without lightbox)

All Typography and Format Posts
<img alt="image_title_here" class="full" src="https://4.bp.blogspot.com/.../name.png"/>

Added class='full' works to remove margin image and screen, only works for mobile view.

Menambahkan class='full' berfungsi untuk menghilangkan jarak batas antara gambar dan layar, hanya berfungsi untuk tampilan seluler.

Image with lightbox + caption (from img alt attribute)

All Typography and Format Posts
<div class="lbx"><img alt="image_title_here" class="full c" src="https://4.bp.blogspot.com/.../name.png"/></div>
  • All images in the post will automatically have a lightbox function provided they are in the container element ('.lbx > img, .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator. >img, .pS .tr-caption-container td >img, .pS .psImg >img, .pS .btImg >img, .galWrp > img') and the img tag doesn't have class n.
  • Added class c the img tag serves to display the alt img attribute value as a lightbox caption. And adding sz class on the img tag serves to change the image size when the lightbox is loaded or the image is clicked.
  • Semua gambar dalam postingan akan otomatis memiliki fungsi lightbox dengan catatan berada dalam elemen kontainer atau pemilih ('.lbx > img, .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, .pS .psImg >img, .pS .btImg >img, .galWrp > img') dan tag img tidak memiliki class 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.

Image with caption (in table tags)

All Typography and Format Posts
All images in the post will automatically have a lightbox function, click this image to try it.
Semua gambar dalam postingan akan otomatis memiliki fungsi lightbox, klik gambar ini untuk mencobanya.
<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

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara
<!--[ 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

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara
<!--[ 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>

'Show All' function can only be clicked once, image cannot be hide again when you have activated it.

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


Image with Scroll Layout

Scroll Layout Type 1

Lighbox image without caption Lighbox image with caption lighbox image with by resizing Disable lightbox image Google Chrome: Fast & Secure Google Chrome: Fast & Secure Google Chrome: Fast & Secure Google Chrome: Fast & Secure Google Chrome: Fast & Secure
<!--[ Scroll Image Type 1]--><div class="galWrp">    <img alt="Lighbox image without caption" src="https://4.bp.blogspot.com/.../name.jpg"/>    <img class="c" alt="Lighbox image with caption" src="https://4.bp.blogspot.com/.../name.jpg"/>    <img class="c sz" alt="lighbox image with by resizing" src="https://4.bp.blogspot.com/.../name.jpg"/>    <img class="c sz n" alt="Disable lightbox image" src="https://4.bp.blogspot.com/.../name.jpg"/>    <img class="c sz" alt="Google Chrome: Fast & Secure" src="https://4.bp.blogspot.com/.../name.jpg"/></div>

You can change the height of the Scroll Image by adding a class h150 / h200 / h250.

Kamu bisa menggubah ukuran tinggi Scroll Image dengan menambahkan class h150 / h200 / h250.

<div class="galWrp">  ....  ....  ....</div>
<div class="galWrp h150">  ....  ....  ....</div>

Scroll Layout Type 2

Added scrolling function on images that will only be active in mobile view.

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

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
<!--[ Scroll Image Type 2]--><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

This feature is useful for increasing PageSpeed score of blog, loading images will be delayed until user scrolls the page to image area.

Also use <noscript> to display the image when user disable javascript on their browser.

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

Gunakan juga <noscript> untuk tetap menampilkan gambar ketika javascript dinonaktifkan pengguna.

<!-- Lazy Image --><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><!-- lazyLoad auto default image unless not the first image--><img alt='image_title_here" src='https://4.bp.blogspot.com/.../name.png"/>

All images in the post will automatically lazyLoad, except for the first image

Semua gambar dalam postingan akan otomatis menjadi lazyLoad, terkecuali untuk gambar yang pertama


Manual Related Post

<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

It is important to note that this feature is written manually, it does not automatically appear on every page.

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

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

Post Break

Can be used to separate paragraphs or create a new chapter in a post, an example of how it looks can be seen in this post.

Dapat digunakan untuk memisahkan paragraf atau membuat bab baru dalam postingan, contoh tampilannya bisa dilihat pada postingan ini.

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

Paragraph with Text Indent

This feature is used to make the first line of a paragraph indent with a predetermined value. You can also apply it to several other paragraphs.

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">Your_paragraph_is_here.</p>

Paragraph with Drop Cap

A large capital letter used as decorative element in the first paragraph, the size is usually two lines or more.

Drop cap will resize the first letter so that it drops one or more lines down. Many types of media print use drop caps such as books, magazines, newspapers and others because they can add visual appeal.

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 tari visual.

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

Other styles you can use:

Gaya lain yang dapat Anda gunakan:

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

Used to add important info, warning sentences or highlight sentences. There are two styles you can try:

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

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>

With different colors:

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

Automatically has a scroll function when column length exceeds width of the viewport/screen area. Using tables is a bit more complicated in HTML, we recommend that you learn more about HTML tables before using them.

Sample table with real data:

Otomatis memiliki fungsi gulir ketika panjang kolom melebihi dari lebar area layar. Penggunaan tabel sedikit lebih rumit pada HTML, kami merekomendasikan Anda untuk mempelajari lebih lanjut tentang table HTML sebelum menggunakannya.

Contoh tabel dengan data riil:

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 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; specifies the text to be a single line, it will not wrap to the next line and will continue until <br> tag is encountered.
  • min-width:100%; defines the minimum width of table, you can change it to px units for example 500px. Change it to 0 if you want the table width to be determined automatically.
  • white-space:nowrap; menentukan teks agar menjadi satu baris tunggal, teks tidak akan terbungkus ke baris berikutnya dan akan terus berlanjut sampai tag <br> ditemukan.
  • min-width:100%; mendefinisikan lebar minimal tabel, Anda bisa menggantinya menjadi satuan px misal 500px. Ubah menjadi 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Manual Table of Content

Contents

Using manual Table of Content is more complicated than the automatic version, you have to add a different ID attribute in each heading tag and write it in content list.

This is an example of heading tag with custom ID:

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

Ini adalah contoh tag heading 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>

Writing the correct content list:

Penulisan daftar konten yang benar:

<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>
  • Remove open="" attribute to auto-close Table of Content when the page is first loaded.
  • You can change the title or phrase 'Show all/Hide all' in the marked section.
  • Hapus atribut open="" untuk menutup otomatis Table of Content ketika laman pertama kali dimuat.
  • Anda bisa mengganti judul atau kalimat 'Show all/Hide all' pada bagian yang sudah ditandai.

Semi-automatic Table of Content

Table of Contents

The easiest option to display Table of Content. This feature will display all heading tags in your post (three levels h2 - h4), so make sure you write heading tags in order. Read: Common Error

Code to specify semi-automatic ToC widget location:

Pilihan termudah untuk menampilkan Table 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. Baca: Common Error

Kode untuk menentukan letak 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="toContent"></div></details>

Add class s1 to change the disc style list

Tambahkan class s1 untuk mengubah style list disc

<details class="sp toc">......</details>
<details class="sp toc s1">......</details>

Add a number or symbol/marker to the Heading

Menambahkan nomor atau simbol/marker pada Heading

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

Replace the number in the data-text attribute according to the order of the heading tags.

Ganti nomor pada atribut data-text sesuai urutan tag heading tersebut.

Hiding Headings in Table of Content

Menyembunyikan Heading di Table of Content

<h2>Title_here</h2>
<h2 class="n">Title_here</h2>

Syntax Highlighter

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

Digunakan untuk mendefinisikan baris kode komputer (HTML, CSS, Javascript, etc.) dalam postingan.

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

Addition of color code in the syntax can be written manually, but we also provide automatic colored syntax features.

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

  • Change data-text='.html' to define another code format, i.e. data-text='.css', data-text='.js', data-text='.php', etc
  • Value white-space:pre-wrap; useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible.
  • max-height:none; defines the maximum height of syntax isn't set (automatic), change the value of none to eg 400px to specify the maximum height of syntax is only 400 pixels.
  • Use <i class='red'>code_here</i> to add red/orage color.
  • Use <i class='blue'>code_here</i> to add blue color.
  • Use <i class='green'>code_here</i> to add green color.
  • Use <i class='gray'>code_here</i> to add gray color.
  • Use <i class='block'>code_here</i> to add a block of blue color.
  • Ubah data-text='.html' untuk mendefinisikan format kode lain, yaitu data-text='.css', data-text=' .js', data-text='.php', dll
  • Nilai white-space:pre-wrap; berguna untuk menonaktifkan side scrolling, kode panjang akan dipertahankan dan memberikan sedikit fungsi scrolling agar tetap terbaca.
  • max-height:none; mendefinisikan tinggi maksimum sintaks tidak diatur (otomatis), ubah nilai none menjadi misalnya 400px untuk menentukan tinggi maksimum sintaks hanya 400 piksel.
  • Gunakan <i class='red'>code_here</i> untuk menambahkan warna merah/oranye.
  • Gunakan <i class='blue'>code_here</i> untuk menambahkan warna biru.
  • Gunakan <i class='green'>code_here</i> untuk menambahkan warna hijau.
  • Gunakan <i class='gray'>code_here</i> untuk menambahkan warna abu-abu.
  • Gunakan <i class='block'>code_here</i> untuk menambahkan blok warna biru.

Automatic Colored Syntax Highlighter

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

This feature automatically detects the language and highlights the color. But in some cases, your code snippet may not match the language you want to display. That's because there are several code languages that have the same spelling.

For that you must add the class name according to the code language you want to display, such as html, you must add the language-html class along with the hljs class.

Fitur ini secara otomatis mendeteksi bahasa dan menyorot warna. Namun dalam beberapa kasus, mungkin potongan kode Anda tidak sesuai dengan bahasa yang ingin anda tampilkan. Itu karena ada beberapa bahasa kode memiliki penulisan yang sama.

Untuk itu Anda harus menambahkan nama class sesuai bahasa kode yang ingin ditampilkan, seperti html, Anda harus menambahkan class language-html bersama dengan class hljs.

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

Restrictions on using Syntax Highlighter Color Auto :
You cannot add any tags in preformatted code. For example, you would add , which will no longer be blocked in blue.

Batasan penggunaan Penyorot Sintaks Berwarna Otomatis :
Anda tidak dapat menambahkan tag apa pun di kode yang diformat sebelumnya. Misalnya, Anda akan menambahkan , yang tidak lagi akan diblokir dengan warna biru.


Tools Parse Syntax Highlighter

If you are having trouble creating Syntax Highlighter content, then using HLJS Tools is a good choice. We have provided a special Syntax Highlighter parse tool, you can use it here : HLJS Tools.

Jika Anda mengalami kesulitan untuk membuat konten Penyorot Sintaks, maka menggunakan HLJS Tools merupakan pilihan yang tepat. Kami sudah menyediakan alat parse Syntax Highlighter khusus, Anda bisa menggunakannya disini : HLJS Tools.

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://apmody.blogspot.com/","name": "Median UI","alternateName": "Median UI","potentialAction": {"@type": "SearchAction","target": "https://apmody.blogspot.com/search?q={search_term_string}","query-input": "required name=search_term_string"}}
<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>
  • The checked attribute defines the first tab that appears by default.
  • Make sure id='...' and for='...' attributes have the same value. ID must be unique, there cannot be two identical IDs in one page.
  • Change data-text='HTML' attribute in the highlighted section to rename the tab.
  • 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 sama dalam satu halaman.
  • Ubah atribut data-text='HTML' pada bagian yang ditandai untuk mengganti nama tab.

Toggle Show/Hide

Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button.

Any content can be included in this widget.

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

Segala konten dapat dimasukkan ke dalam widget ini.

Spoiler:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<details class="sp"><summary data-show="Show all" data-hide="Hide all">Spoiler:</summary><p>Your_text_is_here.</p></details>

Toggle Content or Accordion

Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).

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_first_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_second_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_third_title (alt)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_fourth_title (alt)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<!--[ Accordion start ]--><div class="showH"><!--[ Accordion line 1 ]--><details class="ac"><summary>Title_is_here</summary><div class="aC">  <p>Your_text_is_here.</p></div></details><!--[ Accordion line 2 ]--><details class="ac alt"><summary>Title_is_here</summary><div class="aC">  <p>Your_text_is_here.</p></div></details>......</div>
  • Use the classname alt (marked in the code above) to change the icon style.
  • The number of accordion widgets you can add is unlimited.
  • Gunakan classname alt (ditandai pada kode di atas) untuk mengubah gaya icon.
  • Jumlah widget accordion yang bisa Anda tambahkan tidak terbatas.

External Link

Notifies users if the link will lead to another site.

Memberitahu pengguna jika link tersebut akan menuju ke situs lain.

Sample_external_link
<a class="extL" href="url_is_here" rel="noreferrer" target="_blank">Title_link</a>

Button Link

Defines a clickable button.

Mendefinisikan tombol yang dapat di klik oleh pengguna.

Button
<a class="button" href="url_is_here">Title_link</a>

Alternative style:

Button
<a class="button ln" href="url_is_here">Title_link</a>

With icons:

Download
Demo
<a class="button" href="url_is_here"><i class="icon dl"></i>Title_link</a><a class="button" href="url_is_here"><i class="icon demo"></i>Title_link</a>

with <svg> icons:

WhatsApp me!
Buy now!
<a class="button" href="url_is_here"><svg viewBox="0 0 64 64" style='fill:#fff; margin-right:12px;'><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"/></svg><span>WhatsApp me!</span></a><a class="button" href="url_is_here"><svg class="line" viewBox="0 0 24 24" style='stroke:#fff; margin-right:12px;'><g transform="translate(2.000000, 2.500000)"><path d="M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989"></path><line x1="12.1251" y1="8.2948" x2="14.8981" y2="8.2948"></line><path d="M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z"></path><path d="M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z"></path></g></svg><span>Buy now!</span></a>

Add style='fill:#fff; margin-right:12px;' or style='stroke:#fff; margin-right:12px;' attribute to give SVG icon a white color.

Penting!
Tambahkan atribut style='fill:#fff; margin-right:12px;' atau style='stroke:#fff; margin-right:12px;' untuk memberikan warna putih pada icon SVG.

Two button in single line:

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

Download Link

To provide downloaded file information to users.

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="url_is_here" rel="noreferrer" target="_blank"><i class="icon dl"></i></a></div>

With background image instead of text:

about_me.png 10kb
<div class="dlBox"><!--[ Change data-text='...' atribute to add new file type ]--><span class="fT lazy" data-text="zip" data-style="background-image: url(//3.bp.blogspot.com/.../title.png)"></span><div class="fN"><!--[ File name ]--><span>about_me.png</span><span class="fS">10kb</span></div><!--[ Download link (change href='...' atribute to add link download) ]--><a class="button" aria-label="Download" href="url_is_here" rel="noreferrer" target="_blank"><i class="icon dl"></i></a></div>

Lazy Youtube

Useful to delay loading Youtube videos after user scrolls the page.

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>

Delaying iframe loading with defer.js function:

Menunda pemuatan iframe dengan fungsi defer.js:

<!--[ Lazysize iframe ]--><div class="videoYt"><iframe title="Lazy Iframe" class="lazy" data-src="//www.youtube.com/embed/xxxxxxxxxxx" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  • Change the section marked with ID Youtube video you want to display.
  • The video ID can be found in Youtube video url, for example: youtube.com/watch?v=p5MY9CY5MOk.
  • Ubah bagian yang ditandai dengan ID video Youtube yang ingin Anda tampilkan.
  • ID video dapat ditemukan di url video Youtube, misal: youtube.com/watch?v=p5MY9CY5MOk.

Post Reference

To write a list of references or footnotes below the post

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

To change Header Subtitle in particular post or page.

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>

Audio Book Player

Audio Player that can be used to play songs using audio files, i.e. MP3.

Audio Player yang dapat digunakan untuk memutar lagu menggunakan file audio yaitu MP3.

<div id='AudioBookPlayer'></div><script>/*<![CDATA[*//* List Audio Player */const arBookPlayer = {  pos_fixed: false, //to enable fixed position, boolean value true or false  repeat_count: 1, //how many times the audio is played back  title: "APMODY Audio Book Player",  list_audio: [    {//list 1      name: "audio_title",      cover: "image_file_url", //ex: "https://raw.githubusercontent.com/.../name.jpg"      source: "mp3_file_url", //ex: "https://raw.githubusercontent.com/.../name.mp3"      artist: "artist_names",      duration: "mp3_file_duration", //ex: "00:03:52"      desc: "description" //ex: "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...<p>"    },    {//list 2      name: "audio_title",      cover: "image_file_url", //ex: "https://raw.githubusercontent.com/.../name.jpg"      source: "mp3_file_url", //ex: "https://raw.githubusercontent.com/.../name.mp3"      artist: "artist_names",      duration: "mp3_file_duration", //ex: "00:03:52"      desc: "description" //ex: "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...<p>"    },    {//list 3      name: "audio_title",      cover: "image_file_url", //ex: "https://raw.githubusercontent.com/.../name.jpg"      source: "mp3_file_url", //ex: "https://raw.githubusercontent.com/.../name.mp3"      artist: "artist_names",      duration: "mp3_file_duration", //ex: "00:03:52"      desc: "description" //ex: "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...<p>"    },    // add another...  ]};/*]]>*/</script>
Content Creator, Graphic Designer, UI / UX Designer, Newbie Programmer

My notes on blogger: ARUF.my.id

قد تُعجبك هذه المشاركات

3 تعليقات

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


  1. comment test..
  2. Posso instalar esse player de música em outro blog?
  3. Where is the music player installed?
Google Translate
Bookmark Post