Post #118 you learned alert boxes (warning, success). Now info box = for features, pricing, specifications, pros cons, product details. Makes post look pro like WordPress.
In Post #119, add 5 info boxes in Blogger.
Step 1: Add Info Box CSS Once
- Blogger → Theme → Edit HTML
- Find
]]></b:skin> - Paste this above it:
/* Info Boxes Post 119 */
.info-card{border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin:20px 0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.info-card h3{margin:0 0 10px 0;font-size:18px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.info-grid div{background:#f9fafb;padding:10px;border-radius:8px;}
@media(max-width:600px){.info-grid{grid-template-columns:1fr;}}
.price-box{border:2px solid #000;border-radius:12px;padding:20px;text-align:center;margin:20px 0;}
.price-box .price{font-size:32px;font-weight:bold;}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;}
.pros-cons ul{margin:0;padding-left:18px;}
@media(max-width:600px){.pros-cons{grid-template-columns:1fr;}}
- Save theme
Step 2: 5 Ready Info Boxes - Copy Paste in Post HTML Mode
1. Feature Box - For Template Features
<div class="info-card"> <h3>✨ Template Features</h3> <div class="info-grid"> <div>✅ Mobile Friendly</div> <div>✅ Fast Loading</div> <div>✅ SEO Optimized</div> <div>✅ AdSense Ready</div> </div> </div>
2. Specs / Details Box - For Blogger Tutorial
<div class="info-card"> <h3>📋 Post Details</h3> <div class="info-grid"> <div><strong>Post:</strong> #119</div> <div><strong>Level:</strong> Beginner</div> <div><strong>Time:</strong> 5 minutes</div> <div><strong>Need:</strong> No coding</div> </div> </div>
3. Pricing Box - For Your Products
<div class="price-box"> <h3>Blogger Pro Bundle</h3> <div class="price">₦5,000</div> <p>200 Templates + 200 Posts + Support</p> <a href="YOUR-LINK" style="background:#000;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:bold;margin-top:10px;">Buy Now</a> </div>
4. Pros and Cons Box - For Review Posts
<div class="pros-cons"> <div class="info-card" style="border-left:4px solid #22c55e;"> <h3 style="color:#16a34a;">✅ Pros</h3> <ul> <li>Free forever</li> <li>Fast loading</li> <li>No coding</li> </ul> </div> <div class="info-card" style="border-left:4px solid #ef4444;"> <h3 style="color:#dc2626;">❌ Cons</h3> <ul> <li>Limited customization</li> <li>No plugins</li> </ul> </div> </div>
5. Download Info Box - With Button Inside
<div class="info-card" style="text-align:center;"> <h3>📦 Download Details</h3> <div class="info-grid" style="text-align:left;"> <div><strong>File:</strong> template.zip</div> <div><strong>Size:</strong> 1.2 MB</div> <div><strong>Version:</strong> 2.0</div> <div><strong>Update:</strong> Jan 2026</div> </div> <a href="YOUR-DOWNLOAD-LINK" style="background:#000;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:bold;margin-top:14px;">Download Now ↓</a> </div>
Step 3: No Theme Edit Version (Inline for One Post)
<div style="border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin:20px 0;"> <h3 style="margin:0 0 10px 0;">✨ Features</h3> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;"> <div style="background:#f9fafb;padding:10px;border-radius:8px;">✅ Fast</div> <div style="background:#f9fafb;padding:10px;border-radius:8px;">✅ SEO</div> </div> </div>
Step 4: Where to Use?
- Feature box in all template posts (Post #13-20)
- Specs box in tutorial posts (Post #1-100)
- Pricing box for your paid bundle in Post #199-200
- Pros cons in comparison posts (Blogger vs WordPress Post #4)
Post #119 Complete.
Next Post #120 from your CSV: How to Create Tabs in Blogger Post - tabbed content like Features / Demo / Download.
0 Comments