NORMAL FONT, Keren bukan hanya dalam penampilan, tetapi juga dalam cara kita
menghargai, belajar, dan berkontribusi kepada orang lain.
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.
Tutorial
<b>Lorem Ipsum</b><i>simply dummy</i><mark>since the 1500s</mark><u>unknown printer</u><code>scrambled</code><kbd>centuries</kbd><s>electronic</s>MENGEJAR KEAJAIBAN
Doa Adalah Jalan Tercepatnya
Doa Menggema dilangit
Sampai Langit Ketujuh
Selebihnya
Banyak Bersabar
Size Teks
<span style="font-size: x-large;"
>ukuran x-large</span>
<span style="font-size: large;"
>ukuran large</span>
<span style="font-size: x-small;"
>ukuran x-small</span>
<span style="font-size: xx-small;"
>Ukuran xx-small</span>
UPPERCASE/lowercase
E = MC2
H2O
Setiap langkah belajarmu (highlight)
Anggap saja ini code Anggap saja ini kbd
Anggap saja ini samp Anggap saja ini Var
Syntax Highlighter
You can add class to display what kind of code it is.
1. Classic
.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}Tutorial
<pre class="css"><code>teks code disini</code></pre><html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>B. Multi Tab Syntax
- HTML
- CSS
- JS
<html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}!function() {
// Estimated Reading Time by igniel.com
const post = document.querySelector('.post-body')[0],
tx = post.innerText,
wpm = 225,
wd = tx.trim().split(/\s+/).length,
tm = Math.ceil(wd / wpm);
if (document.querySelector('.read-time')) {
document.querySelector('.read-time i').innerText = tm;
}
}();Tombol (Button)
A. Fill
judul
<button>Tombol</button>
<button class="download">Townload</button>
<button class="demo">Temo</button>
judul
<button class="round">Tutton Tound</button>
<button class="download round">Townload Tound</button>
<button class="demo round">Temo Tound</button>B. Outline
Kotak (Box)
Tutorial
<div class="box">teks disni</div>Tutorial
<div class="box green">teks disini</div>Tutorial
<div class="box blue">teks disini</div>Tutorial
<div class="box red">teks disini</div>Tutorial
<div class="box yellow">teks disini</div>Blockquote
A. Default
Palestina adalah masalah keadilan internasional. Kita harus bekerja sama untuk menemukan solusi adil untuk konflik Palestina-Israel
B. Dengan Author
Karena sesungguhnya sesudah kesulitan itu ada kemudahan.
Images
All images will be clickable and displayed into Lightbox.
A. Default Blogger
Image dimension is according to selected size in Blogger editor.
|
| Default style of image with caption on Blogger editor |
B. Figure
Standard figure tag with figcaption. Even if don't
have <a href> tag, image still displayed into Lightbox.
C. Gallery (Carousel)
Multiple images with carousel style. Very similar to Instagram gallery. Scroll or click arrow button to navigate.
D. Gallery (Swipe)
Multiple images with swipe style. Best for mobile view. Lighter than carousel.
E. Gallery (Grid with Show All)
Images will be displayed as grid. If you have more than 4 images, Show All function will be added automatically. It's similar to Facebook gallery style.
Tabs
Create multi tab with unlimited content. You can add up to as many as you want because the title will be scrollable.
- First Tab
- Second Tab
- Third Tab
- Fourth Tab
Accordion
Hide or reveal contents. Very common in FAQ (Frequently Asked Question) section.
Accordion Open By Default
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.Accordion
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.Spoiler
Show / hide content with click event to trigger.
Spoiler
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.Tutorial
<details class="spoiler"><summary>judul</summary><pre class="css"><code>teks disini</code></pre></details>YouTube
Lazy load YouTube video will make your pages lighter.
Tutorial
<div class='rahLzYt' data-embed='myBmdwUDj_E'> <div class='rahPlyBt'> <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='rahAgl' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg> </div> </div>Tutorial
<b>Lorem Ipsum</b><i>simply dummy</i><mark>since the 1500s</mark><u>unknown printer</u><code>scrambled</code><kbd>centuries</kbd><s>electronic</s>Dropcaps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
Table
| No. | Nama | Kota |
|---|---|---|
| 1 | Igniel | Sukabumi |
| 2 | Rain | Bandung |
| 3 | RedSky | Jakarta |
| 4 | Queen | Bekasi |
| 5 | Bjita | Tangerang |
| 6 | Alphabetees | Bogor |
judul
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Igniel</td>
<td>Sukabumi</td>
</tr>
<tr>
<td>2</td>
<td>Rain</td>
<td>Bandung</td>
</tr>
</tbody>
</table>Ordered List
List dengan nomer Urut
- Satu Baris
- Dua Baris
Baris kedua - Baris Pertama
Baris kedua
Baris ketiga - Baris Pertama
Baris kedua
Baris ketiga
dan baris keempat - Baris Pertama
Baris kedua
Baris ketiga
Baris keempat
dan baris kelima - Baris Pertama,
Baris kedua
baris ketiga baris
keempat Baris
keiima dan
baris Keenamn - Tujuh tujuh tujuh
- Delapan delapan delapan
- Sembilan sembilan sembilan
- Sepuluh sepuluh sepuluh
List with alphabet.
- Alpha
- Blue
- Charlie
- Delta
- Ethan
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