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




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






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