Berikut ini adalah panduan menggunakan template Minima Lite - Theme62. Jika masih belum memahaminya, anda dapat menanyakan di kolom komentar atau melalui kontak kami untuk respon balas lebih cepat.

https://theme62.com/page/contact

Dashboard Template

Theme62 memiliki dashboard template sendiri yang digunakan untuk mengatur template blogger anda.

Anda dapat dengan mudah mengatur tag meta, tampilan, menu navigasi, plugin, dan lainnya hanya dengan mengisi dan drag-and-drop saja, termasuk update/ganti template.

Silahkan kunjungi link berikut untuk melihat fitur-fitur dashboard template Theme62.

https://theme62.com/my/template

Typography

Berisi tentang gaya penulisan konten.

Heading

Anda dapat menggunakan heading H1-H6 di dalam konten, namun kami tidak menyarankan menggunakan heading H1 untuk masalah SEO.

Contoh Kode :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Hasil :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Terdapat beberapa gaya paragraf yang dapat anda terapkan.

Class	Keterangan
indent	Paragraf sedikit menjorok ke dalam di baris pertama.
dropcap	Huruf kapital besar di huruf pertama paragraf.

Paragraph Default

Tampilan bawaan paragraf.

Contoh Kode :

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

Paragraph Text Indent

Paragraf sedikit menjorok ke dalam di baris pertama.

Contoh Kode :

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

Paragraph Drop Cap

Huruf kapital besar di huruf pertama paragraf.

Contoh Kode :

<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

Digunakan untuk membuat kutipan.

Contoh Kode :

<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

Contoh Kode :

<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

Digunakan untuk membuat tombol link, terdapat beberapa gaya tombol link yang dapat anda terapkan.

Contoh Kode :

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

Hasil :

Default Button Rounded Button Outlined Button Download Mix Button

Download Link

Digunakan untuk membuat tombol download dengan tambahan beberapa elemen.

Download Link Default

Tampilan bawaan download link.

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

Contoh Kode :

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

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

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 :

List

Digunakan untuk membuat list symbol atau number.

List symbol

Contoh Kode :

<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

Contoh Kode :

<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

Terdapat beberapa gaya tabel yang dapat anda terapkan.

Class	Keterangan
table-compact	Tiap baris lebih rapat
table-header	Menambah blok warna di header tabel
table-striped	Menambah gaya zebra-striping antar baris
table-hover	Mengaktifkan hover pada baris
table-sticky-t	Baris pertama selalu tampil di atas walau di-scroll
table-sticky-l	Kolom paling kiri selalu tampil di kiri walau di-scroll
table-border-box	Menambah border di sisi tabel
table-border-x	Menambah border horizontal
table-border-y	Menambah border vertikal
table-noborder-box	Menghapus border di sisi tabel
table-noborder-x	Menghapus border horizontal
table-noborder-y	Menghapus border vertikal
table-none	Menghapus format tabel dari template Theme62

Table Default

Tampilan bawaan tabel menggunakan gaya table-border-box table-border-x, sehingga anda tidak perlu menambahkannya.

Contoh Kode :

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

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 Compact

Tiap baris lebih rapat.

Contoh Kode :

<table class="table-compact">
  ...kode yang sama dengan sebelumnya...
</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

Menambah blok warna di header tabel.

Contoh Kode :

<table class="table-header">
  ...kode yang sama dengan sebelumnya...
</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 Striped

Menambah gaya zebra-striping antar baris.

Contoh Kode :

<table class="table-striped">
  ...kode yang sama dengan sebelumnya...
</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 Hover

Mengaktifkan hover pada baris.

Contoh Kode :

<table class="table-hover">
  ...kode yang sama dengan sebelumnya...
</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 Sticky

Baris atau kolom pertama selalu tampil walau di-scroll.

Contoh Kode :

<table class="table-sticky-t">
  ...kode yang sama dengan sebelumnya...
</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 Border

Menambah atau menghapus border di tabel.

Contoh Kode :

<table class="table-noborder-box table-border-y">
  ...kode yang sama dengan sebelumnya...
</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 None

Menghapus format tabel dari template Theme62.

Contoh Kode :

