Typography Template Modie UI plus Bootstrap

Sebagian besar fitur template ini hanya dapat digunakan dalam mode editor 'Tampilan HTML', sehingga tidak dapat beralih ke mode 'Tampilan menulis'. Cara menggunakan beberapa fitur kode script Typography Template Modie UI plus Bootstrap , sebagai berikut.

Tutorial

Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'
Pilih' Tampilan HTML '.

Accordion 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).

Title_is_here

Your_text_is_here.

Title_is_here

Your_text_is_here.

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

Accordion Skema FAQ di Microdata

Title_is_here

Your_text_is_here.

Title_is_here

Your_text_is_here.

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

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.

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>

Gaya lain :

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>

Social 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. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

<blockquote class='pu_blq' data-author='Anonymous'>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.</blockquote>

Code Box Pre

Cara membuat wadah kotak kode HTML, CSS, dan JavaScipt. Codebox ini memiliki tombol download dan copy. Silahkan copy paste kode script di bawah ini.

<div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'>
  <pre>
      <!-- Code -->
  </pre>
</div>

Hasil nya :

    Code

Gambar dengan Teks dan Lightbox Otomatis

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

image caption

Format Penulisan :

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQ0tyaPmgSqYmldhoqiBIRv_WBr2zYlhTHHWa0LKjFFVJt5xGInoz7AVL8cLu_S7Z0GfW_U8o0Wc0fRT61LpsdxlIcVxRXMhU3Zdk6wxgg0CDjpfTNbkBfDzPSsLjCLCE1VbuP1c654lq/s0/travel-construction-of-new-highway.jpg' width="1280" height="718"/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Gambar dengan Tata Letak Kisi / Grid

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 Tampilkan Semua Fungsi

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

Show All

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 Tata Letak Gulir

Sama seperti layout gambar di atas, hanya saja pada tampilan mobile gambar akan tersusun paralel 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.

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 agar skor PageSpeed blog lebih tinggi, gambar hanya akan dimuat saat pengguna menggulir ke area gambar. Semua gambar dalam 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>

Material Design Box

Cara membuat tabel material design box pada template modie-ui
Anda hanya perlu copy paste kode html di bawah ini di halaman postingan anda

1.

<div class="mdb">
<h2>Judul1</h2>
<!--text kalian di sini-->
</div>

Judul1

text disini...

<div class="mdb box-blue">
<h2>Judul2</h2>
<!--text kalian di sini-->
</div>

Judul2

teks disini..

<div class="mdb box-yellow">
<h2>Judul3</h2>
<ul>
<li>text kalian</li>
<li>text kalian</li>
</ul>
</div>

Judul3

text kalian
text kalian

<div class="mdb">
<h2>Judul4</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>Template Blogger Modie-UI V2.6</td></tr>
<tr><td><b>Lisensi</b></td> <td>Personal</td></tr>
<tr><td><b>Versi</b></td> <td>2.6</td></tr>
<tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr>
</tbody>
</table>
</div>

Judul4

Nama	Template Blogger Modie-UI V2.6
Lisensi	Personal
Versi	2.6
Harga	Rp.100.000

Number List Style

Copy paste kode script di bawah ini.

1.

<ol class="style1">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Content
Content
Content
Content
Content
Content
Content

<ol class="style2">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Content
Content
Content
Content
Content
Content
Content

Note Block

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau kalimat highlight, ada dua style yang bisa kamu coba diantaranya:

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>

Warna lain :

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>

Post Break

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

Format Penulisan :

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

Paragraph with Text Indent

Pelanggan sangat penting, pelanggan akan diikuti oleh pelanggan. Untuk vestibulum, investasi dilakukan, dan pemicunya berguna. Mauris vel diam pelentesque lorem lacinia luctus.

Your_paragraph_is_here.

Format Penulisan :

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

Paragraf dengan Drop cap

M adalah huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas menurun biasanya dua garis atau lebih. Drop cap akan mengubah ukuran huruf pertama paragraf sehingga menjatuhkan satu atau lebih baris ke bawah. Banyak jenis media cetak yang menggunakan drop cap seperti buku, majalah, surat kabar dan sebagainya karena dapat menambah daya tarik visual.

Your_paragraph_is_here.

Format Penulisan :

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

Referensi Posting

Untuk menulis daftar referensi atau catatan kaki di bawah posting.

Source:
www.example.com

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

Sub Judul

Untuk mengubah Header Subtitle pada postingan atau halaman tertentu.

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

Safelink Tautan

Kode script safelink otomatis halaman postingan sudah tertanam di template. Anda hanya perlu copy paste kode html di bawah ini, untuk link tautan di halaman postingan anda.

<div style="text-align:center"><a class="button safeL" href="#" data-href="Your Url here"><i class="icon demo"></i>View Demo</a></div>

Keterangan :
- Ganti text yang di sorot, dengan alamat Url yang dituju.

Demo Safelink

Syntax Highlighter

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

Your_code_is_here

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>

Keterangan :
Penambahan kode warna pada sintaks dapat ditulis secara manual.

