NORMAL FONT. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Heading <h1>
Heading <h2>
Subheading <h3>
Minor heading <h4>
Bold
Italic
Underscore
Striketrough
UPPERCASE
lowercase
Malestea (active link)
Smallest
Small
Large
Largest
E = MC2
H2O
<mark> (highlight)
<code>
<kbd>
<samp>
<var>
Dropcap
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.
How to use:
<span class='drop'>L</span>orem Ipsum is simply dummy....
Syntax Highlighter
/* SYNTAX HIGHLIGHTER */
.post-body pre{
background-color:#333;
border-left:5px solid #009688;
padding:0;
margin:.5em auto;
}
How to use:
<pre><code>Isi kode yang sudah di-parse</code></pre>
Basic Usage
Cara penulisan Gambar Slider type='carousel' yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:
<amp-carousel height="300" layout="fixed-height" type="carousel">
<!-- gambar -->
</amp-carousel>
Slides
Cara penulisan Gambar Slider type='slides' yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:
<amp-carousel width="400" height="300" layout="responsive" type="slides">
<!-- gambar -->
</amp-carousel>
Autoplay
Cara penulisan Gambar Slider type='slides' dengan autoplay dan delay yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:
<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay='' delay="2000">
<!-- gambar -->
</amp-carousel>
Button
How to use:
<a href="https://www.google.com"><button class="download">Download</button></a>
Table of contents
Daftar isi
- 1. Judul heading satu
- 1.1. Subheading satu
- 1.2. Subheading dua
- 1.3. Subheading tiga
- 1.4. Subheading empat
- 1.5. Subheading lima
- 2. Judul heading dua
- 3. Judul heading tiga
- 4. Judul heading empat
- 5. Judul heading lima
How to use:
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1. <a href="#toc-1" title="Judul heading satu">Judul heading satu</a>
<ul>
<li>1.1. <a href="#toc-1a" title="Subheading satu">Subheading satu</a></li>
<li>1.2. <a href="#toc-1b" title="Subheading satu">Subheading dua</a></li>
<li>1.3. <a href="#toc-1c" title="Subheading satu">Subheading tiga</a></li>
<li>1.4. <a href="#toc-1d" title="Subheading satu">Subheading empat</a></li>
<li>1.5. <a href="#toc-1e" title="Subheading satu">Subheading lima</a></li>
</ul>
</li>
<li>2. <a href="#toc-2" title="Judul heading dua">Judul heading dua</a></li>
<li>3. <a href="#toc-3" title="Judul heading dua">Judul heading tiga</a></li>
<li>4. <a href="#toc-4" title="Judul heading dua">Judul heading empat</a></li>
<li>5. <a href="#toc-5" title="Judul heading dua">Judul heading lima</a></li>
</ul>
</div>
// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:
<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel
// Tambahkan id pada heading menjadi seperti dibawah :
<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel
Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya tambahkan atribut checked
pada tag <input>
seperti pada condoh dibawah ini:
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle" checked><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1. <a href="#toc-1" title="Judul heading satu">Judul heading satu</a>
<ul>
<li>1.1. <a href="#toc-1a" title="Subheading satu">Subheading satu</a></li>
<li>1.2. <a href="#toc-1b" title="Subheading satu">Subheading dua</a></li>
<li>1.3. <a href="#toc-1c" title="Subheading satu">Subheading tiga</a></li>
<li>1.4. <a href="#toc-1d" title="Subheading satu">Subheading empat</a></li>
<li>1.5. <a href="#toc-1e" title="Subheading satu">Subheading lima</a></li>
</ul>
</li>
<li>2. <a href="#toc-2" title="Judul heading dua">Judul heading dua</a></li>
<li>3. <a href="#toc-3" title="Judul heading dua">Judul heading tiga</a></li>
<li>4. <a href="#toc-4" title="Judul heading dua">Judul heading empat</a></li>
<li>5. <a href="#toc-5" title="Judul heading dua">Judul heading lima</a></li>
</ul>
</div>
Spoiler
"Perumpamaan (nafkah yang dikeluarkan oleh) orang-orang yang menafkahkan hartanya di jalan Allah adalah serupa dengan sebutir benih yang menumbuhkan tujuh bulir, pada tiap-tiap bulir seratus biji. Allah melipatgandakan (ganjaran) bagi siapa yang Dia kehendaki. Dan Allah Maha Luas karunia-Nya lagi Maha Mengetahui". QS. Al-Baqarah: 261
How to use:
<div class="spoiler">
<input id="spoilertoggle" type="checkbox">
<div class="spoiler-judul"><b>Judul Spoiler: </b><label aria-label="Spoiler" for="spoilertoggle"></label></div>
<div class="spoiler-isi">
<div>
<p>Isi Spoiler</p>
</div>
</div>
</div>
Youtube
Penggunaanya sangat mudah:
- Salin kode pemutaran video youtube yang ingin ditampilkan
- Contoh url video youtube :
youtube.com/watch?v=r9OWmGwbRG0
- Yang perlu Anda salin hanyalah kode '
r9OWmGwbRG0
' lalu tempel pada bagian yang suda ditandai di kode ini
How to use:
<amp-youtube
data-videoid="Embed Code Youtube"
layout="responsive"
width="480" height="270">
</amp-youtube>
Blockquote
Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur
Karena sesungguhnya sesudah kesulitan itu ada kemudahan - QS,. Ash-Sharh:5
How to use:
<blockquote>isi tulisan</blockquote>
Note block
Note: Kreativitas kunci kesuksesan
How to use:
<p class='note'>teks_anda_disini</p>
Success: Kreativitas kunci kesuksesan
How to use:
<p class='success'>teks_anda_disini</p>
Danger: Kreativitas kunci kesuksesan
How to use:
<p class='danger'>teks_anda_disini</p>
Warning: Kreativitas kunci kesuksesan
How to use:
<p class='warning'>teks_anda_disini</p>
Table
No. | Nama | Kota |
---|---|---|
1 | Rian | Sumedang |
2 | Rain | Bandung |
3 | RedSky | Jakarta |
4 | Queen | Bekasi |
5 | Bjita | Tangerang |
6 | Alphabetees | Bogor |
How to use:
<table><thead>
<tr><th>No.</th> <th>Nama</th> <th>Kota</th></tr>
</thead> <tbody>
<tr><td>1</td> <td>Rian</td> <td>Sumedang</td></tr>
<tr><td>2</td> <td>Rain</td> <td>Bandung</td></tr>
<tr><td>3</td> <td>RedSky</td> <td>Jakarta</td></tr>
</tbody></table>
Ordered List
Is a list with number.
- Satu satu satu
- Dua dua dua
- Tiga tiga tiga
- Empat empat empat
- Lima lima lima
- Enam enam enam
- Tujuh tujuh tujuh
- Delapan delapan delapan
- Sembilan sembilan sembilan
- Sepuluh sepuluh sepuluh
Unordered List
Is a list without number.
- Satu satu satu
- Dua dua dua
- Tiga tiga tiga
- Empat empat empat
- Lima lima lima
- Enam enam enam
- Tujuh tujuh tujuh
- Delapan delapan delapan
- Sembilan sembilan sembilan
- Sepuluh sepuluh sepuluh
Nested
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
Want to get free article updates via email? come on, enter your email