Ad Billboard

Formatting Style (Typography, Elements, Attribute, etc)

Contoh tampilan, tipografi, font, tombol, kotak (box), tabel, dan semua elemen dalam tema Blogger gratis Derelogy, free Blogspot theme SEO friendly.
Ad Top
Derelogy 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)

Output Code

A. Square

A href `btn` classA href `btn-fill` class
<button><a href="https://www.google.com" title="TITLE">Button</a></button>

OR:

<a class="btn" href="https://www.google.com" title="TITLE">Button</a>

OR:

<a class="btn-fill" href="https://www.google.com" title="TITLE">Button</a>

B. Rounded

A href `btn` classA href `btn-fill` class
<button class="round-l"><a href="https://www.google.com" title="TITLE">Button</a></button>

OR:

<a class="btn round-l" href="https://www.google.com" title="TITLE">Button</a>

OR:

<a class="btn-fill round-l" href="https://www.google.com" title="TITLE">Button</a>

4.2. Outline

Output Code

A. Square

A href `btn-outline` class
<button class="btn-outline"><a href="https://www.google.com" title="TITLE">Button</a></button>

OR:

<a class="btn-outline" href="https://www.google.com" title="TITLE">Button</a>

B. Rounded

A href `btn-outline` class
<button class="btn-outline round-l"><a href="https://www.google.com" title="TITLE">Button</a></button>

OR:

<a class="btn-outline round-l" href="https://www.google.com" title="TITLE">Button</a>

4.3. With Icon

Checkout Download

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
<svg viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
<svg viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z"/></svg>
<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>
<svg viewBox="0 -960 960 960" width="24"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M80-480v-80h120v80H80Zm136 222-56-58 84-84 58 56-86 86Zm28-382-84-84 56-58 86 86-58 56Zm476 480L530-350l-50 150-120-400 400 120-148 52 188 188-80 80ZM400-720v-120h80v120h-80Zm236 80-58-56 86-86 56 56-84 86Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
<svg viewBox="0 -960 960 960" width="24"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>

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
Ad Bottom

8 comments

Insert active links at comment is not allowed. Also any kind of impolite words.
  1. Percobaan komentar pertama.

    ReplyDelete
  2. Thank you for the template, I will buy the premium one soon!

    ReplyDelete
  3. Keren banget fitur-fiturnya!

    ReplyDelete
  4. Hai Kak, mau nanya kenapa ya related post bisa masuk ke dalam kotak penyorot syntaks pada postingan artikelku?

    ReplyDelete
Ad Middle
Ad Sticky