Testing: Custom Formatting Styles

Table of Contents

Di bawah ini adalah beberapa custom formatting style yang dapat digunakan di dalam postingan.

#1 Tombol-tombol

a. Tombol Primary

Kode Tombol Default:

<a class="btn-default btn-primary" href="#"><button>Download</button></a>

Kode Tombol Download:

<a class="btn-download btn-primary" href="#"><button>Download</button></a>

Kode Tombol WhatsApp:

<a class="btn-whatsapp btn-primary" href="#"><button>WhatsApp</button></a>

Kode Tombol New Tab:

<a class="btn-new-tab btn-primary" href="#"><button>Demo</button></a>

a. Tombol Secondary

Kode Tombol Default:

<a class="btn-default btn-secondary" href="#"><button>Download</button></a>

Kode Tombol Download:

<a class="btn-download btn-secondary" href="#"><button>Download</button></a>

Kode Tombol WhatsApp:

<a class="btn-whatsapp btn-secondary" href="#"><button>WhatsApp</button></a>

Kode Tombol New Tab:

<a class="btn-new-tab btn-secondary" href="#"><button>Demo</button></a>

#2 Kotak Notifikasi

a. Informasi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box info'>konten</div>

b. Peringatan

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box warning'>konten</div>

b. Galat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box error'>konten</div>

#3 Gambar Grid

a. Dua Kolom

Kode:

<div class='grid-images two-col'>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
</div>

a. Tiga Kolom

Kode:

<div class='grid-images three-col'>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
</div>

#4 Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kode:

<div class="accordion-container">
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
</div>

#5 Slider

a. Slider Gambar

Kode:

<div class='slider-container'>
  <div class='slider-content'>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
  </div>
</div>

b. Slider Bukan Gambar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod risus eu nibh laoreet, a mollis lorem accumsan. Donec vitae leo at tellus sodales faucibus vel id magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Mauris fermentum ipsum eget tellus molestie, at consequat vel, viverra ornare. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nulla vitae elit libero. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante blandit, a sodales nisl vehicula. Sed elementum tempus egestas. Suspendisse potenti. Nulla facilisi. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Kode:

<div class='slider-container'>
  <div class='slider-content'>
    <div class='slider-content-item'>Konten Slider 1</div>
    <div class='slider-content-item'>Konten Slider 2</div>
    <div class='slider-content-item'>Konten Slider 3</div>
  </div>
</div>

#6 Syntax Highlighter

a. Contoh menampilkan kode HTML

<h1>Hello World!</h1>

Kode:

<pre><code class='lang-html'>kode HTML yang sudah diparse</code></pre>

b. Contoh menampilkan kode CSS

body {
    font-family: Arial, sans-serif;
    color: #333;
}

Kode:

<pre><code class='lang-css'>kode CSS yang sudah diparse</code></pre>

c. Contoh menampilkan kode JavaScript

// the hello world program
console.log('Hello World');

Kode:

<pre><code class='lang-javascript'>kode JS yang sudah diparse</code></pre>

d. Contoh menampilkan kode Python

# This program prints Hello, world!
print('Hello, world!')

Kode:

<pre><code class='lang-python'>kode Python yang sudah diparse</code></pre>

#7 Lazy Load Youtube

Kode:

<div class="lazy-youtube" data-video-id="A8bsrYqn0NQ">
  <div class="lazy-youtube-play"></div>
</div>