Typography Theme62 - Dokumentasi Petunjuk Penggunaan

Juli 11, 2026

Image By Theme62

Dokumentasi Tipography Theme62 ditulis ulang bertujuan untuk memudahkan penulisan blog kedepanya. Penulisan blog tanpa typography akan sulit bagi blogger pemula, khususnya yang berkaitan dengan kode atau koding pada tampilan HTML. Banyak hal yang perlu dilakukan dalam penulisan pada konten pada tampilan HTML, seperti membuat tabel, accordion, syntax, dan lain-lain.

Sebelumnya saya minta maaf kepada desainer Theme62, Mas Arga Faifuz, karena telah menulis ulang typography ini. Karena pada hari selasa, 7 Juli 2026 saya memutuskan untuk membeli template Theme62 dan mendapat informasi dari desainer tamplate bahwa, Theme62 akan tutup permanen.

Typography

berisi tentang penulisan konten pada template blogger Theme62.

Variasi Paragraf

Seperti paragraf dengan Tab di awal penulisan, huruf besar di awal tilisan dll.

Paragraf Nolmal


<p>Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
<p>Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>

Hasil

Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.

Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.

Paragraf Dengan Tab / Indent


<p class="indent">Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
<p class="indent">Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>

Hasil

Paragraf Drob Cap atau Huruf Besar Di Awal Tulisan


<p class="dropcap">Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
<p>Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>

Hasil

Blockquote


<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>

Hasil

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Styling Text


<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text</p>
<p>Example of <a href="#">Link</a> text</p>
<p>Example of <a href="#" target="_blank">Link new tab</a> text</p>
<p>Example of <abbr title="Abbreviation">abbr</abbr> text</p>
<p>Example of <mark>highlight</mark> text</p>
<p>Example of <del>deleted</del> text</p>
<p>Example of <b>bold</b> text</p>
<p>Example of <i>italic</i> text</p>
<p>Example of <u>underlined</u> text</p>
<p>Example of <sub>subscripted</sub> text</p>
<p>Example of <sup>superscripted</sup> text</p>

Hasil

Press Ctrl + C to copy text

Example of Link text

Example of Link new tab text

Example of abbr text

Example of highlight text

Example of ~~deleted~~ text

Example of bold text

Example of italic text

Example of underlined text

Example of _subscripted text

Example of ^{superscripted} text

Button Link


<a class="button" href="#">Default Button</a>
<a class="button rounded" href="#">Rounded Button</a>
<a class="button outlined" href="#">Outlined Button</a>
<a class="button icon-download" href="#">Download</a>
<a class="button rounded outlined icon-download" href="#">Mix Button</a>

