Notifications
All Notifications
Ad Under Header
Home Formate Sort Code Typography

Fine Metarial All Typo And Short Code

Itz TxS
Itz TxS
---

Get started with over a dozen reusable Fine Metarial components with upgrade styles and additional components and options.

Table Of Contents

Alerts

Provide contextual feedback messages for typical user actions.

Varian Alert

Alert has two different variants:

A simple default alert—check it out!
A simple outlined alert—check it out!
HTML 
<div class="finemetarial_product_post_tool_alert">
  <div class="alert_message">
    A simple default alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_outline">
  <div class="alert_message">
    A simple outlined alert—check it out!
  </div>
</div>

Alert With A Solid Background

Solid background style variant. Use one of the four styles below:

A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out!
HTML 
<div class="finemetarial_product_post_tool_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_warning">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_success">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_error">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alert with Line Style

A variant of the outline style with a border. Use one of the four styles below:

A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out!
HTML 
<div class="finemetarial_product_post_tool_alert alert_info alert_outline">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_warning alert_outline">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_success alert_outline">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_error alert_outline">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alert with Solid Background Description

You can use alerts with description content:

Info A simple info alert—check it out!
Warning A simple warning alert—check it out!
Success A simple success alert—check it out!
Error A simple error alert—check it out!
HTML 
<div class="finemetarial_product_post_tool_alert alert_info">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_warning">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_success">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_error">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Alert with Description Line Style

You can use alerts with line style description contents:

Info A simple info alert—check it out!
Warning A simple warning alert—check it out!
Success A simple success alert—check it out!
Error A simple error alert—check it out!
HTML 
<div class="finemetarial_product_post_tool_alert alert_info alert_outline">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_warning alert_outline">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_success alert_outline">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="finemetarial_product_post_tool_alert alert_error alert_outline">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Button

Button adalah elemen yang dapat diklik yang digunakan untuk memicu tindakan. Mereka mengomunikasikan ajakan bertindak kepada pengguna dan memungkinkan pengguna berinteraksi dengan halaman dalam berbagai cara. Label button mengungkapkan tindakan apa yang akan terjadi saat pengguna berinteraksi dengannya.

Variant Button

Button has four different variants:

Default Button Outline Button Unelevated Button Raised Button
HTML 
<a class="finemetarial_button" href="#">Default Button</a>
<a class="finemetarial_button outline" href="#">Outline Button</a>
<a class="finemetarial_button unelevated" href="#">Unelevated Button</a>
<a class="finemetarial_button raised" href="#">Raised Button</a>

Button Size

Button comes in three different sizes:

Small Button Medium Button Large Button
HTML 
<a class="finemetarial_button small unelevated" href="#">Small Button</a>
<a class="finemetarial_button medium unelevated" href="#">Medium Button</a>
<a class="finemetarial_button large unelevated" href="#">Large Button</a>

Button shape

Buttons can have additional forms:

Default Button Rounded Button
HTML 
<a class="finemetarial_button unelevated" href="#">Default Button</a>
<a class="finemetarial_button unelevated rounded" href="#">Rounded Button</a>

Button Disabled

Button if no action:

Default Button Disabled Outline Button Disabled Unelevated Button Disabled Raised Button Disabled Rounded Button Disabled
HTML 
<a class="finemetarial_button disabled" href="#">Default Button Disabled</a>
<a class="finemetarial_button outline disabled" href="#">Outline Button Disabled</a>
<a class="finemetarial_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="finemetarial_button raised disabled" href="#">Raised Button Disabled</a>
<a class="finemetarial_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>

Button with Icon

Create button with icon just add SVG Icon:

Demo Download
HTML 
<a class="finemetarial_button outline" href="#">
  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
    <path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
  </svg>
  Demo
</a>

<a class="finemetarial_button unelevated" href="#">
  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <path d="m7 10 5 5 5-5"></path>
    <path d="M12 15V3"></path>
  </svg>
  Download
</a>

Tabel

Using the most basic table markup, here's what the Table looks like. All table styles are inherited, meaning each nested table will be styled the same way as its parent.

