Want to make your blog posts more engaging and professional? Simply writing paragraphs of text can be boring. To truly guide your readers and highlight key information, you need a better visual tool.
While our previous guide on stylish notes and alerts offered a great way to do this, we're excited to share a brand-new set of 6 modern message boxes.
These boxes are perfect for displaying success messages, warnings, errors, or simple informational tips. They are built with pure CSS and HTML, meaning they are incredibly lightweight, require no JavaScript, and won't slow down your site. They are fully responsive, look professional, and are extremely easy for beginners to install.
Table of Contents
Overview of the 6 Message Box Designs
This new collection provides six unique styles to fit any situation:
- Default Box: A clean, neutral box for general notes or information.
- Outline Box: A subtle, dashed-border style perfect for highlighting content without overwhelming it.
- Green (Success) Box: The classic "success" message to confirm an action is complete.
- Blue (Information) Box: Ideal for sharing helpful tips, tricks, or extra details.
- Red (Error) Box: A clear and bold box to alert users to an error, failure, or critical problem.
- Yellow (Warning) Box: Perfect for cautions, warnings, or information that requires the reader's attention.
How to Install the Modern Message Boxes on Blogger
Adding these stylish boxes to your Blogger blog is simple. Just follow these steps carefully.
Warning!
Before editing your theme's XML, we strongly recommend you create a backup of your current theme. This ensures you can easily restore it if anything goes wrong.
Install the CSS (One-Time Setup)
This CSS code styles all 6 box designs. You only need to add this to your theme once.
- Go to your Blogger Dashboard.
- Navigate to the Theme section.
- Click the drop-down arrow next to the "Customize" button and select Edit HTML.
- Inside the theme editor, click anywhere and press Ctrl+F (or Cmd+F on a Mac) to open the search box.
- Type
</head>and press Enter to find the closing</head>tag. - Copy the entire CSS code below and paste it right above the
</head>tag.
<style>
/*<![CDATA[*//*--[ copyright codehubly.com ]--*/
.box{position:relative;padding:1.25em 1.5em 1.25em 4em;margin:1em auto;border-radius:12px;line-height:1.55;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:all 0.3s ease;background:#fff;color:#222}
.box strong{display:block;margin-bottom:0.25em;font-weight:600}
.box p + p{margin-top:0.5em}
.box:hover{transform:translateY(-3px);box-shadow:0 5px 12px rgba(0,0,0,0.1)}
.box::before{content:"";position:absolute;left:1.25em;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:18px;transition:all 0.3s ease;pointer-events:none}
.box.default{border-left:5px solid #999;background:linear-gradient(145deg,#f8f8f8,#ffffff)}
.box.default::before{background-color:rgb(98 161 255 / 48%);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12l8 -4.5' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3Cpath d='M12 12v9' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3Cpath d='M12 12l-8 -4.5' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3Cpath d='M12 12l8 4.5' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3Cpath d='M12 3v9' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3Cpath d='M12 12l-8 4.5' fill='none' stroke='%23fff' stroke-width='3px'/%3E%3C/svg%3E")}
.box.outline{border:2px dashed #aaa;background:#fafafa}
.box.outline::before{background-color:rgba(170,170,170,0.15);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z' fill='%23e93f39'/%3E%%3C/svg%3E")}
.box.green{border-left:5px solid #2f9d27;background:linear-gradient(145deg,#e9f8e8,#ffffff)}
.box.green::before{background-color:rgba(47,157,39,0.15);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z' fill='%232c9217'/%3E%3C/svg%3E")}
.box.blue{border-left:5px solid #1877f2;background:linear-gradient(145deg,#e7f0ff,#ffffff)}
.box.blue::before{background-color:rgba(24,119,242,0.15);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 9h-1l-.117 .007a1 1 0 0 0 0 1.986l.117 .007v3l.007 .117a1 1 0 0 0 .876 .876l.117 .007h1l.117 -.007a1 1 0 0 0 .876 -.876l.007 -.117l-.007 -.117a1 1 0 0 0 -.764 -.857l-.112 -.02l-.117 -.006v-3l-.007 -.117a1 1 0 0 0 -.876 -.876l-.117 -.007zm.01 -3l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z' fill='%23766017'/%3E%3C/svg%3E")}
.box.red{border-left:5px solid #e53935;background:linear-gradient(145deg,#ffecec,#ffffff)}
.box.red::before{background-color:rgba(229,57,53,0.15);background-image:url('data:image/svg+xml;utf8,<svg fill="%23e53935" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2zm1 16h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>')}
.box.yellow{border-left:5px solid #e6b800;background:linear-gradient(145deg,#fff9e5,#ffffff)}
.box.yellow::before{background-color:rgba(230,184,0,0.15);background-image:url('data:image/svg+xml;utf8,<svg fill="%23e6b800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>')}
.box:hover::before{filter:brightness(1.1);transform:translateY(-50%) scale(1.05)}
@media (max-width:600px){.box{padding:1em 1em 1em 3.5em;font-size:0.95em}
.box::before{left:1em;width:28px;height:28px;background-size:16px}
} /*]]>*/
</style>- Click the Save icon in the top-right corner.
That's it! The CSS is now installed on your blog.
How to Use the Message Boxes in Your Posts
Now that the CSS is installed, you can easily add any of the 6 boxes to your blog posts or pages.
- Create a new post or edit an existing one.
- In the post editor, switch from "Compose view" to "HTML view" by clicking the
</>icon. - Find the HTML code for the box you want (from the list below) and paste it where you want it to appear in your post.
- Replace the demo text with your own content.
Here are the HTML codes for all 6 designs:
1. Default Box
Use this for general information or standard notes.
This is a simple neutral box used for general messages or notes. It maintains a clean and balanced appearance suitable for any type of content.
<!--[ Default Box ]-->
<div class="box default">
<strong>Default Box</strong>
<p>This is a simple neutral box used for general messages or notes.</p>
<p>You can add more paragraphs if needed.</p>
</div>2. Outline Box
A subtle, dashed-border style perfect for highlighting content.
This variant emphasizes structure with a dashed outline and subtle hover animation, great for separating or highlighting neutral content sections.
<!--[ Outline Box ]-->
<div class="box outline">
<strong>Outline Box</strong>
<p>This variant emphasizes structure with a dashed outline and subtle hover animation.</p>
</div>3. Green (Success) Box
Use this to confirm a successful action or share positive news.
Your operation has been completed successfully. Everything looks good and no further action is needed.
<!--[ Green (Success) Box ]-->
<div class="box green">
<strong>Success Box</strong>
<p>Your operation has been completed successfully. Everything looks good and no further action is needed.</p>
</div>4. Blue (Information) Box
Perfect for sharing helpful tips, tricks, or extra information.
This section provides important additional details for users to understand before proceeding further.
<!--[ Blue (Info) Box ]-->
<div class="box blue">
<strong>Information Box</strong>
<p>This section provides important additional details for users to understand before proceeding further.</p>
</div>5. Red (Error) Box
Use this to highlight critical errors, failures, or problems.
An error has occurred while processing your request. Please check your input and try again.
<!--[ Red (Error) Box ]-->
<div class="box red">
<strong>Error Box</strong>
<p>An error has occurred while processing your request. Please check your input and try again.</p>
</div>6. Yellow (Warning) Box
Perfect for cautions or steps that need user confirmation.
This is a caution message to alert users of potential risks or steps that need confirmation.
<!--[ Yellow (Warning) Box ]-->
<div class="box yellow">
<strong>Warning Box</strong>
<p>This is a caution message to alert users of potential risks or steps that need confirmation.</p>
</div>Key Features & Benefits
- 6 Unique Styles: A box for every need (Info, Success, Warning, Error, and more).
- Pure CSS - No JavaScript: This means no extra loading time or conflicts. Your site stays fast, which is great for SEO.
- Modern, Clean Design: Subtle gradients, shadows, and icons give your blog a professional feel.
- Built-in SVG Icons: The icons are embedded directly into the
CSS, so you don't need to load external fonts or image files. - Fully Responsive: These boxes look fantastic on any device, from a large desktop monitor to a small mobile phone.
- Beginner-Friendly: Just one-time CSS setup and simple HTML snippets to paste into your posts.
Frequently Asked Questions (FAQ)
Do these message boxes require JavaScript?
No. These boxes are built using only HTML and CSS. This makes them extremely lightweight and fast, ensuring they won't slow down your website.
Are these boxes mobile-friendly (responsive)?
Yes. The CSS includes @media queries that automatically adjust the padding and icon size for screens smaller than 600px, ensuring they look great on all devices.
Can I change the colors of the boxes?
Absolutely. You can easily edit the colors in the CSS code. For example, to change the green success box, find the .box.green class and change the border-left and background:linear-gradient color codes to your liking.
How are these different from your other "Notes and Alerts" post?
This is a completely different design set! Our other post features "Notes" and "Alerts" with a different style (icons, layout, and hover effects). These "Message Boxes" offer a new, modern look with different icons and a clean, left-border design. You can choose whichever set best fits your blog's aesthetic.
Can I use multiple boxes in a single post?
Yes! You can mix and match any of the six box styles as many times as you need within a single post. They will not conflict with each other.
Related Posts
Final Thoughts
Upgrading your blog's appearance doesn't have to be complicated. These 6 modern CSS message boxes are a simple, copy-and-paste solution to make your content more organized, scannable, and professional.
By effectively highlighting key information, you improve the user experience (UX), which can lead to longer visitor duration and better SEO performance. This new design set gives you another great option to make your content stand out.
