awTJ8oIyB94nutbC1bJoZn5dMRTh5VC3z3VvpzU4
Bookmark
KudasaiKode
KudasaiKode
... menit baca
Dengarkan

Igniplex v3.1 Elements (Styles, Typography, Button, Boxes, etc)

Contoh tampilan, tipografi, font, tombol, TOC, tabel, dan semua elemen lain dalam tema Blogger Igniplex v3.1.
Igniel
Igniel 7 menit baca
Ad
  1. Syntax Highlighter
    1. 1. Default
    2. B. Multi Tab
  2. Tombol (Button)
    1. A. Fill
    2. B. Outline
  3. Download Box
  4. Kotak (Box)
  5. Badge
  6. Blockquote
    1. A. Default
    2. B. Dengan Author
  7. Tabs (Multi Tab)
    1. A. Horizontal (Default)
    2. B. Vertical
  8. Two Column
    1. A. With Border (Default)
    2. B. Without Border
  9. Accordion
    1. A. Single
    2. B. Multi
  10. Spoiler
  11. Images
    1. A. Blogger Default
    2. B. Figure
    3. C. Gallery (Carousel)
    4. D. Gallery (Swipe)
    5. E. Gallery (Grid with Show All)
  12. YouTube Lazy Load
  13. Dropcaps
  14. Table
    1. A. Default
    2. B. Horizontal Scroll
  15. List
    1. A. Custom Number
    2. B. Ordered List
    3. C. Unordered List
    4. D. Nested
Igniplex v3.1 Theme Elements and Styles

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.

Cara menggunakan dan memanggil semua elemen di bawah ditulis di tutorial member area.

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

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

Syntax Highlighter

You can add class to display what kind of code it is.

1. Default

.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}
<html>
  <head>
    <title>Igniel</title>
  </head>
  <body>
    ....
    ....
  </body>
</html>
https://www.igniel.com
Syntax highlighter without numbering and "copy" button.

B. Multi Tab

  • HTML
  • CSS
  • JS
<html>
  <head>
    <title>Igniel</title>
  </head>
  <body>
    ....
    ....
  </body>
</html>
.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}
!function() {
  // Estimated Reading Time by igniel.com
  const post = document.querySelector('.post-body')[0],
    tx = post.innerText,
    wpm = 225,
    wd = tx.trim().split(/\s+/).length,
    tm = Math.ceil(wd / wpm);
  if (document.querySelector('.read-time')) {
    document.querySelector('.read-time i').innerText = tm;
  }
}();

Tombol (Button)

A. Fill

Download Demo Contact

Download Demo Contact

B. Outline

Download Demo Contact

Download Demo Contact

Download Box

If you have a dedicated image, you can use it like this.

Lightrom Android
Size: 1 GB
Updated: 1 May 2025
File Type: .rar
Download

Or if you DO NOT have an image, just use an alternative icon. You can even change the icon as you like.

Capcut v1.0
Size: 1 GB
Updated: 1 May 2025
File Type: .rar
Download

Kotak (Box)

Box default
Box outline
Box green
Box blue
Box red
Box yellow

Badge

A simple indicator at the top of your text to emphasize the importance. It has several color options.

  • The primary one New. The color will automatically adjusts to the theme.
  • The green one New
  • The blue one New
  • The red one New
  • The yellow one New

Blockquote

A. Default

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

B. Dengan Author

Karena sesungguhnya sesudah kesulitan itu ada kemudahan.
QS,. Ash-Sharh:5

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

B. Vertical

IMPORTANT! Will automatically change to horizontal on a screen size 480px and smaller.

  • 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).

Two Column

Split text in two column. IMPORTANT! Will automatically change to one column on a screen size 480px and smaller (border and padding will also disappear).

A. With Border (Default)

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.

Related Posts

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. Without Border

PRO

+ One
+ Two
+ Three

CONS

- One
- Two
- Three

Accordion

Hide or reveal contents. Very common in FAQ (Frequently Asked Question) section.

A. Single

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

B. Multi

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

Show / hide content with click event to trigger.

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

A. Blogger Default

Image dimension is according to selected size in Blogger editor.

Default style of image with caption on Blogger editor
Default style of image with caption on Blogger editor

B. Figure

Standard figure tag with figcaption. Even if don't have <a href> tag, image still displayed into Lightbox.

Standard figure HTML tag
Standard figure HTML tag

C. Gallery (Carousel)

Multiple images with carousel style. Very similar to Instagram gallery. Scroll or click arrow button to navigate.

Igniplex Carousel Image Igniplex Carousel Image Igniplex Carousel Image Igniplex Carousel Image
1/4
Additional caption text

D. Gallery (Swipe)

Multiple images with swipe style. Best for mobile view. Lighter than carousel.

