Beranda

Typography

Daftar Isi

BACA PENTING!!!

Kami menulis "kode dengan multiple kode" dengan tujuan mempermudah untuk dibaca dan dipahami, namun ini menimbulkan bug saat menyalin kode, maka dari itu untuk menghindarinya saat menyalin kode lakukan dengan cara klik 2x bagian kode yang akan disalin (didalam kotak yang berisikan kode) dan semua kode dalam box tersebut akan tersalin. Jangan menggunakan tombol "copy", "download" atau "Open new tab" yang berada diatas kanan box kode tersebut karena akan menyalin dan menunjukkan kode yang salah. Ini hanya terjadi di halaman ini karena disebabkan kami menulis kode Syntax Highlighter yang berisikan "kode dengan multiple kode" seperti yang disebutkan sebelumnya, namun kode tetap akan berfungsi sebagaimana mestinya bahkan jika anda menulis, memasukkan, dan menggunakan kode Syntax Highlighter. Yang perlu anda perhatikan hanya metode penyalinan kode pada laman ini.

Di UtaKandila terdapat banyak fitur penulisan untuk pengguna Advanced, dalam menggunakan fitur penulisan ini dibutuhkan HTML View atau penulisan HTML. Untuk lebih jelasnya, berikut tutorial dan fitur penulisan tersebut.

  1. Di post editor, klik icon dibawah judul
  2. Akan muncul 2 pilihan yakni: HTML view dan Writing view
  3. Pilih 'HTML View'.

Tips: Gunakan <p>Your_paragraph_here</p> tag untuk membuat dan menambahkan paragraf baru.

Gambar dengan Keterangan dan Lightbox Otomatis

Caption pada gambar ini tidak akan terbaca pada deskripsi/cuplikan artikel. Anda juga dapat memilih agar teks tetap terbaca pada cuplikan artikel.

All Typography and Format Posts
Semua gambar di postingan otomatis memiliki fungsi lightbox, klik gambar ini untuk mencobanya.

Tambahkan class='full' berfungsi untuk menghapus margin gambar dan layar, hanya berfungsi untuk tampilan seluler.

Format penulisan:

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

Gambar dengan Tata Letak Grid

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara

Format penulisan:

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

Gambar dengan fungsi Tampilkan Semua

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika pengguna mengklik tombol 'Tampilkan Semua'. Fungsi Tampilkan Semua hanya dapat diaktifkan satu kali, Gambar tidak dapat disembunyikan lagi bila diaktifkan.

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara

Format penulisan:

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

Gambar dengan tampilan Scroll

Sama seperti layout gambar diatas, hanya saja pada tampilan ponsel gambar akan disusun sejajar dengan tambahan fungsi side scroll pada tampilan mobile.

Kami juga menambahkan efek gulir halus ke fitur ini. Silakan coba buka halaman ini di perangkat seluler Anda:

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations

Format penulisan:

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

Gambar Lazyload

Berguna untuk menunda pemuatan gambar sehingga skor PageSpeed halaman lebih tinggi dan tulisan dimulat lebih cepat, gambar hanya akan dimuat ketika pengguna menggulir ke area gambar. Semua gambar di artikel ini menggunakan Lazyload.

Format penulisan:

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

Posting Terkait Manual

Penting untuk diperhatikan bahwa fitur ini ditulis secara manual, tidak otomatis muncul di setiap halaman.

Kamu mungkin suka post berikut :

Format penulisan:

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

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

Posting Terkait otomatis

Posting terkait

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Post Break

Anda dapat menggunakan fitur ini untuk memisahkan paragraf atau membuka bab baru dalam sebuah postingan, berikut contoh tampilannya:

Format penulisan:

<!--[ To break paragraphs apart ]-->
<hr>

Paragraf dengan Indentasi Teks

Hai, ini adalah contoh Paragraf dengan Indentasi Teks di www.utakandila.com. Cara membuatnya adalah dengan menuliskan kode dibawah ini dan hasilnya seperti ini.

Format penulisan:

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

Paragraf dengan Abjad awal besar

Hai, ini adalah contoh Paragraf dengan Indentasi Teks di www.utakandila.com. Cara membuatnya adalah dengan menuliskan kode dibawah ini dan hasilnya seperti ini.

Namun, hanya dalam paragraf pertama saja yang Abjadnya besar, jika ingin paragraf selanjutnya juga menggunakan Abjad awal besar, bisa menuliskan ulang kode di paragraf lainnya.

Format penulisan:

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote

Ini adalah contoh hasil Blockquote dalam www.utakandila.com, penggunaannya dengan memasukkan kode dibawah.

