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>
Daftar isi
- 1. Center Element
- 2. Dropcap
- 3. Syntax Highlighter
- 4. Button (Tombol)
- 4.1. Fill (Default)
- 4.2. Outline
- 5. Boxes (Kotak)
- 6. Blockquote
- 6.1. Default
- 6.2. With Author
- 7. Images
- 7.1. Default Blogger
- 7.2. Figure
- 8. Table
- 8.1. Default
- 8.2. Horizontal Scroll
- 9. Ordered List
- 10. Unordered List
- 11. Nested List
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)
How to use:
<button>Button default</button>OR:
<a class="btn" href="https://www.google.com">Button default</a>OR:
<a class="btn-fill" href="https://www.google.com">Button default</a>4.2. Outline
How to use:
<button class="btn-outline">Button outline</button>OR:
<a class="btn-outline" href="https://www.google.com">Button outline</a>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
){kind=link}
Mantap abiss nih template. Jadi pingin segera memakainya.
ReplyDeleteKeren template fiksioner v4, lagi tungguin
ReplyDeleteKeren untuk v4 ini
ReplyDeleteMba cara buat table of contentnya gimana?
ReplyDeleteOtomatis atau enggak?