Igniplex Swipe Image Igniplex Swipe Image Igniplex Gallery Style 1 Igniplex Swipe Image Igniplex Swipe Image
Additional caption text
Igniplex Carousel Image Igniplex Carousel Image Igniplex Carousel Image Igniplex Carousel Image
Additional caption text

E. Gallery (Grid with Show All)

Images will be displayed as grid. If you have more than 4 images, Show All function will be added automatically. It's similar to Facebook gallery style.

Igniplex Grid Iimage
Igniplex Grid Image
Igniplex Grid Image
Igniplex Grid Image
Igniplex Grid Image
Igniplex Grid Image
Additional caption text
Igniplex Grid Iimage
Igniplex Grid Image
Igniplex Grid Image
Igniplex Grid Image
Additional caption text

YouTube Lazy Load

Lazy load YouTube video will make your pages lighter.

Youtube video player

Dropcaps

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

No. Nama Kota
1 Igniel Sukabumi
2 Rain Bandung
3 RedSky Jakarta
4 Queen Bekasi
5 Bjita Tangerang
6 Alphabetees Bogor

B. Horizontal Scroll

Better for a table with many columns.

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

List

A. Custom Number

List with bigger number indicator. Best for explaining step by step tutorials.

  1. Sociis tellus condimentum non commodo amet vulputate leo conubia nunc egestas duis sociosqu fringilla tristique lacinia consequat a pellentesque iaculis!
    1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  2. At libero bibendum semper integer phasellus ultrices volutpat nascetur vel platea hendrerit hac per lorem elementum dolor maecenas venenatis erat?
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.
    • Cras ornare tristique elit.
    • Vivamus vestibulum ntulla nec ante.
  3. Nascetur imperdiet congue facilisi habitasse viverra sit pharetra vulputate tellus viverra amet interdum magna posuere neque class dui suspendisse netus.
  4. Posuere a quam varius natoque blandit primis dui massa tempor praesent non massa orci class vehicula molestie nec nibh cum.
  5. Porta dolor odio diam laoreet augue sed et est tortor.

B. Ordered List

Is a standard 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

C. Unordered List

Is a standard 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

D. Nested

  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
Dengarkan
Pilih Suara
1x
* Mengubah pengaturan akan membuat artikel dibacakan ulang dari awal.
Daftar Isi
  1. Syntax Highlighter
    1. 1. Default
    2. B. Multi Tab
  2. Tombol (Button)
    1. A. Fill
    2. B. Outline
  3. Download Box
  4. Kotak (Box)
  5. Badge
  6. Blockquote
    1. A. Default
    2. B. Dengan Author
  7. Tabs (Multi Tab)
    1. A. Horizontal (Default)
    2. B. Vertical
  8. Two Column
    1. A. With Border (Default)
    2. B. Without Border
  9. Accordion
    1. A. Single
    2. B. Multi
  10. Spoiler
  11. Images
    1. A. Blogger Default
    2. B. Figure
    3. C. Gallery (Carousel)
    4. D. Gallery (Swipe)
    5. E. Gallery (Grid with Show All)
  12. YouTube Lazy Load
  13. Dropcaps
  14. Table
    1. A. Default
    2. B. Horizontal Scroll
  15. List
    1. A. Custom Number
    2. B. Ordered List
    3. C. Unordered List
    4. D. Nested
Posted by:
Igniel
Igniel
Stimulate your passion!
Related Posts
8 comments
Silakan berikan komentar. Centang kotak "Notify me" untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Madisonbrooks
    Madisonbrooks
    26 August, 2025
    Igniplex v3.1 really shows off clean and modern design with its styles, typography, buttons, and boxes. For anyone running a blog or website using these elements, pairing it with managed vps hosting ensures fast loading, reliable uptime, and smooth handling of all your design features.
    Reply
  • Dede Sandi Rahmat
    Dede Sandi Rahmat
    12 August, 2025
    Di bagian profil yang ikon sosial media, apakah bisa ditambahkan sosmed threads? untuk bagian share juga bisa ditambah juga?
    Reply
  • Ehsaaan
    Ehsaaan
    21 June, 2025
    This comment has been removed by the author.
  • Kapistta
    Kapistta
    21 June, 2025
    Keren templatenya!
    Reply
  • John Asto
    John Asto
    10 June, 2025
    Ada 3 komponen baru.
    Reply
  • Owen Fungurani
    Owen Fungurani
    06 June, 2025
    How do we implement the update. I have seen it in my account and am afraid to disturb things but I love the update 😍
    • Owen Fungurani
      Igniel
      12 June, 2025
      You need to reinstall the whole theme and edit the configuration from the beginning. Blogger has no feature to upgrade theme partially.
    Reply
  • zoetami
    zoetami
    03 June, 2025
    Bagi dong kak
    Reply
Posting Komentar
Diposting oleh:
KudasaiKode
KudasaiKode
Hanya seorang yang hobi membuat artikel walau tidak sering banget

Posting Komentar