Untuk Konsultasi dan Diskusi silahkan gabung ke Grup Telegram kami.
Join Now

All Typograhpy, Writing Formats and Other Additional Features

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.

  1. Pada tampilan editor postingan, klik ikon 🖉 yang ada pada bagian kanan bawah judul,
  2. Akan muncul 2 pilihan : Tampilan HTML dan Tampilan menulis,
  3. ' <> Tamplan HTML'.

Tips
Gunakan tag <p>Your_paragraph_here</p>untuk menambahkan paragraf pada artikel

Image with Caption and Auto Lightbox

Semua gambar dalam postingan akan otomatis memiliki fungsi lightbox, klik gambar ini untuk mencobanya.
<table class='tr-caption-container'>
    <tbody>
      <tr>
        <td>
          <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
        </td>
      </tr>
      <tr>
        <td class='tr-caption'>Your_caption_is_here</td>
      </tr>
    </tbody>
  </table>

Menambahkan class='full' berfungsi untuk menghilangkan jarak batas antara gambar dan layar, hanya berfungsi untuk tampilan seluler.


Image with Grid Layout

image_title_here image_title_here image_title_here image_title_here
<!--[ Grid Image ]-->
    <div class='psImg grImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    </div>

Image with Show All Function

image_title_here image_title_here image_title_here
image_title_here
image_title_here image_title_here image_title_here image_title_here
<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.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='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Fungsi 'Show All' hanya bisa diklik satu kali, gambar tidak bisa disembunyikan kembali ketika Anda sudah mengaktifkannya.


Image with Scroll Layout

image_title_here image_title_here image_title_here image_title_here
<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Lazy Load Image

Fitur ini berguna untuk meningkatkan skor PageSpeed blog, pemuatan gambar akan ditunda sampai pengguna menggulir halaman ke area gambar tersebut.

Gunakan juga <noscript> untuk tetap menampilkan gambar ketika javascript dinonaktifkan pengguna.

image_title_here
<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Manual Related Post

<div class="pRelate">
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href="#">How to Replace Blogger Comments</a></li>
    <li><a href="#">Replace or Add New Fonts</a></li>
    <li><a href="#">Guide to Adding Tab Functionin Post</a></li>
  </ul>
</div>

Post Break

Dapat digunakan untuk memisahkan paragraf atau membuat bab baru dalam postingan, contoh tampilannya bisa dilihat pada postingan ini.
<!--[ To break paragraphs apart ]-->
<hr>

Paragraph with Text Indent 

Fitur ini berfungsi untuk membuat sebuah baris pertama pada paragraf memiliki indentasi dengan nilai yang sudah ditentukan. Anda juga bisa menerapkannya ke beberapa paragraf lain.

<p class='pIndent'>Your_paragraph_is_here.</p>

Paragraph with Drop Cap 

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


Drop cap akan mengubah ukuran huruf pertama sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tarik visual.
<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet cumque veniam dolorem tempore repellat voluptatibus possimus. Quod corrupti officiis, et explicabo rem labore qui aspernatur
- Anonymous
<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.</blockquote>
Gaya lain yang dapat Anda gunakan
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.
<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>

Note Block 

Digunakan untuk menambahkan info penting, kalimat warning atau kalimat sorotan. Ada dua gaya yang bisa Anda coba : 

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

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Dengan warna berbeda :

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

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Table

Otomatis memiliki fungsi gulir ketika panjang kolom melebihi dari lebar area layar. Penggunaan tabel sedikit lebih rumit pada HTML, kami merekomendasikan Anda untuk mempelajari lebih lanjut tentang table HTML sebelum menggunakannya.
Contoh tabel dengan data riil :
 
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>
  • white-space:nowrap; menentukan teks agar menjadi satu baris tunggal, teks tidak akan terbungkus ke baris berikutnya dan akan terus berlanjut sampai tag <br> ditemukan.
  • min-width:100% mendefinisikan lebar minimal tabel, Anda bisa menggantinya menjadi satuan px misal 500px. Ubah menjadi 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Manual Table of Content

Contents
Penggunaan Table of Content manual lebih rumit dari pada versi otomatis, Anda harus menambahkan atribut ID berbeda di setiap tag heading dan menuliskannya dalam daftar konten.

Ini adalah contoh tag heading dengan ID khusus :

<h2>Your_Heading</h2>
<h3>Sub_Heading_1</h3>
<h2 id='heading'>Your_Heading</h2>
<h3 id='subHeading>Sub_Heading_1</h3>

Penulisan daftar konten yang benar
<details class="sp toc" open="">
  <summary data-hide="Hide all" data-show="Show all">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption">Image with Caption</a></li>
      <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
      <li><a href="#Post_Break">Post Break</a></li>
      <li><a href="#Blockquote">Blockquote</a></li>
      
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href="#heading">Heading Title</a>
        <ol>
          <li><a href="#subHeading">Sub_Heading_1</a></li>
          <li><a href="#subHeading">Sub_Heading_2</a></li>
          <li><a href="#subHeading">Sub_Heading_3</a></li>
          <li><a href="#subHeading">Sub_Heading_4</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