— www.utakandila.com

Format penulisan:

<blockquote>Ini adalah contoh hasil Blockquote dalam www.utakandila.com, penggunaannya dengan memasukkan kode dibawah.
<br />
<br /> — www.utakandila.com</blockquote>

Style Blockquote lainnya:

Ini adalah contoh hasil Blockquote dalam www.utakandila.com, penggunaannya dengan memasukkan kode dibawah.
  • Style ke 1 hasilnya seperti diatas, dengan memasukkan kode diatas.
  • Style ke 2 hasilnya seperti dibawah, dengan memasukkan kode dibawah.

Format penulisan:

<blockquote class='s-1'>
  <div>Ini adalah contoh hasil Blockquote dalam www.utakandila.com, penggunaannya dengan memasukkan kode dibawah.
    <ul>
      <li>Style ke 1 hasilnya seperti diatas, dengan memasukkan kode diatas.</li>
      <li>Style ke 2 hasilnya seperti dibawah, dengan memasukkan kode dibawah.</li>
    </ul>
  </div>
</blockquote>

Social Blockquote

Sedangkan ini Social Blockquote, yang dimana terdapat link untuk share ke media sosial, ataupun mencopy juga menyimpannya.

Format penulisan:

<blockquote class='pu_blq' data-author='Anonymous'>Sedangkan ini Social Blockquote, yang dimana terdapat link untuk share ke media sosial, ataupun mencopy juga menyimpannya.</blockquote>

Note Block

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau kalimat highlight, ada dua gaya yang bisa Anda coba antara lain:

Ini adalah contoh tulisan dengan Note Block, untuk meng-hilight tulisan penting.

<p class='note'>Ini adalah contoh tulisan dengan Note Block, untuk meng-hilight tulisan.</p>

Note Block warning dengan warna lain:

Warning!Ini adalah contoh tulisan dengan Note Block, untuk meng-hilight tulisan penting.

<p class='note wr'>Ini adalah contoh tulisan dengan Note Block, untuk meng-hilight tulisan penting.</p>

Tabel

Tabel pada tema ini sudah diatur responsive, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak layout maka otomatis tabel tersebut memiliki fungsi scroll.

Silakan buka artikel ini di perangkat seluler Anda dan sorot bagian tabel di bawah ini:

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

Writing format:

<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 menjadi satu baris, itu tidak akan digabungkan ke baris berikutnya dan akan berlanjut hingga <br> tag berikutnya.
  • min-width:100%; mendefinisikan lebar minimum tabel, Anda dapat mengubahnya px unit misalnya 500px. Ubah itu menjadi 0 jika ingin lebar tabel ditentukan secara otomatis.

Manual Daftar Isi

Contents
  1. Image with Caption
  2. Manual Related Post
  3. Post Break
  4. Blockquote

With sub-heading:

  1. Heading_title
    1. Subheading_1
    2. Subheading_2
    3. Subheading_3

Penggunaan Daftar Isi manual lebih rumit dibandingkan versi otomatis, Anda harus menambahkan atribut ID yang berbeda di setiap tag heading dan menuliskannya di daftar konten.

Ini adalah contoh tag heading dengan custom ID:

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

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>
  • Hapus open='' atribut untuk menutup otomatis Daftar Isi saat halaman pertama kali dimuat.
  • Anda dapat mengubah judul atau frasa 'Show/Hide All' di bagian yang ditandai.

Semi otomatis Table of Content

Table of Contents

Pilihan termudah untuk menampilkan Daftar Isi. Fitur ini akan menampilkan semua tag heading di postingan Anda (tiga level h2 - h4), jadi pastikan Anda menulis tag heading secara berurutan.

Format penulisan:

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

Syntax Highlighter

Digunakan untuk mendefinisikan baris kode (HTML, CSS, Javascript, dll) dalam postingan.

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Penambahan kode warna pada sintaks dapat ditulis secara manual, namun kami juga menyediakan fitur sintaks berwarna otomatis.

  • Ubah data-text='.html' untuk menentukan format kode lain, misal data-text='.css', data-text='.js', data-text='.php', etc
  • Value white-space:pre-wrap; berguna untuk menonaktifkan pengguliran samping, kode panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.
  • max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilainya none menjadi 400px untuk menentukan tinggi sintaks maksimal hanya 400 piksel.
  • Gunakan <i class='red'>code_here</i> untuk menambahkan warna merah/oranye.
  • 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='gray'>code_here</i> untuk menambahkan warna abu-abu.
  • Gunakan <i class='block'>code_here</i> untuk menambahkan blok warna biru.

