Typography

Table of Contents

The majority of these functionalities can only be executed in 'HTML View' and for a few of them you cannot change back to 'Writing view'.

Bottom left of post editor view, click on the icon near the title
You will see there two options, HTML View, Writing View.
Select 'HTML View'.

Manual Related Post:-

You may want to read this post :

Writing format:

Replace '#' to your Post URL and replace your 'Your_post_title_here' to your Post title.

HTML Double tap to Copy

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

HTML Double tap to Copy

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

Paragrpah with drop cap:-

Ttis features allows the user to first letter is large and rest of all are small. like as you can see this paragraph the first letter is capital then average and rest of all are paragrpah.

Replace 'Y' to first letter of your paragraph and replace 'our_paragraph_is_here' to your full paragraph.

Writing format:

HTML Double tap to Copy

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Note Block:-

This features allow you to highlight your text.

HTML Double tap to Copy

<p class='note'>Your text here.</p>

Warning:-

This is a sample warning text.

Writing format:

HTML Double tap to Copy

<p class='note wr'>Write your text here.</p>

Table:-

In the table section, you just need to change 'th' according to your needs. you can add and remove any columns you want. if you want to add new column just copy code from tr tag to tr tag and paste below.

Name	Company	Position	Age	Salary
Ahmad	Nishat	Manager	21	100000
Faisal	PSO	Assistant	37	50000
Arbab	Junior Technical Author	Allied bank	29	45000
Aamar	Senior Javascript Developer	Net sol	22	66000
Isra	Accountant	Gul Ahmad	33	95000

Writing format:

HTML Double tap to Copy

    <div class="table">
      <table style="white-space: nowrap; min-width: 100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ahmad</td>
            <td>Nishat</td>
            <td>Manager</td>
            <td>21</td>
            <td>100000</td>
          </tr>
          <tr>
            <td>Faisal</td>
            <td>PSO</td>
            <td>Assistant</td>
            <td>37</td>
            <td>50000</td>
          </tr>
          <tr>
            <td>Arbab</td>
            <td>Junior Technical Author</td>
            <td>Allied bank</td>
            <td>29</td>
            <td>45000</td>
          </tr>
          <tr>
            <td>Aamar</td>
            <td>Senior Javascript Developer</td>
            <td>Net sol</td>
            <td>22</td>
            <td>66000</td>
          </tr>
          <tr>
            <td>Isra</td>
            <td>Accountant</td>
            <td>Gul Ahmad</td>
            <td>33</td>
            <td>95000</td>
          </tr>
        </tbody>
      </table>

Auto Table of Content:-

Table of Contents

Writing format:

HTML Double tap to Copy

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Manual Table of Content:-

Table of Contents

Software

Windows Theme

Tools

Writing format:

HTML Double tap to Copy

          <details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#'>your_heading</a></li>
              <ol>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
        </ol>
      </li>
      <li><a href='#'>your_heading</a></li>
            <ol>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
        </ol>
      </li>
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#'>your_heading</a>
        <ol>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
          <li><a href='#'>Title_sub_heaing</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

Image with Caption:-

This is a Youtube thumbnail downloader by Nine Tech.

Writing format:

HTML Double tap to Copy

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='your_image_link.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout:-

Writing format:

Replace 'image_title_here' to your image title and Change image link, make sure to mention image extenion.

HTML Double tap to Copy

          <!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='Image_1_link_here.png'/>
  <img alt='image_title_here' src='Image_2_link_here.png'/>
  <img alt='image_title_here' src='Image_3_link_here.png'/>
  <img alt='image_title_here' src='Image_4_link_here.png'/>
</div>

Image with Show All:-

Show All

Writing format:

HTML Double tap to Copy

          <!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='image_link_here.png'/>
  <img alt='image_title_here' src='image_link_here.png'/>

  <img alt='image_title_here' src='image_link_here.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='image_link_here.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='image_link_here.png'/>
    <img alt='image_title_here' src='image_link_here.png'/>
    <img alt='image_title_here' src='image_link_here.png'/>
    <img alt='image_title_here' src='image_link_here.png'/>
  </div>
</div>

Post Break:-

This is use to break or horizontal line in HTML page

Writing Format:

HTML Double tap to Copy

<!--it is use to break line-->
<hr>

Blockquote:-

A simple maintained YOUR PC driver. Old driver: Not only can old drivers lead to system instability, hardware failures and poor performance. Driver Booster can look for drivers automatically, download and then install the ones needed to improve system performance.

Writing Format:

HTML Double tap to Copy

<blockquote>A simple maintained YOUR PC driver. Old driver: Not only can old drivers lead to system instability, hardware failures and poor performance. Driver Booster can look for drivers automatically, download and then install the ones needed to improve system performance.</blockquote>

Another Style:-

The prominent video editing tool Cap Cut has been changed to include additional functionality and features not seen in the original release. This version is called Cap Cut Pro Mod.

This category could have functions for splitting, combining, rotating, trimming, and cutting video clips.

A variety of filters, effects, transitions, and animations are available to add artistic flair to your films.

Writing Style:-

HTML Double tap to Copy

<blockquote class='s-1'>
  <div>The prominent video editing tool Cap Cut has been changed to include additional functionality and features not seen in the original release. This version is called Cap Cut Pro Mod.
    <ul>
      <li>This category could have functions for splitting, combining, rotating, trimming, and cutting video clips.</li>
      <li>A variety of filters, effects, transitions, and animations are available to add artistic flair to your films.</li>
    </ul>
  </div>
</blockquote>

Social Blockquotes:-

The prominent video editing tool Cap Cut has been changed to include additional functionality and features not seen in the original release. This version is called Cap Cut Pro Mod..

Writing Format:-

HTML Double tap to Copy

<blockquote class='pu_blq' data-author='author_name_here'>Your_Quotes_here.</blockquote>

Toggle Content or Accordion:-

Color Correction

Tools to improve the visual attractiveness of your films by grading colour, brightness, contrast, and saturation.

Key framing

A sophisticated function that lets users design unique motions and animations for their videos.

Green Screen

The option to swap out backgrounds for other pictures or movies. Multi-Layer Editing: Capability to work on intricate editing projects with numerous video and audio tracks at once.

Writing Format:-

HTML Double tap to Copy

<!--[ 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'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

</div>

External Link:-

link_text_here
link_alt

Writing Format:-

Replace '#' with "Your_Link" and 'link_text' to "your_link_text".

HTML Double tap to Copy

<a class='extL' href='#' rel='noreferrer' target='_blank'>link_text</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>link_alt</a>