<table class="table-none">
  ...kode yang sama dengan sebelumnya...
</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

Menambah beberapa gaya sekaligus pada tabel.

Contoh Kode :

<table class="table-header table-striped table-hover table-sticky-t table-sticky-l table-border-y">
  ...kode yang sama dengan sebelumnya...
</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

Columns

Digunakan untuk membuat beberapa element menjadi tumpukan kolom.

Terdapat beberapa gaya columns yang dapat anda terapkan.

Style	Keterangan
--gap	Celah antar element, default: 10px
--num	Jumlah column, default: 2
--num-xs	Jumlah column jika ukuran layar >450px
--num-sm	Jumlah column jika ukuran layar >600px
--num-md	Jumlah column jika ukuran layar >768px
--num-lg	Jumlah column jika ukuran layar >992px

Contoh Kode :

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

Slider/Carousel

Digunakan untuk membuat slider/carousel.

Terdapat beberapa gaya slider/carousel yang dapat anda terapkan.

Style	Nilai	Keterangan
--height	[length]	Ketinggian slider. Jika tidak diisi, maka tinggi slider akan menyesuaikan tinggi dari elemen slider.
--timing	[time]	Waktu untuk autoplay slider. Jika tidak diisi, maka autoplay akan dimatikan. Rekomendasi nilai adalah 4 detik (4s).
--num	[num]	Jumlah item pada slider. Jika menggunakan --timing, maka --num wajib diisi.
--gap	[length]	Jarak celah antar item slider.
--space	[length]	Jarak ruang antar item slider.
--align	start|center|end	Penjajaran item slider, berguna jika mengatur --space.

Contoh Kode :

<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

Digunakan untuk membuat pesan peringatan, terdapat beberapa gaya alert yang dapat anda terapkan.

Contoh Kode :

<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

Digunakan untuk membuat konten yang dapat ditutup dan dibuka, terdapat beberapa fungsi accordion yang dapat anda terapkan.

Class	Keterangan
accordion-single	Konten hanya terbuka salah satu
accordion-multiple	Konten dapat dibuka bersama
open	Konten akan terbuka di awal

Accordion Default

Fungsi bawaan accordion menggunakan accordion-multiple, sehingga anda tidak perlu menambahkannya.

Contoh Kode :

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

Contoh Kode :

<div class="accordion accordion-single">

Hasil :

Accordion Open

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

Contoh Kode :

<div class="accordion-title open">

Hasil :

Syntax Highlighter

Digunakan untuk membuat syntax highlighter, dengan tambahan fitur bernomor dan salin kode.

Kode anda harus di-parse sebelum diterapkan dengan Syntax Highlighter, anda bisa menggunakan tools Parse HTML berikut :

Parse HTML

Atribut	Keterangan
data-lang	Menetapkan bahasa syntax
data-label	Menetapkan label syntax

Syntax Highlighter Default

Tanpa menetapkan data-lang dan data-label hanya memiliki fitur bernomor dan salin kode, tidak dengan menyorot sintaks.

Contoh Kode :

