Wants To Buy This Template?? Contact Us Buy Now!
Home
Trick & Tips

All Typography and Writing Formats

All Style Typography and Format Posts
 

Manual Related Post

Read Also : 

<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

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.

<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




  
  

    
    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.

  




Download Code 



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



Download Code 


Note Block


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.


// Another style


Warning! 
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_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:


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


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>



















About the Author

















Student | Blogger | Youtuber












#Trick & Tips





























































































1 comment















    

  1. 

    

    

    

    
                  
                        
    
                        
    

    




    

    
Bro it's awesome
    

    

    






    


    

                                          
    
                                        
    2. 























































































Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details




Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.




AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.







Site is Blocked
Sorry! This site is not available in your country.