Typography Theme62 - Dokumentasi Petunjuk Penggunaan

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

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

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.

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

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

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

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

1. List 1
2. List 2
   1. Sub List 2.1
   2. Sub List 2.2
   3. Sub List 2.3
3. List 3
4. 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

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

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

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

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

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

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

Accordion

Beberapa variasi untuk accordion.

Acorrdion Deafault

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

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

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

Singgel dan Open

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

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

Syntax Highlighter

Membuat kode hlml, CCS, JS, dll agar bisa di copy paste tanpa menyertakan kode lain

Syntax Highlighter (Inline)

<p>Lorem ipsum dolor <code data-lang="css">div {text-align: center;}</code> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Hasil

Lorem ipsum dolor div {text-align: center;} sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Syntax Highlighter (Multi-Language)

<pre>
<code data-lang="html">
...isi kode html yang sudah diparse...
</code>
<code data-lang="css" class="open">
...isi kode ccs yang sudah diparse...
</code>
<code data-lang="js">
...isi kode js yang sudah diparse...
</code>
</pre>

Hasil

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample Page</title>
  </head>
  <body>
    <h1>What is Theme62?</h1>
    <p>Theme62 is the best blogger template provider website with features inspired by WordPress.</p>
    <p><a id="visit" href="https://theme62.com">Visit Theme62.com</a></p>
  </body>
</html>


*, ::after, ::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  opacity: .9;
  transition: opacity .1s;
}


function getTextContent(){
  let x = document.getElementById("visit");
  return x.textContent;
}
console.log(getTextContent()); // Visit Theme62.com

Nav Tabs

<div class="nav-tabs">
  <ul class="nav-tabs-label">
    <li>
      Deskripsi
    </li>
    <li>
      Pengiriman
    </li>
    <li>
      Harga
    </li>
  </ul>
  <ul class="nav-tabs-content">
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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>
    </li>
    <li>
      <p>Aenean nulla quam, consequat et est in, vulputate tempus tellus. Phasellus ultricies purus vitae fringilla sollicitudin. In nec placerat sem. Cras non tempor eros. Pellentesque malesuada cursus enim a tincidunt. Duis sodales metus ut maximus egestas.</p>
    </li>
    <li>
      <p>Nunc eu nisl a augue fermentum blandit id aliquam erat. Sed quis dictum magna. Maecenas eu arcu eu quam porta venenatis at eu odio. Morbi eu justo gravida, venenatis magna eu, gravida quam. Sed tristique nisi nisl, nec lacinia mauris fringilla sed. Nam at ultricies urna, eu consectetur lacus. Ut sed felis pretium, fringilla ex quis, vulputate nunc. Nam sit amet varius neque, congue consectetur lorem. Suspendisse sit amet efficitur lorem. Vestibulum fermentum tempor leo, quis convallis dui congue nec.</p>
    </li>
  </ul>
</div>

Hasil

Parallax Ads

Digunakan untuk membuat iklan Adsense bergaya Parallax. Iklan parallax bekerja jika lebar layar di bawah 600px, selain itu maka tampil seperti iklan biasa. Silahkan buat Iklan Display, kemudian sesuaikan seperti berikut.

<div class="parallax-ads"><div class="parallax-item">
<!-- custom ad code [start] -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- custom ad code [end] -->
</div></div>