Powerful Blogger Shortcodes to Level Up Your Content

TemplateRise offers a rich collection of ready-to-use shortcodes for Blogger, making it easier than ever to add professional features and designs to your blog. Whether you're looking to create a mega menu, call-to-action button, table of contents, contact form, or display code snippets — our shortcode system helps you do it all without writing complex HTML. Simply copy, paste, and customize.

Mega Menu Posts

1
Navigation Dynamic

Create dynamic mega menu with posts from specific categories for enhanced navigation.

[type="mega-menu" label="News" count="4"]
What are Labels? In Blogger, labels are like categories or tags that help organize your posts. You can assign multiple labels to each post, and the mega menu can display posts from any specific label.
Blogger Labels Interface
📝 Notes for Mega Menu Shortcode
  • type="mega-menu" – Tells the system to render a mega menu block.
  • label="News" – Loads posts that have the label "News" (this is not the menu tab title).
  • Label is case-sensitive – For example, label="news" and label="News" are treated as different labels.
  • Label is optional – If the label is not set, the system will automatically display the most recent posts.
  • count="4" (optional) – Limits the number of posts displayed. If omitted, the default is 4.

Use [type="mega-menu" label="News"] to display the latest 4 posts with the 'News' label in a mega menu block.

Use [type="mega-menu"] to display the latest 4 recent posts when no label is specified.

Action Buttons

2
UI CTA

Use the [type="button"] shortcode to create beautiful call-to-action buttons in your Blogger posts or templates.

Basic Syntax
[type="button" text="Your Text" url="https://example.com"]
Basic Button
[type="button" text="Read More" url="https://example.com"]
With Background Color
[type="button" text="Subscribe" bg="#d97706" url="https://example.com"]
With Icon
[type="button" text="Download Now" url="https://example.com" icon="<i class='bi bi-download'></i>"]
Open in New Tab
[type="button" text="Visit Site" url="https://example.com" target="true"]
With All Options
[type="button" text="Buy Now" bg="#22c55e" url="https://example.com" target="true" icon="<i class='bi bi-cart'></i>"]
Preview
Download Now Buy Now Explore More
🧩 Attribute Required Description Example Default
text ✅ Yes Button label/text text="Download" "Click"
url ✅ Yes URL the button should link to url="https://example.com" "#"
bg ❌ No Background color in hex format bg="#22c55e" "#7c3aed"
icon ❌ No HTML for an icon (e.g., Bootstrap Icon) icon="<i class='bi bi-download'></i>" none
target ❌ No Open in new tab if true target="true" false
direction ❌ No Text/icon alignment (left/right/center) direction="right" left

🔔 Note on Using Bootstrap Icons

  1. Use the correct icon syntax:
    In the icon attribute, include a valid <i> tag using Bootstrap icon classes.

    ✅ Correct:
    icon="<i class='bi bi-download'></i>"

    ❌ Incorrect:
    icon="<i class="bi bi-download"></i>" (Avoid double quote conflict)
  2. Icon placement:
    The icon will appear before the button text, like:
  3. Find Bootstrap icons:
    Browse and copy icon names from the official library:
    https://icons.getbootstrap.com

Alert Messages

3
UI Notification

Display important messages with different alert styles for various purposes.

Success Alert
[type="alert" style="success" icon="true"] Your file has been uploaded successfully! [/type]
Warning Alert
[type="alert" style="warning" icon="true"] Please double-check your email before submitting. [/type]
Error Alert
[type="alert" style="error" icon="true"] Something went wrong. Please try again later. [/type]
Info Alert
[type="alert" style="info" ] This feature will be available soon. [/type]
Preview
Your file has been uploaded successfully!
Please double-check your email before submitting.
Something went wrong. Please try again later.
This feature will be available soon.
Notes
  • The icon="true" option will display a Bootstrap Icon matching the alert type.
  • If icon is not set or set to "false", the icon will be hidden.
  • You can use multiple alert boxes on the same page.

Blockquote

4
Typography Quote

Create beautiful blockquotes with author attribution for highlighting important quotes.

[type="blockquote"] Stay hungry, stay foolish. [/type]
Preview
Stay hungry, stay foolish.

Code Block

5
Code Syntax

Display code snippets with syntax highlighting for various programming languages.

[type="code"] <!-- Your code goes here --> <div class="example"> <h1>Hello World</h1> </div> [/type]
Preview
<div class="example">
<h1>Hello World</h1>
</div>

Table of Contents

6
Navigation Auto-generated

Automatically generate a table of contents based on your post headings.

[type="toc"]
Preview
Table of Content
    1. Contact form
    2. 1. Software Development
    3. 2. Customer Service
    4. 3. Data Analysis

Contact Form

7
Form Interactive

Add a customizable contact form to any page or post.

[type="contact-form"]
Preview
Contact form

Drop Caps

8
Content Interactive

Make the first letter of your paragraph large and stylish using the Drop Caps shortcode.

[type="dropcaps"]L[/type]orem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae leo.

This will render the first letter (L) in a large, decorative style.

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae leo.

Table

9
Content Interactive

The [type="table"] shortcode lets you create responsive tables easily using a clean and readable format.

[type="table" columns="Column 1, Column 2, Column 3"]
[row] Value 1 | Value 2 | Value 3 [/row]
[row] Value 1 | Value 2 | Value 3 [/row]
...
[/type]
Notes
  • Use commas in the columns="..." attribute to define your headers.
  • Use [row] ... [/row] for each data row.
  • Use | to separate values inside each [row].
Preview
Name Age Country
Alice 25 USA
Bob 30 Canada
Charlie 28 Australia

Note: These shortcodes are designed to work only with TemplateRise Blogger themes.