0
Home  ›  Blogger  ›  Documents

Tipografi Lengkap Serta Format Penulisan dan Tambahan Fitur Lain Template Median Ui/Plus Ui

"Semua Tipografi Serta Format Penulisan dan Tambahan Fitur Lain Median Ui dan Plus Ui"

Sebagian besar fitur ini hanya dapat digunakan dalam mode ' Tampilan HTML ', Anda juga tidak dapat beralih ke mode ' Tampilan tulisan ' saat menggunakan beberapa fitur ini. 
  1. Dalam bar editor postingan, klik ikon
  2. Dua opsi akan muncul: Tampilan HTML dan Tampilan penulisan 
  3. Pilih ' Tampilan HTML '

Mengatur Paragraf Kalimat

Format penulisan :
<p>Your_paragraph_here</p>
Gunakan tag <p>Your_paragraph_here</p> untuk mengatur paragraf pada Artikel kamu.
image_title_here
Gambar dengan latar polos otomatis & Tekan gambar untuk mencobanya

Gambar Dengan Deskripsi dan Dengan Latar Polos Otomatis

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>

Menambahkan class='full' berfungsi untuk menghilangkan batas atau jarak pada sisi gambar dan layar. Perlu kamu ketahui fungsi ini hanya bekerja pada tampilan seluler saja. 


Membuat Gambar Dengan Tata Letak Kotak


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

Menampilkan Gambar Yang disembunyikan Pada Postingan

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

Menambahkan Fungsi Efek Gulir Pada Gambar

Untuk berikutnya gambar dengan menambahkan fungsi efek gulir. Berlaku hanya untuk tampilan Seluler saja.
image_title_here image_title_here image_title_here
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>
  

Lazyload Image

Lazyload Image merupakan teknik yang sering diterapkan pada website. Teknik ini sangat mempengaruhi kecepatan page load website. Sebagai gambaran, pengguna membuka website kamu dan pada artikel terdapat gambar. Jika tidak menerapkan Lazyload Image maka gambar-gambar akan di proses. Hal ini tentu akan memperberat load page website.

Jika kamu menerapkan Lazyload Image ketika pengguna membuka artikel pada website kamu. Gambar-gambar tidak  akan di proses secara bersamaan. Gambar pertama akan di proses secara penuh ketika pengguna menggulir ke halaman selanjutnya gambar baru akan di proses. Tentu saja ini akan mempengaruhi PageSpeed. Website kamu akan lebih ringan.

Sebelum itu gunakan  <noscript>  untuk tetap menampilkan gambar-gambar ketika pengguna tidak mengaktifkan javascript pada browser yang digunakan.
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>
  

Paragraf Dengan Indentasi Teks

Dapat digunakan untuk mengatur kalimat menjorok ke dalam dalam baris kalimat pertama. Indentasi teks ini bisa kamu terapkan diparagraf lainnya juga.

Format penulisan :
  <p class='pIndent'>Your_paragraph_is_here.</p>
  

Dekorasi Paragraf Kapital Drop Cap

Paragraf drop cap merupakan dekorasi pada suatu kalimat paragraf biasanya dengan ukuran besaran 2 atau 3 baris kalimat. Sering di jumpai pada koran, buku, majalah dan media cetak lainnya. Tentu fungsi dari drop cap sebagai dekorasi agar menambah daya tarik visual dari artikel tersebut.

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

Blockquote / Penegasan ataupun Kutipan Kalimat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

* No Name.
Format Penulisan:
  <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>
  
Atau gaya lain berikut yang bisa kamu coba.
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.
Format Penulisan:
  <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

Dapat digunakan sebagai sorotan kalimat, ataupun catatan informasi penting untuk pembaca.

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

Format Penulisan:
  <p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>
  
Berikut Note Block dengan gaya yang 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.

Format Penulisan:
  <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>
  

Post Break

Berfungsi sebagai pemisahan paragraf ataupun untuk memisahkan pembahasan bab baru. Bisa kamu lihat pada postingan ini.
Format Penulisan:
    <!--[ To break paragraphs apart ]-->
<hr>
  

Membuat Tabel

Tabel dengan tambahan otomatis fitur gulir jika tabel melebihi tampilan layar kamu. Penggunaan fitur tabel ini lebih rumit. Kami merekomendasikan agar lebih memahami lebih tentang tabel HTML ini sebelum menggunakannya. Berikut contoh tabel dengan data.
Name Position Office Age Start date Salary
Alexsandria Administator Edinburgh 30 2011/04/25 $420,800
Lyn Mayasa Accountant Nagasaki 32 2011/07/25 $370,750
Hasimoto kanna Junior Technical Author San Francisco 37 2009/01/12 $86,000
Claudia Bella Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Haruno Sakura Accountant Tokyo 33 2007/11/28 $169,700
Format Penulisan:
  <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>Alexsandria</td>
        <td>Administator</td>
        <td>Edinburgh</td>
        <td>30</td>
        <td>2011/04/25</td>
        <td>$420,800</td>
      </tr>
      <tr>
        <td>Lyn Mayasa</td>
        <td>Accountant</td>
        <td>Nagasaki</td>
        <td>32</td>
        <td>2011/07/25</td>
        <td>$370,750</td>
      </tr>
      <tr>
        <td>Hasimoto kanna</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>37</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Claudia Bella</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Haruno Sakura</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2007/11/28</td>
        <td>$169,700</td>
      </tr>
    </tbody>
  </table>
</div>

Syntax Highalighter

