olNGIb4NkK5r2x7x4oG3GpEzizVpnY6KNCck9cym
(AD) Billboard

Fiksioner v4 Formatting Style (Typography, Elements, Attribute, etc)

Fiksioner v4 Formatting Style

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)

A href button class

A href `btn-fill` class

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

A href `btn-fill` class

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)

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
Default style of image with caption on Blogger editor

How to use:

Just use default Blogger feature to insert image.

7.2. Figure

Standard figure tag with figcaption. Image will enlarge automatically according to the width of blog layout.

Standard figure HTML tag
Standard figure HTML tag

How to use:

<figure>
  <img src="IMG URL" alt="ALT Text" title="TITLE text"/>
  <figcaption>Caption</figcaption>
</figure>

8. Table

8.1. Default

No.NamaKota
1Igniel Sukabumi
2RainBandung
3RedSkyJakarta
4QueenBekasi
5BjitaTangerang
6AlphabeteesBogor
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 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10
12345678910
12345678910
12345678910
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.

  1. Satu satu satu
  2. Dua dua dua
  3. Tiga tiga tiga
  4. Empat empat empat
  5. Lima lima lima
  6. Enam enam enam
  7. Tujuh tujuh tujuh
  8. Delapan delapan delapan
  9. Sembilan sembilan sembilan
  10. 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

  1. Satu
    1. Satu satu
      1. Satu satu satu
  2. Dua
  3. Tiga
  • Satu
    • Satu satu
      • Satu satu satu
  • Dua
  • Tiga
  1. Satu
    • Satu satu
      • Satu satu satu
  2. Dua
  3. Tiga

5 comments

Silakan berkomentar dengan sopan.
  1. Mantap abiss nih template. Jadi pingin segera memakainya.

    ReplyDelete
  2. Keren template fiksioner v4, lagi tungguin

    ReplyDelete
  3. Mba cara buat table of contentnya gimana?
    Otomatis atau enggak?

    ReplyDelete
(AD) Middle Post
(AD) Sticky