- Ubah data-text='.html' untuk menentukan format kode lain, yaitu data-text='.css' , data-text='.js', data-text='.php', dll
- Nilai 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 nilai misalnya 0 - 400px untuk menentukan tinggi maksimum sintaks hanya 400 piksel.
- Gunakan code_here untuk menambahkan warna merah/oranye.
- Gunakan code_here untuk menambahkan warna biru.
- Gunakan code_here untuk menambahkan warna hijau.
- Gunakan code_here untuk menambahkan warna abu-abu.
- Gunakan code_here untuk menambahkan blok warna biru.

Syntax Automatic Color 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>

Format Penulisan :

<!--[ 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;'>
&lt;!DOCTYPE html&gt;
&lt;html dir=&#039;ltr&#039; lang=&#039;en&#039;&gt;
  &lt;head&gt;
    &lt;title&gt;Sample Page&lt;/title&gt;
  &lt;/head&gt;

  &lt;!--[ &lt;body&gt; open ]--&gt;
  &lt;body&gt;
    &lt;p&gt;Sample content here!&lt;/p&gt;
  &lt;/body&gt;
  &lt;!--[ &lt;/body&gt; close ]--&gt;
&lt;/html&gt;  
  </pre>
</div>

Syntax Multi Functional 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>

Syntax Multi Tabs Highlighter

Your_code_is_here

Your_code_is_here

Your_code_is_here

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>

Table of Content Manual

Menggunakan Table of Content manual lebih rumit daripada versi otomatis, Anda harus menambahkan atribut ID yang berbeda di setiap tag judul dan menuliskannya di daftar konten.

Contents

Your_Heading

Your_Heading
1. Sub_Heading_1

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>

Table of Content - Semi Auto

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

Table of Contents

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>

Toggle Show / Hide

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

Spoiler:

Your_text_is_here.

Format Penulisan :

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

Table

Tabel pada tema ini sudah di setting responsive, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak tata letak maka secara otomatis tabel akan memiliki fungsi scroll.

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

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

NB :
-white-space:nowrap; menentukan teks menjadi satu baris, tidak akan nge-wrap ke baris berikutnya dan akan berlanjut sampai tag  ditemukan.
- min-width:100%; menentukan lebar minimum tabel, anda dapat mengubahnya ke unit px misalnya 500px. Ubah ke angka 0 jika ingin lebar tabel ditentukan secara otomatis.

Tautan Tombol

Title_link

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

Gaya lainnya : Title_link

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

Dengan Icon : Title_link Title_link

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

Dengan SVG : 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>

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

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>

Tautan Eksternal

Memberi tahu pengguna jika tautan 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>

Unduhan Kotak Hitung Mundur

Fitur ini akan menampilkan hitungan mundur sebelum pengguna mengunduh file apa pun.
Fitur ini memerlukan tautan unduhan langsung dari file cloud. Anda dapat menggunakan Google Drive untuk mendapatkan tautan unduhan langsung dari suatu file. Dengan Gambar :

Wallpaper.png Wallpaper 3.05MB 1920×1080 .png

Tanpa Gambar :

Wallpaper.png Wallpaper 3.05MB 1920×1080 .png

Format Penulisan :

<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'>Wallpaper.png</span>
        <span data-text='Category'>Wallpaper</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>

Unduhan Tautan

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, 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT49v9wAuJTPmUhTp0YwpBiuOI2W4U82kBbxEvLhIhFtVtvqXVHXClaBoWEvqn7cEW93GCM4drSFvEA8qRTg1mP618KztAtJ8T5bAQGJ3gPAwFNUj8Aqv2EflDuuHd3cjDG_ycfxWREfADlfNP1lZYq1O-cnAEXrfCkLt0Im4frd8hUSxeTOYAUhq7/s225/blogx-removebg-preview.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>

Youtube Lazy Video

Kegunaannya untuk menunda memuat 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>

hasilnya :

Menunda pemuatan iframe dengan fungsi kode 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>

Keterangan :
- Ubah bagian yang ditandai dengan video Youtube ID yang ingin Anda tampilkan.
- ID video dapat ditemukan di url video Youtube, misalnya: https://www.youtube.com/watch?v=NpKkJFRnTsk&list=PLgg-pDMC6xVDDUryGkyZ1u7eTA8e8ibGi&index=2

Go to Link

Feeds

Typography Template Modie UI plus Bootstrap

Typography Template Modie UI plus Bootstrap

Tutorial

Accordion atau Akordeon

Accordion Skema FAQ di Microdata

Blockquote

Code Box Pre

Gambar dengan Teks dan Lightbox Otomatis

Gambar dengan Tata Letak Kisi / Grid

Gambar dengan Tampilkan Semua Fungsi

Gambar dengan Tata Letak Gulir

Gambar Lazyload

Material Design Box

Judul1

Judul2

Judul3

Judul4

Number List Style

Note Block

Post Break

Paragraph with Text Indent

Paragraf dengan Drop cap

Related Post Manual

Related Post Otomatis

Referensi Posting

Sub Judul

Safelink Tautan

Syntax Highlighter

Syntax Automatic Color Highlighter

Syntax Multi Functional Highlighter

Syntax Multi Tabs Highlighter

Table of Content Manual

Table of Content - Semi Auto

Toggle Show / Hide

Table

Tautan Tombol

Tautan Eksternal

Unduhan Kotak Hitung Mundur

Unduhan Tautan

Youtube Lazy Video

Posting Komentar

Modie-UI