👋 Introduction
Hello bloggers! Welcome back to another exciting article on Technobipu. Today, we’re diving into a powerful Blogger trick that will take your blog to the next level — Using Shortcodes Like a Pro!
If you ever wondered how to add professional features like:
-
📌 Table of Contents
-
🔘 Stylish Buttons
-
🚨 Alert Messages
-
📨 Contact Forms
-
🧾 Code Boxes
-
🧩 Full-Width Layouts
…all without touching complex HTML or JavaScript, then this guide is for you.
.png)
📌 Watch Full Video Tutorial: Click here to watch on YouTube
🎥 YouTube Channel: @technobipu(alert-passed)
📚 What Are Blogger Shortcodes?
Shortcodes are small code snippets that simplify advanced formatting in your Blogger post. Instead of writing long HTML code, you just paste a shortcode and it does the magic!
For example, adding a TOC (Table of Content) with this:
[toc]
That’s it! And boom — your TOC appears where the shortcode is placed.
🧰 Tools You Need
To use these shortcodes:
-
Use a premium Blogger template that supports shortcodes (like the one used in our YouTube video).
-
Access the list of shortcodes from the official documentation or download it from the article/video description.
✨ How to Use Different Shortcodes (Step-by-Step)
✅ 1. Add a Table of Content (TOC)
Shortcode:
(toc) (toc) #title=(Table of Content)(code-box)
How to Use:
- Go to your post editor.
- Paste this shortcode where you want your TOC to appear.
- Apply Strikethrough format to it (very important).
- Save/Update your post.
- Refresh the live post to see the TOC.
🔠 2. Capitalize First Letter (Drop Caps)
Shortcode:
(caps)(code-box)
F(caps)acebook
This will make the “F” of Facebook larger.
🔘 3. Create Buttons (Download, Demo, Links)
Shortcode:
(getButton) #text=(My Button) #icon=(demo)(code-box)
(getButton) #text=(My Button) #icon=(demo) #size=(1)(code-box)
Paste the URL and button name as needed.
Add insert link formatting to activate it.
example:- (getButton) #text=(download) #icon=(download) (getButton) #text=(demo) #icon=(demo)(getButton) #text=(links) #icon=(link) (getButton) #text=(buy) #icon=(buy) (getButton) #text=(cart) #icon=(cart) (getButton) #text=(share) #icon=(share) (getButton) #text=(info) #icon=(info)
Supported Icons Shortcode:- demo, download, buy, link, cart, share, info
🎨 4. Colored Buttons with Icons
Shortcode:
(getButton) #text=(My Button) #icon=(demo) #color=(#ff000)(code-box)
Change the
colorcode.-
Add your preferred icon from FontAwesome.
-
Update the link and text.
📩 5. Add a Contact Form
Shortcode:
(contact-form)(code-box)
Place this at the bottom or contact page of your post. Apply strikethrough to activate it.
🚨 6. Alert Messages (Success, Warning, Error)
Shortcode:-
(alert-success), (alert-passed), (alert-warning), (alert-error), (code-box)
Apply Quoted (")Text to activate it.
Examples:
✅ Success Alert
[alert-success]Your form was submitted successfully!(alert-success)
⚠️ Warning Alert
[alert-warning]Please check all fields before submitting.(alert-warning)
❌ Error Alert
[alert-error]Submission failed. Try again later.(alert-error)
⬅️ 7. Change Sidebar Position (Left/Right/Full Width)
To Left Sidebar:
(left-sidebar)Right Sidebar(right-sidebar)To Remove Sidebar (Full Width):
(full-width)
Use these inside your post to switch layout styles dynamically. Apply strikethrough to activate it
🛠️ Where to Get These Shortcodes?
All these shortcodes are available for free. You can get the full list from the description of our YouTube video or from the template’s official documentation.
❓Does It Work on Every Template?
No. These shortcodes only work on premium Blogger templates that support custom shortcodes.
We recommend using the same template shown in our video for best results.
💡 Bonus Tips
-
Always preview your post before publishing.
-
Apply strikethrough formatting to activate shortcodes.
-
Keep your layout clean — don’t overuse too many buttons or alerts.
-
Use shortcodes only where needed for better SEO and user experience.
📝 Final Words
Now you know how to use shortcodes like a pro in Blogger. Whether it's making your blog interactive or professional-looking, these shortcuts save you time and effort.
💬 Have questions? Drop a comment below.
💻 Want to learn more? Watch the full video tutorial on YouTube.
📢 Stay Connected
🔔 Subscribe to Our Channel:
👉 www.youtube.com/@technobipu
🌐 Visit Our Website:
Find free Blogger tools, premium templates, SEO guides, and more.
