Ad Top
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
Smallest
Small
Large
Largest
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>If you want to center a button (or any other inline elements), wrap it inside
<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)
Box 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.
Box info. 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.
Box success. 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.
Box warning. 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.
Box danger. 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: (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
Ad Bottom
){kind=link}
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