√ All Typography's & Writing Formats - Median UI 1.6 - Kode Script Tipografi & Format Penulisan Template UI Median 1.6

Sebagian besar fitur ini hanya bisa digunakan dalam mode 'Tampilan HTML', Anda juga tidak bisa berganti ke mode 'Tampilan menulis' selama menggunakan beberapa fitur ini. Gunakan tag <p>Your_paragraph_here</p> untuk menambahkan paragraf pada artikel.

Daftar Isi Kode Script

Table of Contents

1. Gambar dengan Tata Letak Kotak

Kode Script

<!--[ Grid Image ]-->
<div class='psImg grImg'>
<img alt='image_title_here1' src='url_gambar_1'/>
<img alt='image_title_here2' src='url_gambar_2'/>
<img alt='image_title_here3' src='url_gambar_3'/>
<img alt='image_title_here4' src='url_gambar_4'/>
</div>

2. Menambahkan fungsi gulir pada gambar yang hanya akan aktif di tampilan seluler.

Kode Script

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
<img alt='image_title_here' src='URL_IMAGE1'/>
<img alt='image_title_here' src='URL_IMAGE2'/>
<img alt='image_title_here' src='URL_IMAGE3'/>
<img alt='image_title_here' src='URL_IMAGE4'/>
</div>

3. Paragraf dengan Drop Cap

Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf, ukuran biasanya adalah dua baris atau lebih.

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

Kode Script

<blockquote class='s-1'>
  <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>

4. Blok Catatan Standar

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

Kode Script

<p class='note'>ketik teks disini</p>

5. Blok Catatan Berwarna

Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

Kode Script

<p class='note wr'>ketik teks disini</p>

6. Daftar Isi semi-otomatis

Table of Contents

Kode Script

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

Tambahkan script ini di ujung postingan Anda untuk mengaktifkan ToC semi otomatis.

Kode Script Akhir Potingan

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

7. Toggle Show/Hide (Buka0tutup)

Spoiler:

Your_text_is_here.

Kode Script

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

8. Toggle Faq

Pertanyaan_1

Jawaban_1.

Pertanyaan_2

Jawaban_2.

... ...

Kode Script

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

  ...
  
  ...
</div>

Gunakan classname alt (ditandai pada kode di atas) untuk mengubah gaya icon. Jumlah widget accordion yang bisa Anda tambahkan tidak terbatas.

9. Tautan Link Eksternal

Website EduTekPedia
Kode Script

<a class='extL' href='url_is_here' rel='noreferrer' target='_blank'>Title_link</a>

10. Tombol Download Standar

DOWNLOAD
atau
DOWNLOAD
Kode Script

<a class='button' href='url_is_here'>DOWNLOAD</a> atau <a class='button ln' href='url_is_here'>DOWNLOAD</a>

11. Tombol Download Icon

DOWNLOAD DOWNLOAD
Kode Script

<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a> ATAU
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

12. Tombol Download Dua dalam satu baris

Demo Download

Kode Script

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

13. Tombol Download Dengan Info

file_name.zip 200kb

Kode Script

<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 class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

14. Tombol Download Dengan Gambar

about_me.png 10kb

Kode Script

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>

15. Lazy Youtube

Berguna untuk menunda pemuatan video Youtube setelah pengguna menggulir halaman.

Kode Script

<!--[ Lazy youtube ]-->
<div class='lazyYt' data-embed='Youtube_video_ID'>
  <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>

Baca Juga