Tipografi : Semua Style Template Median Dark UI

Semi Automatic Table of Content

Table of Contents

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

Download Button

Sample_external_link Standard_button Download Download Demo

<a class='extL' href='javascript:;'>Sample_external_link</a>
<a class='button' href='javascript:;'>Standard_button</a>
<a class='button ln' href='javascript:;'><i class='icon dl'></i>Download</a>
<a class='button' href='javascript:;'><i class='icon dl'></i>Download</a>
<a class='button' href='javascript:;'><i class='icon demo'></i>Demo</a>

Button Satu Baris

Demo Download

<div class='btnF'>
  <a class='button ln' href='javascript:;'>Demo</a>
  <a class='button' href='javascript:;'><i class='icon dl'></i>Download</a>
</div>

Box Download

file_name.zip 200kb

<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>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a aria-label="Download" class="button fileLink" href="#"><i class="icon dl"></i></a>
</div>

Lazy YT

alternatif lain untuk menunda pemuatan iframe dengan fungsi defer

Lazy YT Normal

<div class='lazyYt' data-embed='mNOdyNNRSrM'>
  <div class='play'>
    <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Lazy YT Defer

<div class='videoYt'>
  <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/zn50ZV8K_p0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Post Note

Yout_text_here

<p class='note notranslate'>Yout_text_here</p>
// Another style
<p class='note wr notranslate'>Yout_text_here</p>

Syntax

Your_code_here

Your_CSS_code_here

Your_JS_code_here

Your_JS_code_here

Penulisan

<div class="pre html"><pre>Your_code_here</pre></div>

<div class="pre css"><pre>Your_CSS_code_here</pre></div>

<div class="pre js"><pre>Your_JS_code_here</pre></div>

<div class="pre wrap;"><pre>Your_JS_code_here</pre></div>

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>