Langsung ke konten utama

Documentasi theme datakodehiru

author profile

MAGIC Reincarnated

Web Developer
Banner

Documentasi theme datakodehiru

Developer {}

Elemen yang bisa digunakan untuk postingan atau halaman dengan style bertema progammer.

Elemen Kustom UI


<div class='image-thumb'>
  <img alt='#' src='#'/>
</div>
  

Struktur Typography

h1. Judul dev

h3. Judul dev

h4. Judul dev

h5. Judul dev
h6. Judul dev

Cerpen: Saat dia mencapai perbukitan pertama di Pegunungan Italic, dia melihat terakhir kali ke cakrawala kota asalnya Bookmarksgrove, judul utama Alphabet.


Code Syntax Highlighting

Codebox syntax powered by highlightjs


<!-- Blok Kode Default -->
<div class='code-block'>
  <pre><code>kode di sini...</code></pre>
</div>

<!-- Blok Kode HTML -->
<div class='code-block html'>
  <pre><code>kode di sini...</code></pre>
</div>

<!-- Blok Kode CSS -->
<div class='code-block css'>
  <pre><code>kode di sini...</code></pre>
</div>

<!-- Blok Kode JavaScript -->
<div class='code-block js'>
  <pre><code>kode di sini...</code></pre>
</div>
  

Tabel Struktur Data

# Nama Depan Nama Belakang Akun
1 Mark Otto @mdo

<div class="data-table">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nama Depan</th>
        <th scope="col">Nama Belakang</th>
        <th scope="col">Akun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
    </tbody>
  </table>
</div>
  

Comment Block

Kutipan, dimuat dalam elemen blockquote.

-- dalam Judul Sumber

Runtime Alert


<div class="alertbox alertbox-primary">Pesan runtime...</div>
<div class="alertbox alertbox-secondary">Pesan runtime...</div>
<div class="alertbox alertbox-success">Pesan runtime...</div>
<div class="alertbox alertbox-danger">Pesan runtime...</div>
<div class="alertbox alertbox-warning">Pesan runtime...</div>
<div class="alertbox alertbox-info">Pesan runtime...</div>
<div class="alertbox alertbox-light">Pesan runtime...</div>
<div class="alertbox alertbox-dark">Pesan runtime...</div>
  
Pesan runtime...
Pesan runtime...
Pesan runtime...
Pesan runtime...
Pesan runtime...
Pesan runtime...
Pesan runtime...
Pesan runtime...

Daftar (ul li) dalam Tabel


<p>Fungsi <mark>formatTimestamp_hstry</mark> digunakan untuk memformat waktu (timestamp) ke beberapa jenis format, seperti:</p>
<ul>
  <li><strong>12-jam:</strong> Format waktu 12 jam, contoh: <mark>15/08/2024 02:30 PM</mark>.</li>
  <li><strong>24-jam:</strong> Format waktu 24 jam, contoh: <mark>15/08/2024 14:30</mark>.</li>
  <li><strong>timeago:</strong> Format waktu relatif, contoh: <mark>5 menit yang lalu</mark>.</li>
</ul>
  

Fungsi formatTimestamp_hstry digunakan untuk memformat waktu (timestamp) ke beberapa jenis format, seperti:

  • 12-jam: Format waktu 12 jam, contoh: 15/08/2024 02:30 PM.
  • 24-jam: Format waktu 24 jam, contoh: 15/08/2024 14:30.
  • timeago: Format waktu relatif, contoh: 5 menit yang lalu.

Button link


<a class="btn" href="#">default()</a>
<a class="btn preview" href="#">preview()</a>
<a class="btn download" href="#">download()</a>
<a class="btn link" href="#">link()</a>
<a class="btn cart" href="#">cart()</a>
<a class="btn share" href="#">share()</a>
<a class="btn info" href="#">info()</a>
  

Player Media Stream

Player video dan audio dengan style custom

Player Audio


<!-- player Audio -->
<div class='media-player'>
  <audio class='player-component' controls>
    <source src='url_audio.mp3' type='audio/mp3'>
  </audio>
</div>
  

Player Video


<!-- player Video -->
<div class='media-player'>
  <video preload='metadata' class='player-component' controls playsinline>
    <source src='url_video.mp4' type='video/mp4'>
    <track kind='captions' label='English' src='caption_en.vtt' srclang='en' default />
  </video>
</div>
  

Media custom


<!-- player Media custom -->
<div class='media-player'>
  <div class='player-component' data-player-id='video_ID'>
  <!-- Konten dimuat oleh player custom -->
  </div>
</div>
  
{ }

player video akan dimuat di sini

"Bahkan batu pun bisa bernyanyi jika disentuh oleh cahaya bulan."

“The journey continues in the next chapter...”

Komentar

Recent Komentar