All Typography and Writing Formats hand writing

Image with Caption and Auto Lightbox

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Image_Alt_Here' src='image_src.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Caption_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout

<!--[ Grid Image ]-->
<div class='gridImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Image with Show All Function

<!--[ Show All Image ]-->
<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  
  <div class='buttonImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'></label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='showImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
  </div>
</div>

Image with Scroll Layout

<!--[ Scroll Image ]-->
<div class='scrollImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</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.

<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Manual Related Post

Read also :

<div class='postRelated'>
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
    <li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
    <li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
  </ul>
</div>

Post Break

Fitur ini dapat anda gunakan untuk memisahkan paragraf atau untuk membuka bab baru dalam postingan, berikut contoh tampilannya:

'Useful for separating or spacing paragraphs, for example like this:

writing format:

<i class='separate'></i>

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.

<p class='textIndent'>Your_text_here</p>

Paragraph with Drop cap

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

<p><span class='dropCap'>Y</span>our_text_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.' data-en='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.'

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.' data-en='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>Your_text_here</blockquote>

// Another style

<blockquote class='style-1'>Your_text_here</blockquote>

Table

No	Column_1	Column_2	Column_3	Column_4	Column_5
1	Data_table_1	00.000.000	0.000.000	0.000.000	0.000.000
2	Data_table_2	00.000.000	0.000.000	0.000.000	0.000.000
3	Data_table_3	00.000.000	0.000.000	0.000.000	0.000.000
4	Data_table_4	00.000.000	0.000.000	0.000.000	0.000.000

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

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>
// Tags to add color
<i class='comment'>...</i>			= Grey
<i class='tag'>...</i>					= Red
<i class='blue'>...</i>					= Blue
<span>...</span>								= Green
<span class='block'>...</span>	= Block Blue

To write HTML, CSS or JS code in posts, Writing format:

<pre class='html'><code>Your_code_here</code></pre>

Writing syntax for CSS formatting:

<pre class='css'><code>Your_CSS_code_here</code></pre>

Writing syntax for JS formatting:

<pre class='js'><code>Your_JS_code_here</code></pre>

To deactivate Scroll function use the tag below:

<pre><code style='white-space:pre-wrap'>Your_JS_code_here</code></pre>

Show Hide Button

Spoiler:

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.

<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Show/hide Title ]-->
    <b>Spoiler: </b>
    <label for='spoiler-01'></label>
  </div>

  <!--[ Show/hide content ]-->
  <div class='spoilerContent'>
    <p>Your_content_here</p>
  </div>
</div>

Accordion / Toggle Menu

Accordion_first_title

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.' data-en='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.' data-en='Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Accordion_second_title
data-text='Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.' data-en='Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.'
Accordion_third_title
Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.

<!--[ Accordion start ]-->
<ul class='accordion'>
  <!--[ Accordion line 1 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu1' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu1'>
        <i class='accorIcon'></i>

     <!--[ Question ]-->
        <span>Accordion_first_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>
        <p>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.</p>

                <p>Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
      </div>
    </div>
  </li>

    <!--[ Accordion line 2 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu2' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu2'>
        <i class='accorIcon'></i>

                <!--[ Question ]-->
        <span>Accordion_second_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.</div>
    </div>
  </li>

    <!--[ Accordion line 3 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu3' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu3'>
        <i class='accorIcon'></i>

        <!--[ Question ]-->
        <span>Accordion_third_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.</div>
    </div>
  </li>
</ul>

Note Block

data-text='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.' data-en='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.'

'Warning!'>data-text='Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.' data-en='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'>Yout_text_here</p>

// Another style

<p class='note noteAlert'>Yout_text_here</p>

External Link

Sample_external_link
Sample_link_alt

<a class='extLink' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>

<a class='extLink alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button_Link

Standard_button
Download
Download
Demo
Buy now
Whatsapp me

<a class='button' href='#'>Standard_button</a>
<a class='button' href='#'><i class='icon download'></i>Download</a>
<a class='button outline' href='#'><i class='icon download'></i>Download</a>
<a class='button' href='#'><i class='icon demo'></i>Demo</a>
<a class='button' href='#'><i class='icon cart'></i>Buy now</a>
<a class='button whatsapp' href='#'><i class='icon whatsapp'></i>Whatsapp me</a>

Two buttons in a row

Download Demo

<div class='buttonInfo'>
  <a class='button' href='#'><i class='icon download'></i>Download</a>
  <a class='button outline' href='#'>Demo</a>
</div>

Download Link

file_name 200kb

<div class='downloadInfo'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>

    <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

Lazy Youtube

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='p5MY9CY5MOk'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Change the part marked with Youtube video embed code which you can copy from Youtube video url, for example:youtube.com/watch?v=p5MY9CY5MOk, 'p5MY9CY5MOk' is video embed code in question"

Post Reference

Referensi:
jagodesain.com

<p class='postReference'>Referensi:<br> www.jagodesain.com</p>

lite UI demo