Style Tipografi dan Fomat Penulisan

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

Dalam tampilan editor posting, klik ikon dibawah kanan judul.
Akan muncul dua opsi : Tampilan HTML dan Tampilan Menulis
Pilih 'Tampilan HTML'.

Tambahan: gunakan Your_paragraph_here untuk menambahkan tag ke artikal postingan

Gambar dengan Keterangan dan Kotak Cahaya Otomatis

Keterangan pada gambar ini tidak akan terbaca dalam deskripsi/cuplikan artikel. Kamu juga dapat memilih untuk menjaga agar teks tetap terbaca pada cuplikan artikel.

Semua gambar dalam posting akan secara otomatis memiliki fungsi lightbox, klik gambar ini untuk mencobanya.

Tambahkan class='full' berfungsi untuk menghapus gambar dan layar margin, hanya berfungsi untuk tampilan seluler.

Penulisan format :

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

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 menamilkan tampilan semua gambar

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika pengguna mengklik tombol 'Tampilkan Semua'. Tampilkan Semua fungsi hanya dapat diaktifkan sekali, Gambar tidak dapat disembunyikan lagi saat kamu mengaktifkannya.

Show All

Penulian format :

<!--[ 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 Tata Letak Gulir

Sama seperti layout gambar di atas, hanya saja pada tampilan mobile gambar akan disusun secara paralel dengan fungsi side scroll tambahan pada tampilan seluler

Kami juga menambahkan efek gulir halus ke fitur ini. Silakan coba buka halaman ini di perangkat seluler kamu:

Penulisan Format

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

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. All images in this article use Lazyload.

Writing format:

<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

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

You may want to read this post :

Writing format:

<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

Writing Format:

<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

You can use this feature to separate paragraphs or to open a new chapter in a post, here's an example of how it looks:

Writing format:

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

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

Writing format:

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

Paragraph with Drop cap

Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

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

Writing format:

<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

Writing format:

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

Another Style:

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.

Writing Format:

<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

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>

With Different Colors:

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

The table in this theme has been set responsive, for example, if the number of columns or the width of the table exceeds the width of the screen, so as not to damage the layout, the table will automatically have a scroll function.

Please open this article on your mobile device and highlight the table section below:

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

Writing format:

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

Manual Table of Content

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading:

Heading_title

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:

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

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

Writing format:

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

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:

<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

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

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

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 code_here to add red/orage color.
Use code_here to add blue color.
Use code_here to add green color.
Use code_here to add gray color.
Use code_here to add a block of blue color.

Automatic Colored Syntax Highlighter

Following Syntax is automatically highlighted / colored using 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>

Code to color syntax:

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

Common Errors:

This feature automatically detect the language and highlight the colors. But in some cases, it may not automatically detect the code language, at that time you have to add a classname as per the language, i.e. if it is html, you have to add html or language-html along with hl.

An Example:

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

Limitations of using Automatic Colored Syntax Highlighter:

You cannot add any tag in your Preformatted Codes. For example, you would add , that is no more going to be blocked with blue color.

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:myblog.dulpanadisaragih.com/",
  "name": "MyBlog",
  "alternateName": "MyBlog",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://myblog.dulpanadisaragih.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Writing Code:

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

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.

Spoiler: