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 <h2>
Subheading <h3>
Minor heading <h4>
Bold
Italic
Underscore
Striketrough
UPPERCASE
lowercase
E = MC2
H2O
Zoetami (link)
<mark> (highlight)
<code>
<kbd>
<samp>
<var>
1. Center Element
Centering any elements (will make the element placed at the center of the page).
HOW TO USE:
Add class center
to any elements. Example:
<div class="center">Bla bla bla....</div>
<figure class="center">Bla bla bla....</figure>
<div>
first. Example:
<div class="center">
<button>Button text</button>
</div>
2. 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....
3. Syntax Highlighter
To write a bunch of codes inside Syntax Highlighter box.
<html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>
HOW TO USE:
<pre><code>Parsed code goes here.</code></pre>
4. Button (Tombol)
4.1. Fill (Default)
Output | Code |
---|---|
A. Square A href `btn` classA href `btn-fill` class |
|
B. Rounded A href `btn` classA href `btn-fill` class |
|
4.2. Outline
Output | Code |
---|---|
A. Square A href `btn-outline` class |
|
B. Rounded A href `btn-outline` class |
|
4.3. With Icon
HOW TO USE:
SVG icons need to be written explicitly inside the button code. You can mix and match the style, whether it's fill or outline button.
<button class="YOUR DESIRED CLASS STYLE"><a href="https://www.google.com" title="TITLE">[[INSERT ICON HERE]]Button</a></button>
OR:
<a class="YOUR DESIRED CLASS STYLE" href="https://www.google.com" title="TITLE">[[INSERT ICON HERE]]Button</a>
EXAMPLE RESULT:
<button class="btn-outline"><a href="https://www.google.com" title="TITLE"><svg viewBox="0 -960 960 960" width="24"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>Button</a></button>
/* OR THIS */
<a class="btn" href="https://www.google.com" title="TITLE"><svg viewBox="0 -960 960 960" width="24"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>Button</a>
Here are some icons you can use. If you want to request an icon, don't hesisate to write in the comment section.
Icon | Code |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
5. Boxes (Kotak)
HOW TO USE:
(different class
name gives different results)
<div class="box">Box default.</div>
<div class="box info">Box info.</div>
<div class="box success">Box success.</div>
<div class="box warning">Box warning.</div>
<div class="box danger">Box danger.</div>
6. Blockquote
6.1. Default
Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur
HOW TO USE:
<blockquote>Text goes here.</blockquote>
6.2. With Author
Karena sesungguhnya sesudah kesulitan itu ada kemudahan. QS,. Ash-Sharh:5
HOW TO USE:
<blockquote>
Text goes here.
<cite>Author's name</cite>
</blockquote>
7. Images
7.1. Default Blogger
Image is displayed according to the selected size in Blogger editor.
Default style of image with caption on Blogger editor |
HOW TO USE:
7.2. Figure
Standard figure
tag with figcaption
. Image will enlarge automatically according to the width of blog layout.
HOW TO USE:
<figure>
<img src="IMG URL" alt="ALT Text" title="TITLE text"/>
<figcaption>Caption</figcaption>
</figure>
8. Table
8.1. Default
No. | Nama | Kota |
---|---|---|
1 | Igniel | Sukabumi |
2 | Rain | Bandung |
3 | RedSky | Jakarta |
4 | Queen | Bekasi |
5 | Bjita | Tangerang |
6 | Alphabetees | Bogor |
HOW TO USE:
Basically, it's using the standard table
code. I'll write it for you, just in case you're too lazy to open W3Schools.
<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>
...repeat the code from <tr> to </tr> to create more rows
</tbody>
</table>
8.2. Horizontal Scroll
Better for a table with many columns.
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
---|---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
HOW TO USE:
<div class="table">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
...repeat the code from <tr> to </tr> to create more rows
</tbody>
</table>
</div>
9. 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
10. 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
11. Nested List
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
Percobaan komentar pertama.
ReplyDeleteBalasan untuk percobaan komentar pertama.
Deletetes reply
DeleteSimpel tapi elegan coy...
ReplyDeletekereeen
ReplyDeleteThank you for the template, I will buy the premium one soon!
ReplyDeleteKeren banget fitur-fiturnya!
ReplyDeleteHai Kak, mau nanya kenapa ya related post bisa masuk ke dalam kotak penyorot syntaks pada postingan artikelku?
ReplyDelete