Hapus atribut open=' ' untuk menutup otomatis Table of Content ketika laman pertama kali dimuat.
Anda bisa mengganti judul atau kalimat 'Show all/Hide all' pada bagian yang sudah ditandai.

Semi Automatic Table of Content

Table of Contents

Pilihan termudah untuk menampilkan Table of Content. Fitur ini akan menampilkan semua tag heading dalam postingan Anda (tiga tingkat h1 - h4), untuk itu pastikan Anda menulis tag heading secara berurutan.

<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 diujung postingan Anda untuk mengaktifkan ToC Semi otomatis.
<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Syntax Highlighter 

Digunakan untuk mendefinisikan baris kode komputer (HTML, CSS, Javascript, etc.) dalam postingan.
<!--[ Change classname to html, css, or js ]-->
<div class='pre html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Penambahan warna kode dalam syntax ditulis secara manual, kami tidak menyediakan fitur syntax berwarna otomatis.

  • Ganti classname html untuk mendefinisikan format kode lain, ada 3 pilihan yang tersedia yaitu : html, css dan js.
  • Nilai white-space:pre-wrap; berguna untuk menonaktifkan fungsi gulir samping, kode yang panjang akan dipertahankan dan memberi sedikit fungsi gulir supaya tetap terbaca
  • max-height:none; mendefinisikan tinggi maksimal syntax tidak diatur (otomatis), ubah nilai none menjadi misal 400px untuk menentukan tinggi maksimal syntax hanya 400 piksel.
  • Gunakan <i class='red'>code_here</i> untuk menambahkan warna merah/orange.
  • Gunakan <i class='blue'>code_here</i> untuk menambahkan warna biru.
  • Gunakan <i class='green'>code_here</i> untuk menambahkan warna hijau.
  • Gunakan <i class='gary'>code_here</i> untuk menambahkan warna abu-abu.
  • Gunakan <i class='block'>code_here</i> untuk menambahkan warna hitam.

MultiTabs 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>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://median-ui.jagodesain.com/",
  "name": "Median UI",
  "alternateName": "Median UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://median-ui.jagodesain.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>
  • Atribut checked mendefinisikan tab pertama yang muncul secara default
  • Pastikan atribut id='...' dan for='...' memiliki nilai yang sama. ID harus unik, tidak boleh ada dua ID yang sama dalam satu halaman.
  • Ubah atribut data-text = 'HTML' pada bagian yang ditandai untuk mengganti nama tab.

Toggle Show/Hide

Digunakan untuk membuat widget interaktif yang dapat dibuka dan tutup oleh pengguna sesuai permintaan. Secara default widget ini ditutup, akan menampilkan kontak didalamnya ketika pengguna menekan tombol perintah.

Segala konten dapat dimasukkan ke dalam widget ini.

Spoiler:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

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

Toggle Content or Accordion 

Menentukan konten tambahan yang dapat dibuka dan tutup pengguna sesuai permintaan dalam beberapa kelompok, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Accordion First Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Second Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Third Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Fourth Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

!--[ 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


External Link 

Memberitahu pengguna jika link tersebut akan menuju ke situs lain.

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

Button Link 

Mendefinisikan tombol yang dapat di Klik oleh Pengguna
Tombol
<a class="button" href="#">Tombol</a>
Alternative style :
Tombol
<a class='button ln' href='url_is_here'>Title_link</a>
With Icons :
Download Demo
<a class='button' href='#'><i class='icon dl'></i>Download</a>
<a class='button' href='#'><i class='icon demo'></i>Demo</a>
with <svg> icons :
WhatsApp me! Buy now!
<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

Penting!
Tambahkan atribut style='fill:#fff; margin-right:12px;' atau style='stroke:#fff; margin-right:12px' untuk memberikan warna putih pada icon SVG.

Two button in single line : 
<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>

Download Link 

Untuk memberikan informasi berkas yang diunduh kepada pengguna.

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 class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
Dengan background Gambar :
about_me.png 10kb
<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>
</div>

Lazy Youtube 

Berguna untuk menunda pemuatan video Youtube setelah pengguna menggulir halaman.

<!--[ 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>
Menunda pemuatan iframe dengan fungsi defer.js :
<!--[ Lazysize iframe ]-->
<div class='videoYt'>
  <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
  • Ubah bagian yang ditandai dengan ID video Youtube yang ingin Anda tampilkan.
  • ID video dapat ditemukan di url video youtube. misal : youtube.com/watch?v=E7NgR0LEMbI

Post Reference 

Untuk menuliskan daftar referensi atau catatan kaki di bawah postingan.

Source:
www.jagodesain.com

<p class='pRef'>Source:<br> www.jagodesain.com</p>

Dengan berbagi, kamu tak akan pernah kekurangan. Berbagi dengan orang lain adalah bentuk terbaik mensyukuri apa yang telah kita dapatkan dari sang khalik. Tetap semangat dan terus berkarya...

Posting Komentar

Silahkan tinggalkan komentar Anda dan terimakasih telah berkunjung di amroe-oemar.blogspot.com semoga artikel yang baru saja anda baca bermanfaat untuk Anda. Selamat berblogging...
© Blog Amroe.web.id. All rights reserved. Developed by Jago Desain