Jobzeek - Komponen Template

Kuamangmedia.com

July 28, 2022

---

Mulai dengan lebih dari selusin komponen Jobzeek yang dapat digunakan kembali dengan gaya pemutakhiran serta komponen dan opsi tambahan.

Alerts

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa.

Varian Alert

Alert memiliki dua varian berbeda:

A simple default alert—check it out!

A simple outlined alert—check it out!

<div class="jobzeek_alert">
  <div class="alert_message">
    A simple default alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_outline">
  <div class="alert_message">
    A simple outlined alert—check it out!
  </div>
</div>

Alert dengan Background Solid

Varian gaya background yang solid. Gunakan salah satu dari empat gaya di bawah ini:

A simple info alert—check it out!

A simple warning alert—check it out!

A simple success alert—check it out!

A simple error alert—check it out!

<div class="jobzeek_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_warning">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_success">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_error">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alert dengan Gaya Garis

Varian gaya garis tepi dengan batas. Gunakan salah satu dari empat gaya di bawah ini:

A simple info alert—check it out!

A simple warning alert—check it out!

A simple success alert—check it out!

A simple error alert—check it out!

<div class="jobzeek_alert alert_info alert_outline">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_warning alert_outline">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_success alert_outline">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_error alert_outline">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alert dengan Deskripsi Background Solid

Anda dapat menggunakan alert dengan isi konten deskripsi:

Info A simple info alert—check it out!

Warning A simple warning alert—check it out!

Success A simple success alert—check it out!

Error A simple error alert—check it out!

<div class="jobzeek_alert alert_info">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_warning">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_success">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_error">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Alert dengan Gaya Garis Deskripsi

Anda dapat menggunakan alert dengan isi deskripsi gaya garis:

Info A simple info alert—check it out!

Warning A simple warning alert—check it out!

Success A simple success alert—check it out!

Error A simple error alert—check it out!

<div class="jobzeek_alert alert_info alert_outline">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_warning alert_outline">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_success alert_outline">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="jobzeek_alert alert_error alert_outline">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Button

Button adalah elemen yang dapat diklik yang digunakan untuk memicu tindakan. Mereka mengomunikasikan ajakan bertindak kepada pengguna dan memungkinkan pengguna berinteraksi dengan halaman dalam berbagai cara. Label button mengungkapkan tindakan apa yang akan terjadi saat pengguna berinteraksi dengannya.

Varian Button

Button memiliki empat varian berbeda:

Default Button Outline Button Unelevated Button Raised Button

<a class="jobzeek_button" href="#">Default Button</a>
<a class="jobzeek_button outline" href="#">Outline Button</a>
<a class="jobzeek_button unelevated" href="#">Unelevated Button</a>
<a class="jobzeek_button raised" href="#">Raised Button</a>

Bentuk Button

Button dapat memiliki bentuk tambahan:

Default Button Rounded Button

<a class="jobzeek_button unelevated" href="#">Default Button</a>
<a class="jobzeek_button unelevated rounded" href="#">Rounded Button</a>

Button Dinonaktifkan

Button jika tidak ada tindakan:

Default Button Disabled Outline Button Disabled Unelevated Button Disabled Raised Button Disabled Rounded Button Disabled

<a class="jobzeek_button disabled" href="#">Default Button Disabled</a>
<a class="jobzeek_button outline disabled" href="#">Outline Button Disabled</a>
<a class="jobzeek_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="jobzeek_button raised disabled" href="#">Raised Button Disabled</a>
<a class="jobzeek_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>

Button dengan Ikon

Buat button dengan ikon cukup tambahkan Ikon SVG:

Download

<a class="jobzeek_button unelevated rounded" href="#">
  <svg viewbox="0 0 24 24">
    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
  </svg>
  Download
</a>

Tabel

Menggunakan markup tabel paling dasar, inilah tampilan Tabel. Semua gaya tabel diwariskan, artinya setiap tabel bertingkat akan ditata dengan cara yang sama seperti induknya.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="jobzeek_table">
  <table>
      <thead>
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Kota</th>
              <th>Hobi</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Ishar Yulian Satriani</td>
              <td>Laki-laki</td>
              <td>Pandeglang, Banten</td>
              <td>Membuat design template Blogger</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>3</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>4</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>5</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
      </tbody>
  </table>
</div>

Opsi Kepala Tabel

Gunakan pilihan dari keempat class ini untuk mengubah warna Kepala Tabel: table_primary, table_warning, table_success, dan table_error.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="jobzeek_table">
  <table class="table_primary">
      <thead>
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Kota</th>
              <th>Hobi</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Ishar Yulian Satriani</td>
              <td>Laki-laki</td>
              <td>Pandeglang, Banten</td>
              <td>Membuat design template Blogger</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>3</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>4</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>5</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabel dengan Baris Bergaris