No. Name Gender City Hobbies
1 Ishar Yulian Satriani Man Pandeglang, Banten Create a Blogger template design
2 No data. No data. No data. No data.
3 No data. No data. No data. No data.
4 No data. No data. No data. No data.
5 No data. No data. No data. No data.
HTML 
<div class="finemetarial_product_post_tool_table">
   <table>
       <thead>
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Gender</th>
               <th>City</th>
               <th>Hobbies</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th>
               <td>Ishar Yulian Satriani</td>
               <td>Male</td>
               <td>Pandeglang, Banten</td>
               <td>Create a Blogger template design</td>
           </tr>
           <tr>
               <th>2</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>3</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>4</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>5</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
       </tbody>
   </table>
</div>

Table Header Options

Use a selection from these four classes to change the Table Head color: table_primary, table_warning, table_success, and table_error.

No. Name Gender City Hobbies
1 Ishar Yulian Satriani Man Pandeglang, Banten Create a Blogger template design
2 No data. No data. No data. No data.
3 No data. No data. No data. No data.
4 No data. No data. No data. No data.
5 No data. No data. No data. No data.
HTML 
<div class="finemetarial_product_post_tool_table">
   <table class="table_primary">
       <thead>
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Gender</th>
               <th>City</th>
               <th>Hobbies</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th>
               <td>Ishar Yulian Satriani</td>
               <td>Male</td>
               <td>Pandeglang, Banten</td>
               <td>Create a Blogger template design</td>
           </tr>
           <tr>
               <th>2</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>3</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>4</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>5</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
       </tbody>
   </table>
</div>

Table with Lined Rows

Use the table_stripped class to add zebra-stripping to any table row in the tbody.

No. Name Gender City Hobbies
1 Ishar Yulian Satriani Man Pandeglang, Banten Create a Blogger template design
2 No data. No data. No data. No data.
3 No data. No data. No data. No data.
4 No data. No data. No data. No data.
5 No data. No data. No data. No data.
HTML 
<div class="finemetarial_product_post_tool_table">
   <table class="table_stripped">
       <thead>
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Gender</th>
               <th>City</th>
               <th>Hobbies</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th>
               <td>Ishar Yulian Satriani</td>
               <td>Male</td>
               <td>Pandeglang, Banten</td>
               <td>Create a Blogger template design</td>
           </tr>
           <tr>
               <th>2</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>3</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>4</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>5</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
       </tbody>
   </table>
</div>

Table with Floatable Rows

Use the table_hovered class to enable the hover effect on table rows in tbody.

No. Name Gender City Hobbies
1 Ishar Yulian Satriani Man Pandeglang, Banten Create a Blogger template design
2 No data. No data. No data. No data.
3 No data. No data. No data. No data.
4 No data. No data. No data. No data.
5 No data. No data. No data. No data.
HTML 
<div class="finemetarial_product_post_tool_table">
   <table class="table_hovered">
       <thead>
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Gender</th>
               <th>City</th>
               <th>Hobbies</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th>
               <td>Ishar Yulian Satriani</td>
               <td>Male</td>
               <td>Pandeglang, Banten</td>
               <td>Create a Blogger template design</td>
           </tr>
           <tr>
               <th>2</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>3</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>4</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>5</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
       </tbody>
   </table>
</div>

Sticky Table

Use the table_sticky class to use sticky tables.

No. Name Gender City Hobbies
1 Ishar Yulian Satriani Man Pandeglang, Banten Create a Blogger template design
2 No data. No data. No data. No data.
3 No data. No data. No data. No data.
4 No data. No data. No data. No data.
5 No data. No data. No data. No data.
6 No data. No data. No data. No data.
7 No data. No data. No data. No data.
HTML 
<div class="finemetarial_product_post_tool_table table_sticky">
   <table>
       <thead>
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Gender</th>
               <th>City</th>
               <th>Hobbies</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th>
               <td>Ishar Yulian Satriani</td>
               <td>Male</td>
               <td>Pandeglang, Banten</td>
               <td>Create a Blogger template design</td>
           </tr>
           <tr>
               <th>2</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>3</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>4</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>5</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>6</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
           <tr>
               <th>7</th>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
               <td>No data. </td>
           </tr>
       </tbody>
   </table>
</div>

Accordion/Collapsible Panel

Contoh:

Ciutkan 1 - Klik Saya!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Ciutkan 2 - Klik Saya!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Ciutkan 3 - Klik Saya!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
HTML 
<div class="finemetarial_product_post_tool_collapse">
  <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 1 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>

    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 2 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
  
    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 3 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