Copy link download pada tanda ( # )

Hasil

Default Button Rounded Button Outlined Button Download Mix Button

Download Link

Digunakan untuk membuat tombol download dengan tambahan beberapa elemen.

Download Link Bawaah

Kode


<div class="box-download">
  <div>
    xml
  </div>
  <div>
    <span>template.xml</span>
    <span>150KB</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

xml

template.xml 150KB

Download

Download Link + Icon

Anda hanya perlu menambahkan kode svg, ukuran yang disarankan adalah 24px.


<div class="box-download">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M4 20q-.825 0-1.412-.587Q2 18.825 2 18V6q0-.825.588-1.412Q3.175 4 4 4h6l2 2h8q.825 0 1.413.588Q22 7.175 22 8v10q0 .825-.587 1.413Q20.825 20 20 20Zm12-2h4V8h-4v2h2v2h-2v2h2v2h-2ZM4 18h10v-2h2v-2h-2v-2h2v-2h-2V8h-2.825l-2-2H4v12ZM4 8V6v12V8Z"/></svg>
  </div>
  <div>
    <span>template.zip</span>
    <span>150KB</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

template.zip 150KB

Download

Download Link + Image

Anda hanya perlu menambahkan gambar menggunakan img.

Kode


<div class="box-download">
  <div>
    <img src="https://play-lh.googleusercontent.com/cF_oWC9Io_I9smEBhjhUHkOO6vX5wMbZJgFpGny4MkMMtz25iIJEh2wASdbbEN7jseAx=s64-rw">
  </div>
  <div>
    <span>Google Chat</span>
    <span>Google LLC</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Google Chat Google LLC

Download

Download Link + Image + Transparent

Digunakan untuk menghilangkan background abu-abu.

Contoh Kode :


<div class="box-download">
  <div class="transparent">
    <img src="https://play-lh.googleusercontent.com/cF_oWC9Io_I9smEBhjhUHkOO6vX5wMbZJgFpGny4MkMMtz25iIJEh2wASdbbEN7jseAx=s64-rw">
  </div>
  <div>
    <span>Google Chat</span>
    <span>Google LLC</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Google Chat Google LLC

Download

List

Membuat list symbol atau number.

List symbol


<ul>
  <li>List 1</li>
  <li>List 2
    <ul>
      <li>Sub List 2.1</li>
      <li>Sub List 2.2</li>
      <li>Sub List 2.3</li>
    </ul>
  </li>
  <li>List 3</li>
  <li>List 4</li>
</ul>

Hasil

List 1
List 2
- Sub List 2.1
- Sub List 2.2
- Sub List 2.3
List 3
List 4

List number


<ol>
  <li>List 1</li>
  <li>List 2
    <ol>
      <li>Sub List 2.1</li>
      <li>Sub List 2.2</li>
      <li>Sub List 2.3</li>
    </ol>
  </li>
  <li>List 3</li>
  <li>List 4</li>
</ol>

Hasil

List 1
List 2
1. Sub List 2.1
2. Sub List 2.2
3. Sub List 2.3
List 3
List 4

Table

Beberapa Variasi Tabel

Table Default


<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Table Compact


<table class="table-compact">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Hasil

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Table Header


<table class="table-header">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Hasil

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Table Mix


<table class="table-header table-striped table-hover table-sticky-t table-sticky-l table-border-y">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Hasil

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Kolom Gambar


<div class="columns" style="--num-sm: 3; --num-lg: 5">
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktR8BN6vDqJ75oOCn39JheCP3h0yKmVoQppRO0SSaa9qS8RJIGhQ-5mDL7QwnICemURkWND8tDbVmC65MCSJe_-noAWnbi0IPofWw4bxAoNcpXnRvAg0MbIv4gyy7tWiMIoWBd4hr32V54bclU0IpeeLJNAySjPxzifTDdjTA6S2LF4QR-kWvimy6/s1600/example-1.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKT0L8FHZZAAq090ciHugt6KxfE-F4GbG9iw56wsM6I79Ci4YxRz5DqksdPvqBsN-H0pDWx2ddOXNalmWudQ4hGy7nyJFuvjfKQqFTQLIk_RmM3Vj72zBm4d_eDHgxRTrrstbK-E89CK1j5cq-18N_FpOzg724r4kfo-dFVwmndOb1yBAwrHw4306m/s1600/example-2.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlmu_j-1aCGEWQMm_6urYT3khUg7TIJYTCZJpRu7ypwAQfuwKyw5acUoAZnu7er8ADCezZMZdYZNgiQaHEOZpbIhMOqYKxCojZMUEOlWFBsrgaPV9jDVyCjy6TS7145uUPKPp1pYbdUZZeWaXCL-ln_WOTarJ0MufACfPz3WXxIGxPZ-ZrWIdvhKF/s1600/example-3.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLobGRWj-S5e4pMi4WWQ8TxSQP3_SJqmeY9ZzaR97u1evTozjEX025h_4XGFn-SnnBpG4yKxF3uilYBtZEGGJmtDgtWAogqZUFRPYuqswWP3S12i9fQY5uyOLwZsDyFK66d5ZTaCFkY93VjHnd_f6q1GKAKLL7L5Hk8kwwoBdST7YjBEC64nYL38Lo/s1600/example-4.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWgL-DdsPXOGKZfk43mHn5ush45axO_51K3uW2Hyg-T-292e64eZOS5LMvJ9nVV2ycuSjUEUYA9Fkua_JqQLG-W_FGqGQ2nD7e1MlVoxlZjeaS_IOlQ5pMffRtNvdFl0Qm6SSo3b2tegz4JZqRaKdIlsTBakPd5bPMMvTJS4A7Mjz-i8UBDaqtTu3/s1600/example-5.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmKWsbtIJxRD1YIws2q7sHLF7DkMYizNNdZ6dq9C2uE9ejqjbEqfyX5WoeNQuU0nbQTFIbDBj8YkMIe2jmZNnxH35ypVNfkhrY_EFSlutz09kBO7-2SoEhLW408zbgQYRAGYFFxPgy_UGkurDs9lMOJbr_D_zMSthdwrQOs24FcF1o9bNl0mX7suCr/s1600/example-6.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P7FJkb7s2Pwewg8sShUTimlvYCeCW0nij0cqx7GG1HLbu3_n44FAvtnjM0H1k5jsbomzBep1u5TyOE-DzgoiN_E2Rb8QPAHRrq-F4j5wtyaNSdepJidG3mueJwVViG7RmdRsBmw789NRQsYkE_p1rKzRzEy7dhjZvrKeRR1ucr0TYaM_yoIc21DI/s1600/example-7.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsMvrPDtdKxhILYShw2iRoBSpi_rp3HIxjOPiwwcKF2URYCld0Nj6GriGYcju7UI4YD0I-KuBcb2Kz5M5tgX66A52JsOh32zyEAHQsYv7DaRO-VhCTijtP2UE6wdhCQGTCHt7C5_tw2GVwvdRBdhyoS9l0j3kD1sJX3jzUO-VsB-4LmF8nemCt_bqZ/s1600/example-8.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6TdbBeAZjH0_cqs9Vp0ks1JxU5fMpkdIotvghd8ohJEyJyGfIMqW4VTxfFtZ0JrDSLsCpb5uCRd5wdLqEWebzE2YmpWFkLuBPxNei03vLJAI2jJXVgVIuSxUMKMa4gsEqcCx7l2BWb9FgVsC0GNhq3LD0Et6mkgK4TycIxQq4xgC2RMHh5LSBrjj/s1600/example-9.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRh2e3E64eVmQwxKPigiyynpmgusQFy3M8ZJ3pSx1No7ZGmfeJLz43xBLNV6x1NgU2hBWuJlckbEkiIvjyMRHN0aZkimhHJSxJggPSjLtv4e31_pmTpTedqFzCM3qnXaP2aNInGa_yOuadHjcUW9ZlQCRM1xy-3KRsTLLg74Ls4w9Fj1whtADxdIy/s1600/example-10.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprvdsLk-9jZ45DGa-3g-hqBvMoJA_jjW_Ty8o3j6hcAdPupYA8aZgITop0biJSRj-zfOTSO_8OFazBhYrd3cxahV_vzIsn9xZOAhwZ4QyuTzFavSSZ6XzYF9d6OvdQ98B06hIG5BBuefIVYibmOCq5eqngnudMWj-2zHJnOX_mGfM3hvjyjcdr85r/s1600/example-11.jpg">
  </div>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QiIPKkfWO77gytKUgaQErKCCYmrav5bF00mSefiItolGgk3lkAkrnO03wQzmr6ICUrnsKAkpAmZvBU-j9dCjJhSveE03JpfNp1tF6CZ1bhVhEw_r3gtbiiwNQzKkgIMJaAruHVZqg2NDAbIAJIXWFMyr_kF3QfnvQJzFFpnayhaHawdJ7B6I8epI/s1600/example-12.jpg">
  </div>
</div>

Hasil

Gambar Slider


<div class="slider" style="--align: center; --num: 3; --height: 250px; --timing: 4s;">
  <div class="slider-viewport">
    <div class="slider-item">
      <div class="slider-container">
          <!-- Your code -->
      </div>
    </div>
    <div class="slider-item">
      <div class="slider-container">
          <!-- Your code -->
      </div>
    </div>
    <div class="slider-item">
      <div class="slider-container">
          <!-- Your code -->
      </div>
    </div>
    <!-- Tambahkan slider-item jika ingin menambahkan item lagi -->
  </div>
</div>

Hasil

Alert


<p class="alert alert-success">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="alert alert-info">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="alert alert-warning">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="alert alert-error">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>

Hasil

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Accordion


<!-- Accordion (Start) -->
<div class="accordion">

  <!-- Box (Start) -->
  <div>
    <div class="accordion-title">
      Main Title 1
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <!-- Box (End) -->
  
  <!-- Box (Start) -->
  <div>
    <div class="accordion-title">
      Main Title 2
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      
      <!-- Accordion (Start) -->
      <div class="accordion">
      
        <!-- Box (Start) -->
        <div>
          <div class="accordion-title">
             Subtitle 2.1
          </div>
          <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <!-- Box (End) -->
        
      </div>
      <!-- Accordion (End) -->
      
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
  </div>
  <!-- Box (End) -->
  
</div>
<!-- Accordion (End) -->

Hasil

Main Title 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Main Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Subtitle 2.1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Accordion Single

Agar accordion hanya terbuka salah satu dan yang lain tertutup otomatis, tambahkan class accordion-single di samping accordion.


<!-- Accordion (Start) -->
<div class="accordion accordion-single">

  <!-- Box (Start) -->
  <div>
    <div class="accordion-title">
      Main Title 1
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <!-- Box (End) -->
  
  <!-- Box (Start) -->
  <div>
    <div class="accordion-title">
      Main Title 2
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      
      <!-- Accordion (Start) -->
      <div class="accordion">
      
        <!-- Box (Start) -->
        <div>
          <div class="accordion-title">
             Subtitle 2.1
          </div>
          <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <!-- Box (End) -->
        
      </div>
      <!-- Accordion (End) -->
      
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
  </div>
  <!-- Box (End) -->
  
</div>
<!-- Accordion (End) -->

Hasil

Main Title 1

Main Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Subtitle 2.1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Acordino Open

Agar accordion tertentu dapat terbuka di awal, tambahkan class open di samping accordion-title.


<!-- Accordion (Start) -->
<div class="accordion">

  <!-- Box (Start) -->
  <div>
    <div class="accordion-title open">
      Main Title 1
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <!-- Box (End) -->
  
  <!-- Box (Start) -->
  <div>
    <div class="accordion-title">
      Main Title 2
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      
      <!-- Accordion (Start) -->
      <div class="accordion">
      
        <!-- Box (Start) -->
        <div>
          <div class="accordion-title">
             Subtitle 2.1
          </div>
          <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <!-- Box (End) -->
        
      </div>
      <!-- Accordion (End) -->
      
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
  </div>
  <!-- Box (End) -->
  
</div>
<!-- Accordion (End) -->

Hasil

Main Title 1

Main Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Subtitle 2.1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Singgel dan Open

Hasil

Postingan Lama

Berbagi

Facebook WhatsApp Twitter Telegram Line Tumblr LinkedIn Pinterest

Asal Ngeblog

Typography Theme62 - Dokumentasi Petunjuk Penggunaan

Typography

Variasi Paragraf

Paragraf Nolmal

Paragraf Dengan Tab / Indent

Paragraf Drob Cap atau Huruf Besar Di Awal Tulisan

Blockquote

Styling Text

Button Link

Download Link

Download Link Bawaah

Download Link + Icon

Download Link + Image

Download Link + Image + Transparent

Berbagi

Anda mungkin menyukai postingan ini

#{title}

Tidak ada komentar

Featured Post

Typography Theme62 - Dokumentasi Petunjuk Penggunaan

Label

Popular Posts

Icon Bagus

Typography Theme62 - Dokumentasi Petunjuk Penggunaan