<pre><code>
function getScore() {
  const num1 = 2;
  const num2 = 3;
  const name = &#039;Arga&#039;;
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns &quot;Arga scored 5&quot;
console.log(score);
</code></pre>

Hasil :

function getScore() {
  const num1 = 2;
  const num2 = 3;
  const name = 'Arga';
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns "Arga scored 5"
console.log(score);

Syntax Highlighter + mark

Digunakan untuk menandai sintaks yang penting dengan berbagai pilihan warna.

Class pilihan warna yang valid adalah sebagai berikut :
red, pink, purple, indigo, blue, cyan, teal, green, orange, brown.

Tag <mark> tidak perlu di-parse agar dapat bekerja semestinya.

Contoh Kode :

<pre><code>
function getScore() {
  const <mark class="red">num1 = 2</mark>;
  const <mark class="pink">num2 = 3</mark>;
  const <mark class="purple">num3 = 4</mark>;
  const <mark class="indigo">num4 = 5</mark>;
  const <mark class="blue">num5 = 6</mark>;
  const <mark class="cyan">num6 = 7</mark>;
  const <mark class="teal">num7 = 8</mark>;
  const <mark class="green">num8 = 9</mark>;
  const <mark class="orange">num9 = 10</mark>;
  const <mark class="brown">num10 = 11</mark>;
  const name = &#039;Arga&#039;;
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns &quot;Arga scored 5&quot;
console.log(score);
</code></pre>

Hasil :

function getScore() {
  const num1 = 2;
  const num2 = 3;
  const num3 = 4;
  const num4 = 5;
  const num5 = 6;
  const num6 = 7;
  const num7 = 8;
  const num8 = 9;
  const num9 = 10;
  const num10 = 11;
  const name = 'Arga';
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns "Arga scored 5"
console.log(score);

Syntax Highlighter + data-lang

Menetapkan data-lang akan menyorot sintaks sesuai bahasa yang ditetapkan, data-label terisi otomatis sesuai label bahasa.

Berikut ini adalah bahasa yang tersedia :

data-lang	Language Label
plain plaintext text txt	Plain text
html	HTML
xml	XML
svg	SVG
mathml	MathML
ssml	SSML
rss	RSS
css	CSS
clike	C-like
js	JavaScript
abap	ABAP
abnf	ABNF
al	AL
antlr4 g4	ANTLR4
apacheconf	Apache Configuration
apl	APL
aql	AQL
ino	Arduino
arff	ARFF
armasm arm-asm	ARM Assembly
art	Arturo
asciidoc adoc	AsciiDoc
aspnet	ASP.NET (C#)
asm6502	6502 Assembly
asmatmel	Atmel AVR Assembly
autohotkey	AutoHotkey
autoit	AutoIt
avisynth avs	AviSynth
avro-idl avdl	Avro IDL
awk	AWK
gawk	GAWK
sh	Shell
basic	BASIC
bbcode	BBcode
bbj	BBj
bnf	BNF
rbnf	RBNF
bqn	BQN
bsl	BSL (1C:Enterprise)
oscript	OneScript
csharp cs dotnet	C#
cpp	C++
cfscript cfc	CFScript
cil	CIL
cilkc cilk-c	Cilk/C
cilkcpp cilk-cpp cilk	Cilk/C++
cmake	CMake
cobol	COBOL
coffee	CoffeeScript
conc	Concurnas
csp	Content-Security-Policy
css-extras	CSS Extras
csv	CSV
cue	CUE
dataweave	DataWeave
dax	DAX
django jinja2	Django/Jinja2
dns-zone-file dns-zone	DNS zone file
dockerfile	Docker
dot gv	DOT (Graphviz)
ebnf	EBNF
editorconfig	EditorConfig
ejs	EJS
etlua	Embedded Lua templating
erb	ERB
excel-formula xlsx xls	Excel Formula
fsharp	F#
firestore-security-rules	Firestore security rules
ftl	FreeMarker Template Language
gml gamemakerlanguage	GameMaker Language
gap	GAP (CAS)
gcode	G-code
gdscript	GDScript
gedcom	GEDCOM
gettext po	gettext
glsl	GLSL
gn gni	GN
linker-script ld	GNU Linker Script
go-module go-mod	Go module
graphql	GraphQL
hbs	Handlebars
hs	Haskell
hcl	HCL
hlsl	HLSL
http	HTTP
hpkp	HTTP Public-Key-Pins
hsts	HTTP Strict-Transport-Security
ichigojam	IchigoJam
icu-message-format	ICU Message Format
idr	Idris
ignore	.ignore
gitignore	.gitignore
hgignore	.hgignore
npmignore	.npmignore
inform7	Inform 7
javadoc	JavaDoc
javadoclike	JavaDoc-like
javastacktrace	Java stack trace
jq	JQ
jsdoc	JSDoc
js-extras	JS Extras
json	JSON
webmanifest	Web App Manifest
json5	JSON5
jsonp	JSONP
jsstacktrace	JS stack trace
js-templates	JS Templates
keepalived	Keepalived Configure
kts	Kotlin Script
kt	Kotlin
kumir kum	KuMir (КуМир)
latex	LaTeX
tex	TeX
context	ConTeXt
lilypond ly	LilyPond
emacs elisp emacs-lisp	Lisp
llvm	LLVM IR
log	Log file
lolcode	LOLCODE
magma	Magma (CAS)
md	Markdown
markup-templating	Markup templating
matlab	MATLAB
maxscript	MAXScript
mel	MEL
metafont	METAFONT
mongodb	MongoDB
moon	MoonScript
n1ql	N1QL
n4js n4jsd	N4JS
nand2tetris-hdl	Nand To Tetris HDL
naniscript nani	Naninovel Script
nasm	NASM
neon	NEON
nginx	nginx
nsis	NSIS
objectivec objc	Objective-C
ocaml	OCaml
opencl	OpenCL
openqasm qasm	OpenQasm
parigp	PARI/GP
objectpascal	Object Pascal
psl	PATROL Scripting Language
pcaxis px	PC-Axis
peoplecode pcode	PeopleCode
php	PHP
phpdoc	PHPDoc
php-extras	PHP Extras
plant-uml plantuml	PlantUML
plsql	PL/SQL
powerquery pq mscript	PowerQuery
powershell	PowerShell
promql	PromQL
properties	.properties
protobuf	Protocol Buffers
purebasic pbfasm	PureBasic
purs	PureScript
py	Python
qsharp qs	Q#
q	Q (kdb+ database)
qml	QML
rkt	Racket
cshtml razor	Razor C#
jsx	React JSX
tsx	React TSX
renpy rpy	Ren'py
res	ReScript
rest	reST (reStructuredText)
robotframework robot	Robot Framework
rb	Ruby
sas	SAS
sass	Sass (Sass)
scss	Sass (SCSS)
shell-session sh-session shellsession	Shell session
sml	SML
smlnj	SML/NJ
solidity sol	Solidity (Ethereum)
solution-file	Solution file
sln	Solution file
soy	Soy (Closure Template)
sparql rq	SPARQL
splunk-spl	Splunk SPL
sqf	SQF: Status Quo Function (Arma 3)
sql	SQL
stata	Stata Ado
iecst	Structured Text (IEC 61131-3)
supercollider sclang	SuperCollider
systemd	Systemd configuration file
t4-templating	T4 templating
t4-cs t4	T4 Text Templates (C#)
t4-vb	T4 Text Templates (VB)
tap	TAP
tt2	Template Toolkit 2
toml	TOML
trickle	trickle
troy	troy
trig	TriG
ts	TypeScript
tsconfig	TSConfig
uscript uc	UnrealScript
uorazor	UO Razor Script
uri	URI
url	URL
vbnet	VB.Net
vhdl	VHDL
vim	vim
visual-basic vb	Visual Basic
vba	VBA
wasm	WebAssembly
web-idl webidl	Web IDL
wgsl	WGSL
wiki	Wiki markup
wolfram wl	Wolfram language
nb	Mathematica Notebook
xeoracube	XeoraCube
xml-doc	XML doc (.net)
xojo	Xojo (REALbasic)
xquery	XQuery
yaml yml	YAML
yang	YANG

Contoh Kode :

<pre><code data-lang="js">
  ...kode yang sama dengan sebelumnya...
</code></pre>

Hasil :

function getScore() {
  const num1 = 2;
  const num2 = 3;
  const name = 'Arga';
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns "Arga scored 5"
console.log(score);

Syntax Highlighter + data-label

Menetapkan data-label akan menambahkan label sesuai yang ditetapkan.

Contoh Kode :

<pre><code data-label="src/app/score.js">
  ...kode yang sama dengan sebelumnya...
</code></pre>

Hasil :

function getScore() {
  const num1 = 2;
  const num2 = 3;
  const name = 'Arga';
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns "Arga scored 5"
console.log(score);

Syntax Highlighter + data-lang + data-label

Contoh Kode :

<pre><code data-lang="js" data-label="src/app/score.js">
  ...kode yang sama dengan sebelumnya...
</code></pre>

Hasil :

function getScore() {
  const num1 = 2;
  const num2 = 3;
  const name = 'Arga';
  return `${name} scored ${num1 + num2}`;
}

const score = getScore(); // Returns "Arga scored 5"
console.log(score);

Syntax Highlighter (Inline)

Untuk membuat Syntax Highlighter versi inline, anda hanya menggunakan <code> tanpa <pre>.

Contoh Kode :

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

Untuk membuat Syntax Highlighter versi multi-language, anda hanya menggunakan beberapa <code> di dalam <pre>.

Contoh Kode :

<pre>
<code data-lang="html">
&lt;!DOCTYPE html&gt;
&lt;html dir=&quot;ltr&quot; lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Sample Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;What is Theme62?&lt;/h1&gt;
    &lt;p&gt;Theme62 is the best blogger template provider website with features inspired by WordPress.&lt;/p&gt;
    &lt;p&gt;&lt;a id=&quot;visit&quot; href=&quot;https://theme62.com&quot;&gt;Visit Theme62.com&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>
<code data-lang="css">
*, ::after, ::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  opacity: .9;
  transition: opacity .1s;
}
</code>
<code data-lang="js">
function getTextContent(){
  let x = document.getElementById(&quot;visit&quot;);
  return x.textContent;
}
console.log(getTextContent()); // Visit Theme62.com
</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

Syntax Highlighter (Multi-Language) Open

Code akan terbuka di awal.

Contoh Kode :

<pre>
<code data-lang="html">
...kode yang sama dengan sebelumnya...
</code>
<code data-lang="css" class="open">
...kode yang sama dengan sebelumnya...
</code>
<code data-lang="js">
...kode yang sama dengan sebelumnya...
</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

Fungsi hampir sama dengan Accordion. Terdapat beberapa gaya nav tabs yang dapat anda terapkan.

Class	Keterangan
horizontal	Susunan navigasi tab horizontal
vertical	Susunan navigasi tab vertikal
open	Konten akan terbuka di awal

Nav Tabs Default

Tampilan bawaan Nav Tabs menggunakan gaya horizontal dan open di konten pertama, sehingga anda tidak perlu menambahkannya.

Contoh Kode :

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

Nav Tabs Vertical

Susunan navigasi tab vertikal.

Contoh Kode :

<div class="nav-tabs vertical">
  ...kode yang sama dengan sebelumnya...
</div>

Hasil :

Nav Tabs Open

Konten akan terbuka di awal.

Contoh Kode :

<div class="nav-tabs">
  <ul class="nav-tabs-label">
    <li>
      Deskripsi
    </li>
    <li class="open">
      Pengiriman
    </li>
    <li>
      Harga
    </li>
  </ul>
  ...kode yang sama dengan sebelumnya...
</div>

Hasil :

Nav Tabs + Icon

Anda juga dapat menambahkan icon di label dengan cara menambahkan kode svg.

Contoh Kode :

<div class="nav-tabs">
  <ul class="nav-tabs-label">
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
      Deskripsi
    </li>
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
      Pengiriman
    </li>
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
      Harga
    </li>
  </ul>
  ...kode yang sama dengan sebelumnya...
</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.

Contoh Kode :

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

Hasil :

Sponsored Post

Dapat digunakan untuk postingan sponsor, guestpost, atau postingan berbayar.

Anda hanya perlu menambahkan label "Sponsored" pada postingan.

Menerapkan ini akan menghilangkan dan menonaktifkan beberapa fitur di postingan tersebut, seperti: info penulis, komentar, dan plugin watermark.

Lain-lain

Dokumentasi selengkapnya kami tulis secara terpisah di website Theme62, silahkan kunjungi link berikut :

https://theme62.com/docs

Daftar isi :

• Cara Mendapatkan Template
• Install dan Update Template
• Panduan Widget Follow Us
• Panduan Widget Post by Labels
• Jangan Gunakan Widget Ini
• Widget Generator
• Panduan Lazyload
• Panduan Plugin AMP Lite
• Panduan Plugin Adsense
• Panduan Plugin Insert to Post
• Panduan Plugin Split Post
• Panduan Plugin Table of Content
• Panduan Plugin Shortlink
• Panduan Plugin Safelink
• Panduan Plugin Single Page Application
• Panduan Shortcode Statis
• Panduan Shortcode Dinamis
• Panduan Blade Codes