Custom Formatting Styles Wuzz

Daftar Isi

ReinsMedia.Com - Berikut ini adalah beberapa custom formatting style yang dapat digunakan di dalam postingan. 

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

b. 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 kotak informasi:

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

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

c. 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 kotak galat:

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

#3 GAMBAR GRID

a. Dua Kolom

IMG IMGIMGIMG

Kode gambar grid dua kolom :

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

b. Tiga Kolom

IMG IMG IMG IMG IMG IMG

Kode gambar grid tiga kolom :

<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

Pertanyaan?
Jawaban
Pertanyaan?
Jawaban
Pertanyaan?
Jawaban

Kode accordion

<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

IMG IMG IMG IMG

Kode slider gambar :

<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. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
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.
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 slider bukan gambar :

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

<h1>Hello World!</h1>

Kode syntax HTML :

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

b. CSS

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

Kode syntax css :

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

c. Javascript

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

Kode syntax javascript :

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

d. Python

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

Kode syntax python :

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

#7 LAZY LOAD YOUTUBE

Kode lazy load youtube :

<div class="lazy-youtube" data-video-id="A8bsrYqn0NQ">
  <div class="lazy-youtube-play"></div>
</div>
Rudi Etnovian
Rudi Etnovian Seorang Blogger yang Menyediakan Layanan Pembuatan Website, Layanan Internet Murah dan Layanan Instal Ulang Windows Komputer

Posting Komentar