GraceLight - Elements (Styles, Typography, Button, Boxes, etc)

Grace Tech ID Agustus 28, 2026
Gambar ilustrasi gracelight-blogger-template 
<p>NORMAL FONT. <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. <i>Lorem Ipsum</i> has been the industry's standard dummy text ever <mark>since the 1500s</mark>, when an <u>unknown printer</u> took a galley of type and <code>scrambled</code> it to make a type specimen book. It has survived not only five <kbd>centuries</kbd>, but also the leap into <s>electronic</s> typesetting, remaining essentially unchanged.</p>

Hasil

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.


<h2>Heading</h2>
<h3>Subheading</h3>
<h4>Minor heading</h4>

<p><b>Bold</b><br />
<i>Italic</i><br />
<u>Underscore</u><br />
<s>Striketrough</s></p>

<div><span style="font-size: xx-small;">Smallest</span></div>
<div><span style="font-size: x-small;">Small</span></div>
<div><span style="font-size: large;">Large</span></div>
<div><span style="font-size: x-large;">Largest</span></div>

<p>UPPERCASE<br />
lowercase<br />
E = MC<sup>2</sup><br />
H<sub>2</sub>O<br />
<a href="#" title="Google">Google</a> (link) or <a class="elink" href="https://www.zoetami.com" rel="noopener" target="_blank" title="Zoetami">Zoetami</a> (external link).</p>

Hasil

Heading <h2>

Subheading <h3>

Minor heading <h4>

Bold
Italic
Underscore
Striketrough

Smallest
Small
Large
Largest

UPPERCASE
lowercase
E = MC2
H2O
Google (link) or Zoetami (external link).

<p><mark>&lt;mark&gt; (highlight)</mark><br />
<code>&lt;code&gt;</code><br />
<kbd>&lt;kbd&gt;</kbd><br />
<samp>&lt;samp&gt;</samp><br />
<var>&lt;var&gt;</var></p>

Hasil

<mark> (highlight)
<code>
<kbd>
<samp>
<var>

Tombol (Button)

A. Fill

Code Hasil
<button>Button</button>
<a class="button download" href="#" rel="noopener" target="_blank" title="Google">Download</a>Download
<a class="button demo" href="#" rel="noopener" target="_blank" title="Google">Demo</a>Demo
<a class="button contact" href="#" rel="noopener" target="_blank" title="Google">Contact</a>Contact
<p><button class="round">Button Round</button>

<a class="button round download" href="#" rel="noopener" target="_blank" title="Google">Download</a>Download
<a class="button round demo" href="#" rel="noopener" target="_blank" title="Google">Demo</a>Demo
<a class="button round contact" href="#" rel="noopener" target="_blank" title="Google">Contact</a>Contact

B. Outline

Code Hasil
<a class="button outline download" href="#" rel="noopener" target="_blank" title="Google">Download</a>Download
<a class="button outline demo" href="#" rel="noopener" target="_blank" title="Google">Demo</a>Demo
<a class="button outline contact" href="#" rel="noopener" target="_blank" title="Google">Contact</a>Contact
<button class="outline round">Button Round </button>
<a class="button outline round download" href="#" rel="noopener" target="_blank" title="Google">Download</a>Download
<a class="button outline round demo" href="#" rel="noopener" target="_blank" title="Google">Demo</a>Demo
<a class="button outline round contact" href="#" rel="noopener" target="_blank" title="Google">Contact</a>Contact

Download Box

Kode

<div class="downloadbox">
  <div>Suara Gembira</div>
  <div class="inner">
    <div class="icon">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDNGGCSI0UHi0fcdgfJpY9NoIb0kdQ2d7izWmiU0uLuaCoxSFVpN8lYk7s8ZP_MfzDNf4YDZBcBa8Kx7RME-j3MoJzguwWxIXFYQa1eJTr3tLjt0i0GzBoT51rJJXxR2C-Vhb2VJaavFC4VZgCbI3YfzHgSwlDwkrWrtayjEGOg904aON-wCjALKVHFE/s1600/sgb_2%20%281%29.png"/>
    </div>
    <div class="info">
      Size: 2 MB<br/>
      Updated: 1 September 2026<br/>
      File Type: .rar
    </div>
    <div class="go">
      <a class="button download" href="#" rel="noopener" target="_blank" title="Google">Download</a>
    </div>
  </div>
</div>

Hasil

Suara Gembira
Size: 2 MB
Updated: 1 September 2026
File Type: .rar
Download

Kotak (Box)

Kode

<div class="box">Box default</div>
<div class="box outline">Box outline </div>
<div class="box green">Box green is simply dummy text of the printing and typesetting industry.</div>
<div class="box blue">Box blue</div>
<div class="box red">Box red</div>
<div class="box yellow">Box yellow</div>

Hasil

Box default
Box outline
Box green is simply dummy text of the printing and typesetting industry.
Box blue
Box red
Box yellow

Blockquote

A. Default

Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur

B. Dengan Author

Pada mulanya adalah Firman, Firman itu bersama-sama dengan Allah, dan Firman itu adalah Allah
Yohanes 1:1

Syntax Highlighter

1. Default

Kode


<pre class="css"><code>
Kode css yang sudah di-parse
</code></pre>
Hasil: 
.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}

Tabs (Multi Tab)

Create multi tab with unlimited content. You can add up to as many as you want because the title will be scrollable.