Automatic Colored Syntax Highlighter

Sintaks berikut secara otomatis disorot/diwarnai menggunakan Highlight.js

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

Sintaks kode untuk warna:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Error yang sering dijumpai:

Fitur ini secara otomatis mendeteksi bahasa dan menyorot warna. Namun dalam beberapa kasus, mungkin tidak secara otomatis mendeteksi bahasa kode, pada saat itu Anda harus menambahkan nama kelas sesuai bahasanya, yaitu jika itu html, Anda harus menambahkan html or language-html dengan hl.

Contoh:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Batasan penggunaan Penyorot Sintaks Berwarna Otomatis:

  • Anda tidak dapat menambahkan tag apa pun ke dalam Kode yang Telah Diformat Sebelumnya. Misalnya, Anda akan menambahkan <i class='block'></i>, itu tidak lagi akan diblokir dengan warna biru.

Multi Functional Syntax Highlighter

Your_code_is_here

Format penulisan:

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

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://www.utakandila.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.utakandila.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Format penulisan:

<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>
  • Kode checked atribut mendefinisikan tab pertama yang muncul secara default.
  • Pastikane id='...' and for='...' atribut mempunyai nilai yang sama. ID harus unik, tidak boleh ada dua ID yang identik dalam satu halaman.
  • Ubah data-text='HTML' atribut di bagian yang disorot untuk mengganti nama tab.

Toggle Show / Hide

Digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna sesuai permintaan. Secara default widget ini bersifat tertutup, akan menampilkan konten di dalamnya ketika pengguna menekan tombol perintah.

Konten apa pun dapat dimasukkan dalam widget ini.

Spoiler:

Ini adalah contoh Spoiler penggunaan di www.utakandila.com, penulisan menggunakan kode dibawah ini

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

Toggle Content atau Accordion

Mendefinisikan konten tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan dalam grup, biasanya digunakan untuk daftar pertanyaan atau FAQ (Pertanyaan yang Sering Diajukan).

Accordion_first_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_second_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_third_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_forth_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<!--[ 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 class alt (ditandai pada kode di atas) untuk mengubah gaya ikon.
  • Jumlah widget akordeon yang dapat Anda tambahkan tidak terbatas.

FAQ schema in Microdata

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

External Link

Memberi tahu pengguna jika tautan tersebut akan mengarah ke situs lain.

Sample_external_link
Sample_link_alt 
<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button Link

Button 
<a class='button' href='url_is_here'>Title_link</a>

Alternative style:

Button 
<a class='button ln' href='url_is_here'>Title_link</a>

With icons:

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

Menggunakan <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>

Add style='fill:#fff; margin-right:12px;' or style='stroke:#fff; margin-right:12px;' attribute to give SVG icon a white color.

Dua tombol dalam satu baris:

Demo Download
<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 file 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 gambar latar belakang, bukan teks:

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>

Countdown Download Box

Fitur ini akan menampilkan hitungan mundur sebelum pengguna mengunduh file apa pun.

Fitur ini memerlukan tautan unduh langsung file cloud. Anda dapat menggunakan Google Drive untuk mendapatkan link download langsung suatu file.

With Image:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

Without Image:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

Writing format:

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Music Player

Pemutar Musik yang dapat digunakan untuk memutar lagu menggunakan file audio yaitu MP3.

Writing format:

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

Lazy YouTube Video

Berguna untuk menunda pemuatan video Youtube setelah pengguna menggulir halaman.

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <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>
</div>

Menunda frame loading menggunakan fungsi: defer.js

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <div class='videoYt'>
    <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxxxxxxxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  </div>
</div>
  • Ubah bagian yang ditandai dengan ID video Youtube yang ingin Anda tampilkan.
  • ID video dapat ditemukan di url video Youtube, misalnya: youtube.com/watch?v=9I0_nza7bFg.

Post Reference

To write a list of references or footnotes below the post

Source:
www.example.com

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

Header Subtitle

Untuk mengubah Subtitle Header pada postingan atau halaman tertentu.

<style>/*<![CDATA[*/
  /* To change Header Subtitle */
  .headH .headSub{max-width:none}
  .headH .headSub::before{content:"Typography"}
/*]]>*/</style>

Post sebelum atau berikutnya

Sekarang otomatis.

Posting Komentar

Harap bijaklah dalam berkomentar. Kami melarang aktifitas spam, iklan, link, provokasi, hoax, sara, pornograpi, berkata kasar, ujaran kebencian serta semua hal yang dilarang oleh norma dan hukum yang berlaku.