Shortcodes

All codes displayed here have been carefully extracted from ready-made code generators specifically designed to save time and effort for bloggers, where these tools allow you to insert advanced and consistent elements easily without the need for programming expertise. The goal of using them is to facilitate the blogging process, improve user experience, and make content look more professional and organized, adding a creative touch that gives your blog a modern and professional character.

Alert Messages

1. Alert Styles

Filled Alert

This is an example of a filled alert with colored background.

Outlined Alert

This is an example of an outlined alert with border only.

Soft Alert

This is an example of a soft alert with light transparent background.

Shadow Alert

This is an example of a shadow alert with colored strip and shadow.

2. Alert Types

Information

This is an information alert used to provide useful information to the user.

Success

This is a success alert used to indicate successful completion of an operation.

Warning

This is a warning alert used to warn the user about a potentially concerning matter.

Error

This is an error alert used to indicate the presence of a problem.

Gift

This is a gift alert used for special offers and rewards.

Default

This is a default alert used for general messages.

3. Alerts with Different Styles

Outlined Success

This is an outlined success alert.

Soft Warning

This is a soft warning alert.

Shadow Error

This is a shadow error alert.

Alert Without Icon

This is a soft success alert without icon.

Buttons

1. Button Styles

Filled Button Outlined Button Text Button Elevated Button Gradient Button

2. Button Sizes

Extra Small Small Medium Large Extra Large

3. Button Types

Normal Button Download Preview Gift

4. Outlined Buttons and Different Types

Download Preview Gift

5. Animation Effects

Pulse Effect Shake Effect

6. Hover Effects

Scale on Hover Glow on Hover Shadow on Hover

7. Additional Customizations

Rounded Button Custom Color Rounded Gradient

Hidden Content

...

Link Redirect Page

Code Boxes

JavaScript

// JavaScript Example
function hello() {
let message = "Hello World!";
console.log(message);
return message;
}

hello();

CSS

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Python

def calculate_area(radius):
"""Calculate circle area"""
pi = 3.14159
area = pi * (radius ** 2)
return area

print(calculate_area(5))

HTML

<div class="container">
<h1>Main Title</h1>
<p>This is sample text for display only</p>
</div>

PHP

<?php
function connectDatabase() {
$host = 'localhost';
$user = 'root';
$pass = 'password';
$db = 'example_db';

$conn = new mysqli($host, $user, $pass, $db);
return $conn;
}
?>

Tables

Title 1	Title 2	Title 3
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data

Table with Title
Title 1	Title 2	Title 3
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data

Table with Title and Row Headers
Title 1	Title 2	Title 3
Row 1	Data	Data
Row 2	Data	Data
Row 3	Data	Data
Row 4	Data	Data
Row 5	Data	Data
Row 6	Data	Data

Product Specifications Table

Samsung Galaxy S25 Ultra

The Samsung Galaxy S25 Ultra phone is the new generation of Samsung's flagship phones in the Galaxy S series, and comes with major updates in terms of performance, camera and design. The phone targets luxury phone enthusiasts that combine power, modern technologies and professional photography, with support for the integrated S Pen as usual for the Ultra series.

Display	6.8 inch, Dynamic AMOLED 2X, QHD+ resolution, 120Hz refresh rate, brightness up to 2600 nits
Processor	Snapdragon 8 Gen 4 or Exynos 2500 (depending on region) with 3nm technology
Memory	12 or 16 GB RAM
Internal Storage	256/512 GB or 1 TB (UFS 4.0)