Duwi Nurhayati: Shortcode Template

"Shortcode Template: Panduan praktis untuk membuat dan mengoptimalkan shortcode dalam pengembangan web, meningkatkan fungsionalitas dengan mudah."

Untuk memaksimalkan template, berikut adalah kode - kode yang bisa diterapkan. CSS dan Jquery sudah terpasang di dalam template, tinggal aktifkan kode html di dalam postingan.

Styling Text

Digunakan untuk membuat tombol dengan berbagai gaya.

HTML Salin

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

Hasilnya

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

Accordion

Digunakan untuk membuat daftar yang bisa diperluas atau dikompresi.

HTML Salin


<div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header">Judul 1</div>
            <div class="accordion-content">Konten untuk Judul 1</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">Judul 2</div>
            <div class="accordion-content">Konten untuk Judul 2</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">Judul 3</div>
            <div class="accordion-content">Konten untuk Judul 3</div>
        </div>
    </div>

Hasilnya

Judul 1

Konten untuk Judul 1

Judul 2

Konten untuk Judul 2

Judul 3

Konten untuk Judul 3

Tabs

Digunakan untuk membuat konten yang dapat dipisah dalam beberapa tab.

HTML Salin


<div class="tabs">
        <div class="tab-buttons">
            <div class="tab-button active" data-tab="tab1">Tab 1</div>
            <div class="tab-button" data-tab="tab2">Tab 2</div>
            <div class="tab-button" data-tab="tab3">Tab 3</div>
        </div>
        <div class="tab-content active" id="tab1">Konten Tab 1</div>
        <div class="tab-content" id="tab2">Konten Tab 2</div>
        <div class="tab-content" id="tab3">Konten Tab 3</div>
    </div>

Hasilnya

Tab 1

Tab 2

Tab 3

Konten Tab 1

Konten Tab 2

Konten Tab 3

Hints

Digunakan untuk menampilkan kotak peringatan dengan warna tertentu.

HTML Salin


<div class="hint hint-info">
        <h4>Informasi</h4>
        <span>Ini adalah pesan info yang berguna.</span>
    </div>
    <div class="hint hint-warning">
        <h4>Peringatan</h4>
        <span>Harap berhati-hati terhadap peringatan ini.</span>
    </div>
    <div class="hint hint-danger">
        <h4>Bahaya</h4>
        <span>Ini adalah pesan darurat, mohon waspada.</span>
    </div>

Hasilnya

Informasi

Ini adalah pesan info yang berguna.

Peringatan

Harap berhati-hati terhadap peringatan ini.

Bahaya

Ini adalah pesan darurat, mohon waspada.

Column

Digunakan untuk membuat tata letak berbasis kolom.

HTML Salin


<div class="container two-columns">
        <div class="column col-1">
            <h4>Left Content</h4>
            <span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</span>
        </div>
        <div class="column col-2">
            <h4>Mid Content</h4>
            <span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</span>
        </div>
    </div>
    <div class="container three-columns">
        <div class="column">
            <h4>Left Content</h4>
            <span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</span>
        </div>
        <div class="column">
            <h4>Mid Content</h4>
            <span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</span>
        </div>
        <div class="column">
            <h4>Right Content</h4>
            <span>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</span>
        </div>
    </div>

Hasilnya

Left Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Mid Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Left Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Mid Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Right Content

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Buttons

Digunakan untuk membuat tombol dengan berbagai gaya.

HTML Salin


<!-- Default Button -->
    <button class="btn">Default Button</button>

    <!-- Rounded Button -->
    <button class="btn btn-rounded">Rounded Button</button>

    <!-- Outlined Button -->
    <button class="btn btn-outlined">Outlined Button</button>

    <!-- Button dengan Icon Download -->
    <button class="btn btn-icon">Download</button>

    <!-- Rounded Outlined Button dengan Icon Download -->
    <button class="btn btn-rounded-outlined btn-icon">Download</button>

Hasilnya

List dan Sublist

Digunakan untuk membuat tombol dengan berbagai gaya.

