Visual Elements (Formating Styles, Typography, Button, Boxes, etc)

Ad here

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 = MC²
H₂O
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.

.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}

{
  "version": "1.0",
  "task": "image_edit",
  "notes": "Edit foto menjadi potret studio kelas profesional setara Canon EOS R5. Pertahankan wajah & pose asli.",
  "input_image": "REPLACE_WITH_IMAGE_ID_OR_PATH",
  "camera_emulation": {
    "brand_model": "Canon EOS R5",
    "lens": "50mm f/1.8 (standard prime, sedikit lebih luas dari 85mm)",
    "look": "ultra sharp, rich micro-contrast, natural color science"
  },
  "composition": {
    "framing": "three-quarter body (from mid-thigh up)",
    "arms": "both arms sepenuhnya terlihat",
    "orientation": "portrait",
    "crop_policy": "do_not_crop_face_or_hands",
    "keep_pose": true,
    "zoom": "slight zoom-out for wider context"
  },
  "subject_constraints": {
    "keep_identity": true,
    "lock_features": ["eyes", "nose", "lips", "eyebrows", "jawline", "face_shape"],
    "expression_policy": "preserve_original"
  },
  "retouching": {
    "skin": {
      "tone": "keep original color",
      "finish": "smooth, healthy, radiant",
      "texture": "retain fine pores; avoid plastic look",
      "blemishes": "lightly reduce temporary blemishes only",
      "frequency_separation_strength": 0.4,
      "clarity_microcontrast": 0.15
    },
    "hair": {
      "finish": "clean, neat, shiny",
      "flyaways": "reduce but keep natural strands"
    },
    "eyes": {
      "whites_desaturation": 0.1,
      "iris_clarity": 0.2,
      "avoid_overwhitening": true
    },
    "teeth": {
      "natural_whiten": 0.08,
      "avoid_pure_white": true
    }
  },
  "clothing": {
    "policy": "upgrade quality while keeping same/similar style, cut, and color",
    "fabric_look": "premium, fine weave, crisp edges",
    "wrinkle_reduction": "moderate",
    "texture_enhancement": 0.2
  },
  "lighting": {
    "setup": "bright, soft, even front light",
    "key": "beauty dish or ring light straight-on",
    "fill": "broad soft fill to remove harsh shadows",
    "shadow_control": "minimal, no deep shadows",
    "specular_highlights": "subtle, flattering",
    "white_balance": "neutral daylight",
    "exposure_target": "ETTR without clipping"
  },
  "background": {
    "type": "solid",
    "color": "navy blue (#0f2a4a)",
    "environment": "clean professional photo studio",
    "gradient": "very subtle center vignette",
    "separation": "gentle rim lift if needed"
  },
  "color_tone": {
    "overall": "natural, true-to-life skin tones",
    "saturation": "moderate",
    "contrast": "medium with soft roll-off",
    "vibrance": 0.1
  },
  "detail_sharpness": {
    "method": "edge-aware sharpening",
    "amount": 0.35,
    "radius": 0.8,
    "threshold": 0.02,
    "noise_reduction": {
      "luminance": 0.2,
      "chroma": 0.25,
      "preserve_details": 0.8
    }
  },
  "clean_up": {
    "remove_noise": true,
    "remove_artifacts": true,
    "banding_fix_on_background": true
  },
  "output": {
    "resolution": "6000x4000",
    "dpi": 300,
    "format": "PNG",
    "color_space": "sRGB IEC61966-2.1",
    "bit_depth": "16-bit if supported, else 8-bit",
    "background_alpha": "opaque"
  },
  "safety_bounds": {
    "do_not": ["change face geometry or identity", "change pose", "alter clothing style drastically", "add heavy makeup", "over-smooth or plastic skin", "over-sharpen halos"]
  },
  "negative_prompt": ["plastic skin", "over-whitened eyes/teeth", "harsh shadows", "color casts", "halo artifacts", "muddy blacks", "posterization/banding", "oversaturated skin", "blotchy NR"],
  "controls": {
    "face_identity_lock": 0.95,
    "pose_lock": 0.95,
    "background_replace_strength": 0.9,
    "clothes_style_lock": 0.85
  },
  "seed": 142857,
  "metadata": {
    "locale": "id-ID",
    "creator": "professional photo editor style",
    "purpose": "masterpiece studio portrait upgrade with zoom-out framing"
  }
} // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is' == /an_example/) {
  of_beautifier();
} else {
  var a = b ? (c % d) : e[f];
}

https://www.igniel.com

Syntax highlighter without numbering and "copy" button.

Tombol (Button)

Fill Square (default)	A href `btn` class A href `btn-fill` class
Fill Rounded	A href `btn` class A href `btn-fill` class
Outline Square	A href `btn-outline` class
Outline Rounded	A href `btn-outline` class

Default Icon	Contact Shop
Custom Icon	Send Learn More

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)

Normal Box

Box default

Box outline

Box blue

Box green

Box yellow

Box red

Box purple

Alert Box

Box info

Box success

Box warning

Box danger

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 blue one New
The green one New
The yellow one New
The red 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 with justified text alignment. IMPORTANT! Will automatically change to one column on a screen size 480px and smaller.

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

Accordion

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

A. Single

Accordion Open By Default

Accordion

B. Multi

Accordion Open By Default

Accordion

Spoiler

Show / hide content with click event to trigger.

Spoiler

Images

A. Blogger Default

Image dimension is according to selected size in Blogger editor.

Default style of image with caption on Blogger editor

B. Figure

Standard figure tag with figcaption.

C. Gallery (Carousel)

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

Additional caption text

D. Gallery (Swipe)

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

Additional caption text

YouTube Lazy Load

Lazy load YouTube video will make your pages lighter.

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

C. Vertical

Name	Rain
City	Sukabumi
Blood Type	Unknown
Hair Color	Black
Eye Color	Brown

List

A. Custom Number

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

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.
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.
Nascetur imperdiet congue facilisi habitasse viverra sit pharetra vulputate tellus viverra amet interdum magna posuere neque class dui suspendisse netus.
Posuere a quam varius natoque blandit primis dui massa tempor praesent non massa orci class vehicula molestie nec nibh cum.
Porta dolor odio diam laoreet augue sed et est tortor.

B. Ordered List

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

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

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 here

Documentation

Posted by: Igniel

Stimulate your passion!

Visit profile