Digunakan untuk menentukan baris kode komputer seperti HTML, CSS, Javascript, dll dalam pesan.
Format penulisan :
  <!--[ 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>
  
Format Penulisan:

Menambahkan kode warna ke sintaks dapat ditulis secara manual, akan tetapi kami juga menyediakan fungsi Syntax dengan warna otomatis.

  • Ubah data-text='.html'untuk menentukan format kode lain, kamu bisa menulis seperti data-text='.css' untuk css, data-text='.js' untuk js,dan data-text='.php' untuk kode php,dll bisa kamu tentukan sendiri.
  • Nilai white-space:pre-wrap;berguna untuk menonaktifkan pengguliran samping, kode panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.
  • Kode max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilai menjadi nonemisalnya 400pxuntuk menentukan tinggi maksimum sintaks hanya 400 piksel.
  • Gunakan <i class='red'>code_here</i>untuk menambahkan warna merah.
  • 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. 

Syntax Highalighter Dengan warna Otomatis

Syntax berikut secara otomatis disorot/diwarnai oleh Highlight.js
Format Penulisan :
  &lt;!--[ Change data-text to .html, .css, .js or any language ]--&gt;
&lt;div class='pre pu notranslate' data-text='.html'&gt;
  &lt;pre style='white-space:pre-wrap; max-height:none;'&gt;Your_code_is_here&lt;/pre&gt;
&lt;/div&gt<!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 ke 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>
  
Catatan:
Fitur ini secara otomatis mendeteksi bahasa dan menyorot warna. Tetapi dalam beberapa kasus, mungkin tidak secara otomatis mendeteksi bahasa kode, pada saat itu Anda harus menambahkan nama kelas sesuai dengan bahasanya, yaitu jika html, Anda harus menambahkan html atau language-html bersama hl. Berikut contohnya.
Format Penulisan:
  <!--[ 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>
Kamu tidak dapat menambahkan tag apa pun di Kode tersebut. Termasuk, Kamu akan menambahkan <i class='block'></i>, yang tidak lagi diblokir dengan warna biru.

Syntax Highalighter Multi Fungsional

<!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://plus-ui.fineshopdesign.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://plus-ui.fineshopdesign.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>
  • Atribut checked menentukan tab pertama yang muncul secara default.
  • Pastikan id='...'dan for='...'atribut memiliki 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.

Tombol Tampilkan / Sembunyikan Kalimat

Dapat digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup sesuai perintah. Secara default widget ini tertutup, akan menampilkan konten di dalamnya ketika pengguna menekan tombol perintah tampilkan.
Spoiler:

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

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

Alihkan Konten atau Akordeon

Menentukan konten tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan dalam grup, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).
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_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_third_title

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

  • Gunakan nama kelas alt(ditandai pada kode di atas) untuk mengubah gaya ikon.
  • Jumlah widget akordeon yang dapat Anda tambahkan tidak terbatas.

Widget Pemutar Musik

Music Player yang dapat digunakan untuk memutar lagu menggunakan file audio MP3.

Format Penulisan:
<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 

Berfungsi untuk menunda pemutara video saat pengguna menggulir halaman.


Format penulisan :
<!--[ 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 pemuatan iframe dengan defer.js:

 


Format penulisan :
<!--[ 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 video Youtube ID yang ingin Anda tampilkan misalnya 9LW9DpmhrPE. ID video dapat ditemukan di url video Youtube, misalnya: youtube.com/watch?v=axRAL0BXNvw.

Tautan Link Eksternal

Berfungsi untuk memberi tahu pengguna jika tautan akan mengarah ke situs lain.
Contoh_link_external
Contoh_link_eksternal_alt
Format Penulisan:
  <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>
  

Tombol Dengan Tautan Link

Tombol Tautan

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

Tombol Tautan Alternatif

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

Tombol Dengan Icon

Download
Demo
Format Penulisan:
  <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>
  

Tombol Dengan Icon SVG

WhatsApp me! Buy now!
Format Penulisan:
  <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>
  

Tambahkan style='fill:#fff; margin-kanan:12px;' atau style='stroke:#fff; margin-kanan:12px;' atribut untuk memberi ikon SVG warna putih.

Dua Tombol Dalam Satu Baris


Format Penulisan:
  <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>
  

Tombol Unduhan Dengan Detail

Berfungsi untuk memberikan informasi file yang diunduh kepada pengguna.
file_name.zip 200kb

Format Penulisan:
  <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>
  

Contoh dengan Gambar Bukan Teks
about_me.png 10kb

Format Penulisan:
  <!--[ 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>
  

Tombol Unduhan Countdown

Fitur ini akan menampilkan hitungan mundur sebelum pengguna mengunduh file tersebut.

Fitur ini memerlukan tautan unduhan langsung dari file cloud. Kamu dapat menggunakan seperti Google Drive atau lainnya untuk mendapatkan tautan unduhan langsung dari file tersebut.

Mountain_Wallpaper.png Image 5.05MB 1920×1080 .webp

Format Penulisan:
    <div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(//i.ibb.co/zF0Xz8W/Pegunungan.png)'>
        <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'>Mountain_Wallpaper.png</span>
        <span data-text='Category'>Image</span>
        <span data-text='Size'>5.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.webp</span>
      </div>
    </div>
    <button onclick='download("https://i.ibb.co/zF0Xz8W/Pegunungan.png", "5", "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>
  

Referensi Artikel

Berfungsi untuk menulis daftar referensi artikel atau catatan kaki di bawah posting.

Source:
www.example.com

Source:
www.example_2.com


Format Penulisan:
  <p class='pRef'>Source:<br> www.example.com</p>
  
That's all, sorry the article will be updated with the passage of time.
Esa Adecsa
Ordinary person with extraordinary dream ✨
Post a Comment
Search
Menu
Theme
Share
Additional JS