HTML Salin


        <ul>
        <li>Item 1
            <ul>
                <li>Sub Item 1.1
                    <ul>
                        <li>Sub Item 1.1.1</li>
                        <li>Sub Item 1.1.2</li>
                    </ul>
                </li>
                <li>Sub Item 1.2</li>
            </ul>
        </li>
        <li>Item 2</li>
    </ul>

Hasilnya

Item 1
- Sub Item 1.1
  - Sub Item 1.1.1
  - Sub Item 1.1.2
- Sub Item 1.2
Item 2

Number List dan Sub Number List

Digunakan untuk membuat tombol dengan berbagai gaya.

HTML Salin


        <ol>
        <li>Item 1
            <ol>
                <li>Sub Item 1.1
                    <ol>
                        <li>Sub Item 1.1.1</li>
                        <li>Sub Item 1.1.2</li>
                    </ol>
                </li>
                <li>Sub Item 1.2</li>
            </ol>
        </li>
        <li>Item 2</li>
    </ol>

Hasilnya

Item 1
1. Sub Item 1.1
  1. Sub Item 1.1.1
  2. Sub Item 1.1.2
2. Sub Item 1.2
Item 2

Tabel

table-compact, table-header, table-striped, table-hover, table-sticky-t, table-sticky-l, table-border-box, table-border-x, table-border-y, table-noborder-box, table-noborder-x, table-noborder-y, table-none.

HTML Salin


        <h3>table-compact</h3>
    <table class="table-compact table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-header</h3>
    <table class="table-header table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-striped</h3>
    <table class="table-striped table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr><tr><td>2</td><td>Budi</td><td>30</td></tr></tbody>
    </table>

    <h3>table-hover</h3>
    <table class="table-hover table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-sticky-t</h3>
    <table class="table-sticky-t table-border-box" style="height: 200px; overflow: auto;">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr><tr><td>2</td><td>Budi</td><td>30</td></tr></tbody>
    </table>

    <h3>table-sticky-l</h3>
    <table class="table-sticky-l table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-border-box</h3>
    <table class="table-border-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-border-x</h3>
    <table class="table-border-x">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-border-y</h3>
    <table class="table-border-y">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-noborder-box</h3>
    <table class="table-noborder-box">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

    <h3>table-none</h3>
    <table class="table-none">
        <thead><tr><th>#</th><th>Nama</th><th>Umur</th></tr></thead>
        <tbody><tr><td>1</td><td>Aldi</td><td>25</td></tr></tbody>
    </table>

📌 table default

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-compact

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-header

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-striped

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-hover

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-sticky-t

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-sticky-l

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-border-box

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-border-x

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-border-y

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-noborder-box

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

📌 table-none

No	Nama	Umur	Status	Alamat
1	Aldi	25	Pelajar	Bandung
2	Fabian	26	Pelajar	Bandung
3	Ferdinand	27	Pelajar	Bandung
4	Farrel	28	Pelajar	Bandung
5	Fiona	29	Pelajar	Bandung
6	Cijambe	30	Pelajar	Bandung
7	Uber	31	Pelajar	Bandung
8	Kiara	32	Pelajar	Bandung
9	Bojong	33	Pelajar	Bandung
10	Ando	34	Pelajar	Bandung

Syntax Highlighter

Digunakan untuk membuat tombol dengan berbagai gaya.

Hasilnya

HTML Salin

<div>Hello World</div>

JavaScript Salin

console.log('Hello World');

CSS Salin

.class { color: red; }

Custom Label Salin

This is a custom label example.

Python Example Salin

print("Hello World")

This is an inline code example.

Multi-Language Salin

<div>HTML Content</div>

console.log('JavaScript Content');

.class { color: red; }

Shortcode Template

Styling Text

Accordion

Tabs

Hints

Informasi

Peringatan

Bahaya

Column

Left Content

Mid Content

Left Content

Mid Content

Right Content

Buttons

List dan Sublist

Number List dan Sub Number List

Tabel

📌 table default

📌 table-compact

📌 table-header

📌 table-striped

📌 table-hover

📌 table-sticky-t

📌 table-sticky-l

📌 table-border-box

📌 table-border-x

📌 table-border-y

📌 table-noborder-box

📌 table-none

Syntax Highlighter

Terkait