Manual Related Post
<div class='postRelated'>
<!--[ Related title ]-->
<b>Read Also :</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
<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
<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.
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.
<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>
<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 the Scroll function use the tag below:<pre><code style='white-space:pre-wrap'>Your_JS_code_here</code></pre>
Show Hide Button
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.
Accordion / Toggle
-
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.
-
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.
-
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.
Note Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
// Another styleWarning!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
<p class='note'>Yout_text_here</p>
// Another Style
<p class='note noteAlert'>Yout_text_here</p>
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
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 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:
<div class='buttonInfo'>
<a class='button' href='#'><i class='icon download'></i>Download</a>
<a class='button outline' href='#'>Demo</a>
</div>
Download Link
<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>
Warning!
Change the part marked with Youtube video embed code which you can copy from Youtube video url, for example, https://youtu.be/LHvYrn3FAgI, 'LHvYrn3FAgI' is video embed code in question
Post Reference
Referensi:
https://itsthemeworld.blogspot.com/
<p class='postReference'>Referensi:<br> https://itsthemeworld.blogspot.com/</p>