Gunakan class table_stripped untuk menambahkan zebra-striping ke baris tabel mana pun di tbody.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="jobzeek_table">
  <table class="table_stripped">
      <thead>
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Kota</th>
              <th>Hobi</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Ishar Yulian Satriani</td>
              <td>Laki-laki</td>
              <td>Pandeglang, Banten</td>
              <td>Membuat design template Blogger</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>3</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>4</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>5</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabel dengan Baris yang Dapat Dilayangkan

Gunakan class table_hovered untuk mengaktifkan efek hover pada baris tabel di tbody.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="jobzeek_table">
  <table class="table_hovered">
      <thead>
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Kota</th>
              <th>Hobi</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Ishar Yulian Satriani</td>
              <td>Laki-laki</td>
              <td>Pandeglang, Banten</td>
              <td>Membuat design template Blogger</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>3</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>4</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>5</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabel Sticky

Gunakan class table_sticky untuk menggunakan tabel sticky.

No.	Nama	Jenis Kelamin	Kota	Hobi
1	Ishar Yulian Satriani	Laki-laki	Pandeglang, Banten	Membuat design template Blogger
2	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
3	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
4	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
5	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
6	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.
7	Tidak ada data.	Tidak ada data.	Tidak ada data.	Tidak ada data.

<div class="jobzeek_table table_sticky">
  <table>
      <thead>
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Kota</th>
              <th>Hobi</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Ishar Yulian Satriani</td>
              <td>Laki-laki</td>
              <td>Pandeglang, Banten</td>
              <td>Membuat design template Blogger</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>3</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>4</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>5</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>6</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
          <tr>
              <th>7</th>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
              <td>Tidak ada data.</td>
          </tr>
      </tbody>
  </table>
</div>

Accordion/Collapsible Panel

Contoh:

Ciutkan 1 - Klik Saya!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Ciutkan 2 - Klik Saya!

Ciutkan 3 - Klik Saya!

<div class="jobzeek_collapse">
  <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 1 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>

    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 2 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
  
    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 3 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
</div>

Blockquote

Gunakan blockquote dengan span, small atau footer.

Goads.ID selalu berusaha memberikan yang terbaik untuk Anda. @goadslink

<blockquote>
Goads.ID selalu berusaha memberikan yang terbaik untuk Anda.
  <span>@goadslink</span>
</blockquote>

Tag Pre Code

Tag pre code disertakan dalam template Jobzeek. Jika teksnya HTML jangan lupa untuk mengurai teks menggunakan Alat Parse HTML.

Di bawah ini adalah kombinasi dari tag awal dengan tag kode dan tambahkan judul ke tag awal seperti di bawah ini:

<div class="jobzeek_highlight">
  <pre data-lang="yout-title-here"><code>Your code here</code></pre>
</div>

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sample HTML</title>
</head>
<body>
  <p>Sample Text</p>
</body>
</html>

body{font-size:14px;font-weight:400;color:inherit;}

$('#mybutton').click(function() {
  $(this).toggleClass('active');
});

Di bawah ini seperti dokumen angular.io:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

Postingan Terkait Manual

Postingan Terkait Manual dapat digunakan untuk membuat artikel terkait dalam postingan secara manual.

Contoh:

Media

Gunakan class media_player untuk membuat embed, iframe, dan object yang responsif.

Contoh untuk embed iframe YouTube dengan fitur lazy.

<div class="media_player lyt" data-embed="2Oi87E2Wk2g">
  <div class="play_button">
    <svg viewBox="0 0 24 24">
      <path d="M10 15l5.2-3L10 9v6m11.6-7.8a8.4 8.4 0 0 1 .2 1.9 16.2 16.2 0 0 1 .1 2.1v.8a25.1 25.1 0 0 1-.4 4.8 2.7 2.7 0 0 1-1.8 1.8l-2.6.2H12a50.8 50.8 0 0 1-7.8-.4 2.7 2.7 0 0 1-1.8-1.8 8.4 8.4 0 0 1-.2-1.9 16.2 16.2 0 0 1-.1-2.1V12a25.1 25.1 0 0 1 .4-4.8 2.7 2.7 0 0 1 1.7-1.8 12.6 12.6 0 0 1 2.6-.2H12a50.8 50.8 0 0 1 7.8.4 2.7 2.7 0 0 1 1.8 1.6z"></path>
    </svg>
  </div>
</div>

Bagian yang diberi tanda kuning ganti dengan kode embed dari video YouTube.

Contoh: https://www.youtube.com/embed/XXXXXXXX

Postingan Referensi

Untuk menambahkan daftar referensi ke artikel yang Anda tulis:

Referensi:
https://news.goads.id/

<p class="post_reference">
  Reference:
  <br />
  https://news.goads.id/
</p>

Demo Download

Semua komponen yang tercantum di sini akan diperbarui saat tersedia.

Jika Anda ingin melaporkan beberapa bug, Anda dapat menulisnya di bagian komentar halaman Laporkan Bug dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tulis di bagian komentar di halaman Request dan Feedback.

Dokumentasi

1 comment WhatsApp Telegram

Join the conversation (1)

1 comment

Anonymous
Monday, 16 January, 2023

Profile

Anonymous

Said: true

View profile
Hapus komentar
true
Reply