A. Horizontal (Default)

  • First Tab
  • Second Tab
  • Third Tab
  • Fourth Tab
  • Fifth Tab
  • Sixth Tab
Content of the first tab (1st).
Content of the second tab (2nd).
Content of the third tab (3rd).
Content of the fourth tab (4th).
Content of the fifth tab (5th).
Content of the sixth tab (6th).

Dua Kolom

Teks terbagi menjadi dua kolom. PENTING! Akan otomatis berubah menjadi satu kolom pada ukuran layar 480px atau lebih kecil (batas dan padding juga akan hilang).

A. Dengan Border (Default)

Kode

<div class="column">
  <div class="content">
    <p><strong>What is Lorem Ipsum?</strong></p>
      <p>Lorem Ipsum is simply....</p>
  </div>
  <div class="content">
    <p><strong>Why do we use it?</strong></p>
     <p>It is a long established .....</p>
  </div>
</div>

Hasil

What is Lorem Ipsum?

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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

B. Tanpa Border

Kode

<div class="column noborder">
  <div class="content">
    <p><strong>PRO</strong></p>
    <p>+ One<br/>
      + Two<br/>
      + Three
    </p>
  </div>
  <div class="content">
    <p><strong>CONS</strong></p>
    <p>- One<br/>
      - Two<br/>
      - Three
    </p>
  </div>
</div>

Hasil

PRO

+ One
+ Two
+ Three

CONS

- One
- Two
- Three

Accordion

Kode

<details class="accordion" open="open">
  <summary>Accordion Open By Default</summary>
  Lorem Ipsum is simply...
</details>

Hasil

Accordion Open By 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, 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.

Kode

<details class="accordion">
  <summary>Accordion</summary>
  Lorem Ipsum is simply ....
  <details class="accordion">
    <summary>Accordion</summary>
    Lorem Ipsum is simply dummy ....
  </details>
</details>

Hasil

Accordion 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.
Accordion 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.

Spoiler

Kode

<details class="spoiler">
  <summary>Spoiler</summary>
  Lorem Ipsum.....
</details>

Hasil

Spoiler 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.

Images

Dimensi gambar mengikuti ukuran yang dipilih di editor Blogger

YouTube Lazy Load

Memuat video YouTube secara *lazy load* akan membuat halaman Anda lebih ringan.

Kode

<div class="youtubelazy" data-embed="fwJ7xvXcV20"></div>

Hasil

Dropcaps

Kode

<p><span class="drop">L</span>orem ipsum dolor sit amet, consectetur .... .</p>

Hasil

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

Table

A. Default

Kode

<table><thead><tr><th>No.</th> <th>Nama</th> <th>Kota</th></tr></thead>
<tbody><tr><td>1</td> <td>Roy</td> <td>Teminabuan</td></tr>
<tr><td>2</td> <td>Heru</td> <td>Bandung</td></tr>
<tr><td>3</td> <td>Risky</td> <td>Sorong</td></tr>
<tr><td>4</td> <td>Grace</td> <td>Teminabuan</td></tr>
<tr><td>5</td> <td>Juan</td> <td>Merauke</td></tr>
<tr><td>6</td> <td>Samuel</td> <td>Sorong</td></tr></tbody></table>

Hasil

No. Nama Kota
1 Roy Teminabuan
2 Heru Bandung
3 Risky Sorong
4 Grace Teminabuan
5 Juan Merauke
6 Samuel Sorong

B. Horizontal Scroll

Better for a table with many columns.

Kode

<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>
			<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>
			<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>
		</tbody>
	</table>
</div>

Hasil

Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10
12345678910
12345678910
12345678910

List

A. Ordered List

Kode


<ol><li>Satu satu satu</li>
<li>Dua dua dua</li>
<li>Tiga tiga tiga</li>
<li>Empat empat empat</li>
<li>Lima lima lima</li>
<li>Enam enam enam</li>
<li>Tujuh tujuh tujuh</li>
<li>Delapan delapan delapan</li>
<li>Sembilan sembilan sembilan</li>
<li>Sepuluh sepuluh sepuluh</li></ol>

Hasil

  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

B. Unordered List

Is a standard list without number.

Kode

<ul><li>Satu satu satu</li>
<li>Dua dua dua</li>
<li>Tiga tiga tiga</li>
<li>Empat empat empat</li>
<li>Lima lima lima</li>
<li>Enam enam enam</li>
<li>Tujuh tujuh tujuh</li>
<li>Delapan delapan delapan</li>
<li>Sembilan sembilan sembilan</li>
<li>Sepuluh sepuluh sepuluh</li></ul>

Hasil

  • 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

C. Nested

Kode

<h3>Hasil</h3>
<ol><li>Satu</li>
<ol><li>Satu satu</li>
<ol><li>Satu satu satu</li></ol></ol>
<li>Dua</li>
<li>Tiga</li></ol>

<ul><li>Satu</li>
<ul><li>Satu satu</li>
<ul><li>Satu satu satu</li></ul></ul>
<li>Dua</li>
<li>Tiga</li></ul>

<ol><li>Satu</li>
<ul><li>Satu satu</li>
<ul><li>Satu satu satu</li></ul></ul>
<li>Dua</li>
<li>Tiga</li></ol>

Hasil

  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
Tags:
Grace Tech ID

Posted by: Grace Tech ID

Ayah dari tiga anak, menyukai Sejarah, Teknologi dan Musik.

Posting Komentar

0 Komentar