All Style, Text and Writing Formats and Other Additional Features
Table of Content
Please note that some styles can be used directly in ‘Writing view’ mode and some can only be used in ‘HTML View’ mode but we still try to make their use as easy for you as possible.
Image with Caption
For this section, you can use it directly in ‘TEXT’ mode, the caption in this image will not be read in the article description/snippet.
 |
| Sample Captions. |
<table class="tr-caption-container">
<tbody>
<tr>
<td>
<div class="zmImg"><img alt="All Style Typography and Format Posts" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOxVQsFGuimssYCoHwwwDXVxGDIIcTnpxPT1zfCBvWWYHxPlCZLgTq1vYNOXKv-fjaEh364dbvsSoquUL7qxTbE5SUu94OyP8oKXgnOXE2HLiWW45j30ajKV-qNK8A3dYoc8s1RS5pGE/s0/imagz-all-style.png" /></div>
</td>
</tr>
<tr>
<td class="tr-caption">Sample Captions.</td>
</tr>
</tbody>
</table>
Image with Grid Layout
<div class='psImg grImg'> <img alt="Your Title" src="#your_image_link" /> <img alt="Your Title" src="#your_image_link" /> <img alt="Your Title" src="#your_image_link" /> <img alt="Your Title" src="#your_image_link" /> </div>
Image with Scroll Layout
The same as the image layout above, only on the mobile display the images will be arranged parallel with the addition of a side scroll function on the mobile display.
We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:
<div class='psImg scImg scrlH'> <img alt="Your Title" src="#your_image_link" /> <img alt="Your Title" src="#your_image_link" /> <img alt="Your Title" src="#your_image_link" /> </div>
Manual Related Post
This Related Post feature automatically appears on every page.
Due to a problem with the Related Post in-Article script not working on IOS devices, we decided to change it to manual.
The advantage is that you can add it to any paragraph you want, the number of links is unlimited and you can change related titles, and all the links you add to this related article will also be indexed by search robots as referring pages.
<div class='pRelate notranslate'>
<b>Sample Title:</b>
<ul>
<li><a href='#your_link_post'>Sample Post One</a></li>
<li><a href='#your_link_post'>Sample Post Two</a></li>
<li><a href='#your_link_post'>Sample Post Third</a></li>
</ul>
</div>
Post Break
You can use this feature to separate paragraphs or to open a new discussion in a post, here is an example of what it looks like:
<hr>
Paragraph with Text Indent
This paragraph will have a first line indent, simply to make a sentence in the first paragraph indent with a predetermined value.
You can apply the feature to as many paragraphs as needed
<p class='textIndent'>Just Sampe text Here</p>
Paragraph with Drop cap
Drop cap It is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the down limit is usually two lines or more.
Drop cap changes the size of 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 visual appeal.
<span class='dropCap'>S</span>ample Text
Blockquote
Friend prices are prices that are higher than normal prices because the aim is to help friends who are starting a business
—Ivan Lanin
<blockquote><i>Friend prices are prices that are higher than normal prices because the aim is to help friends who are starting a business<br/><br/> —Ivan Lanin</i></blockquote>
Other style formats that you can use:
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 notranslate'>
<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>
Table
The tables in this theme have been set to support responsiveness, for example, if the number of columns or table width exceeds the screen width, 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 below:
| 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 style='white-space: nowrap;'>
<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>
Manual Table of Content
There are 2 options that you can use to add a table of content or table of contents to a post, the first manually and the second automatically.
For manual writing you have to add a new id=’ … ‘ attribute to each heading tag that you want to add to the table of contents, the advantage is that you can choose which tag you want to add even though Using it may be a little difficult for beginners.
This is an example of a manually created table of contents:
Contents
<details class='sp toc' open=''>
<summary data-show='Show all' data-hide='Hide all'>Contents</summary>
<div class='toC'>
<ol>
<li><a href='#image_with_caption_and_auto_lightbox'>Image with Caption</a></li>
<li><a href='#manual_related_post'>Manual Related Post</a></li>
<li><a href='#post_break'>Post Break</a></li>
<li><a href='#blockquote'>Blockquote</a></li>
</ol>
<p>With sub-heading</p>
<ol>
<li><a href='#heading_title'>Heading_title</a>
<ol>
<li><a href='#subheading_1'>Subheading_1</a></li>
<li><a href='#subheading_2'>Subheading_2</a></li>
<li><a href='#subheading_3'>Subheading_3</a></li>
</ol>
</li>
<li><a href='#heading_title'>Heading_title 2</a>
<ol>
<li><a href='#subheading_1'>Subheading_1</a></li>
<li><a href='#subheading_2'>Subheading_2</a></li>
<li><a href='#subheading_3'>Subheading_3</a></li>
</ol>
</li>
</ol>
</div>
</details>
Syntax Highlighter
This format is used to write lines of HTML code in posts, usually used on blogs with coding themes or blogging tutorials.
Here’s an example of what it looks like:
<!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>
You can also write the code <html> in a paragraph like this: <p>code</p>
<div class='pre html'>
<pre><i class='gray'><!DOCTYPE html></i>
<<i class='red'>html</i> dir='<i class='blue'>ltr</i>' lang='<i class='blue'>en</i>'>
<<i class='red'>head</i>>
<<i class='red'>title</i>><i class='block'>Sample Page</i></<i class='red'>title</i>>
</<i class='red'>head</i>>
<i class='gray'><!--[ <body> open ]--></i>
<<i class='red'>body</i>>
<<i class='red'>p</i>><i class='green'>Sample content here!</i></<i class='red'>p</i>>
</<i class='red'>body</i>>
<i class='gray'><!--[ </body> close ]--></i>
</<i class='red'>html</i>></pre>
</div>
Show Hide Button
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 notranslate'> <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>
Accordion / Toggle Menu
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
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>Accordion_first_title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='ac'>
<summary>Accordion_second_title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class='ac'>
<summary>Accordion_third_title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 4 ]-->
<details class='ac alt'>
<summary>Accordion_fourth_title (alt)</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
</div>
Note Block
This feature functions to add important information, 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 notranslate'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>
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 notranslate'><b>Warning!</b><br> 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>
External Link
If there are external links in the post, you can notify users by using this feature:
<a class='extL' href='#your_link'>Sample_external_link</a>
Button Link
<a class='button' href='#your_link'>Standard_button</a>
Available icons:
<a class='button' href='#your_link'><i class='icon demo'></i>Demo</a>
Note: You can also add other icons using <svg>
Two buttons in one bar:
<div class='btnF'> <a class='button ln' href='#your_link'>Demo</a> <a class='button' href='#your_link'><i class='icon download'></i>Download</a> </div>
Download Link
<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>
<a class='button' aria-label='Download' href='#your_link'><i class='icon download'></i></a>
</div>
Post Reference
To add a list of references to the article you wrote:
Referensi:
exthem.es
<p class='pRef'>Referensi:<br> exthem.es</p>
Comments