</div>

Blockquote

Use blockquote with span, small or footer.

TxS Is always tries to give the best for you. @Royal_Ui
HTML 
<blockquote>
   TxS Is always tries to give the best for you.
   <span>@Royal_Ui</span>
</blockquote>

Tag Pre Code

The pre code tag is included with the copy to clipboard feature. If the text is HTML don't forget to parse the text using HTML Parse Tool.

p>

Below is a combination of start tag with code tag and add title to start tag like below:

HTML 
<div class='pre'>
  <div class='preH'>
    <!--[ Heading ]-->
    <span>HTML</span>
    <!--[ Copy Button ]-->
    <button id='copy1' class='preB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code1'>
    <pre>Your_codes_here</pre>
  </div>
</div>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Sample HTML</title>
</head>
<body>
   <p>Sample Text</p>
</body>
</html>
CSS 
body{font-size:14px;font-weight:400;color:inherit;}
JS 
$('#mybutton').click(function() {
  $(this).toggleClass('active');
});

Manual Related Posts

Manual Related Posts can be used to create related articles in posts manually.

Example:

Also Read: Fine Metarial All Typo And Short Code
HTML 
<div class="manual_related_post">
   <span>Also Read:</span>
   <a href="#">
     Fine Metarial All Typo And Short Code
   </a>
</div>

Media

Use the media_player class to create responsive embed, iframe, and object.

Example for embedding a YouTube iframe with lazyload feature.

</ path >
HTML 
<div class="media_player lyt" data-embed="2Oi87E2Wk2g">
   <div class="play_button">
     <svg viewBox="0 0 24 24">
       <path d="M10 15l5.2-3L10 9v6m11.6-7.8a8.4 8.4 0 0 1 .2 1.9 16.2 16.2 0 0 1 .1 2.1v.8a25.1 25.1 0 0 1-.4 4.8 2.7 2.7 0 0 1-1.8 1.8l-2.6.2H12a50.8 50.8 0 0 1-7.8-.4 2.7 2.7 0 0 1-1.8-1.8 8.4 8.4 0 0 1-.2-1.9 16.2 16.2 0 0 1-.1 -2.1V12a25.1 25.1 0 0 1 .4-4.8 2.7 2.7 0 0 1 1.7-1.8 12.6 12.6 0 0 1 2.6-.2H12a50.8 50.8 0 0 1 7.8.4 2.7 2.7 0 0 1 1.8 1.6 z"> </path>
     </svg>
   </div>
</div>
The parts marked yellow are replaced with the embed code from the YouTube video.

Example:
https://www.youtube.com/embed/XXXXXXXX

Post Reference

To add a list of references to an article you are writing:

Reference:
https://finemetarial.itz-txs.com/

HTML 
<p class="post_reference">
   References:
   <br />
   https://finemetarial.itz-txs.com/
</p>

Other

This is another useful component to work with.

Table of Contents

With JavaScript, it automatically generates a Table of Contents for your post. This will work if your post includes the headings h2 and h3.

Use the HTML code below and paste it in a Blogger Post in HTML View mode.

HTML 
<div id="toc_wrap">
   <div class="toc_header">
     <div class="toc_title">
       List of contents
     </div>
     <div class="show_hide_toc_button">
       <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path d="m6 9 6 6 6-6"></path>
       </svg>
       <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path d="m18 15-6-6-6 6"></path>
       </svg>
     </div>
   </div>
   <div id="toc_content"></div>
</div>
All components listed here will be updated as they become available.
If you want to report some bugs, you can write them in the comments section of the page Report a Bug and if you If you want to request a new feature or want to provide feedback, please write in the comments section on the page Request and Feedback.
Formate Sort Code Typography
Itz TxS
Itz TxS
Whats up ! My Name is Samir, a expert Web Designer, Telegram Bot Maker,Logo Designer And UI / UX designer in addition to content material writer from Feni,Dagonbhuiyan,Bangladesh. I really like to Code and create interesting things whilst playing with it.
Join the conversation
Post a Comment
Top Post Ad
Post Middle Ads 1
Parallax Ad
Post Middle Ads 2
Post Bottom Ad
Matched Content Ad