How to Create Alert Box in Blogger - Warning, Success, Info Boxes 2026

 

WordPress has alert boxes: Warning ⚠️ Success ✅ Info ℹ️ Danger ❌. Blogger default has none. But you need them for tips, warnings, download ready notes, affiliate disclaimer.

In Post #118, add 4 alert boxes in Blogger - no plugin.

Step 1: Add Alert Box CSS Once (1 Time)

1. Blogger → Theme → Edit HTML
2. Find ]]></b:skin> (Ctrl+F)
3. Paste this above it:

/* Alert Boxes Post 118 */
.alert-box{padding:14px 16px;border-radius:8px;margin:18px 0;border-left:4px solid;display:flex;gap:10px;line-height:1.6;}
.alert-box svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;}
.alert-info{background:#eff6ff;border-color:#3b82f6;color:#1e40af;}
.alert-success{background:#f0fdf4;border-color:#22c55e;color:#166534;}
.alert-warning{background:#fffbeb;border-color:#f59e0b;color:#92400e;}
.alert-danger{background:#fef2f2;border-color:#ef4444;color:#991b1b;}

4. Save theme

Step 2: Copy Paste Alert Boxes in Post (HTML Mode)

1. Info Box - Blue - For Tips

<div class="alert-box alert-info">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 16a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-5h-2V7h2Z"/></svg>
<div><strong>Info:</strong> This works on all Blogger templates, no coding.</div>
</div>

2. Success Box - Green - For Download Ready

<div class="alert-box alert-success">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.3 7.3-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 1 1 1.4-1.4l1.3 1.3 4.3-4.3a1 1 0 0 1 1.4 1.4Z"/></svg>
<div><strong>Success:</strong> Template installed! Check your blog now.</div>
</div>

3. Warning Box - Yellow - For Backup Disclaimer

<div class="alert-box alert-warning">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z"/></svg>
<div><strong>Warning:</strong> Backup theme first: Theme → Backup/Restore → Download.</div>
</div>

4. Danger Box - Red - For Don't Do

<div class="alert-box alert-danger">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 16a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-5h-2V7h2Z"/></svg>
<div><strong>Don't:</strong> Don't delete &lt;head&gt; tag. Add below it only.</div>
</div>

Step 3: Alert Box + Button Combo (Best for Download Posts)

<div class="alert-box alert-success">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.3 7.3-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 1 1 1.4-1.4l1.3 1.3 4.3-4.3a1 1 0 0 1 1.4Z"/></svg>
<div>
<strong>Ready to Download</strong><br/>Tested, mobile friendly, no error.
<div style="margin-top:10px;">
<a href="YOUR-LINK" style="background:#22c55e;color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:bold;display:inline-block;">Download Now ↓</a>
</div>
</div>
</div>

Step 4: No Theme Edit Version (Inline)

If you don't want to edit theme, paste this directly in post HTML mode:

<div style="background:#eff6ff;border-left:4px solid #3b82f6;color:#1e40af;padding:14px 16px;border-radius:8px;margin:18px 0;">
<strong>Info:</strong> Inline alert box - no theme edit needed.
</div>

Post #118 Complete.

Next Post #119: How to Create Info Box in Blogger - pricing, features, specs box.