Blog Tĩnh #12 – Tích hợp banner, CTA hoặc widget bằng HTML đơn giản

1. Tạo banner nổi bật đầu hoặc giữa bài

<div class="banner-cta">
  ✨ Khám phá toàn bộ series <a href="/series/blog-tinh/">Blog Tĩnh</a> từ A đến Z!
</div>

.banner-cta {
  background: #fff8e1;
  border: 1px solid #ffe082;
  padding: 1rem;
  margin: 2rem 0;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  color: #bf6f00;
}

2. Tạo nút hành động (CTA) cuối bài

<div class="cta-box">
  🚀 Bạn muốn tạo blog siêu nhẹ như này?
  <br>
  <a href="/boilerplate.html" class="cta-btn">Tải boilerplate miễn phí</a>
</div>

.cta-box {
  text-align: center;
  padding: 1.5rem;
  background: #f0f4ff;
  border: 1px solid #90caf9;
  border-radius: 6px;
  margin-top: 3rem;
}

.cta-btn {
  display: inline-block;
  margin-top: 1rem;
  background: #1976d2;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}
.cta-btn:hover {
  background: #0d47a1;
}

3. Widget đơn giản: bài viết nổi bật, liên hệ, link nhanh…

<aside class="widget">
  <h4>Bài nổi bật</h4>
  <ul>
    <li><a href="/posts/dark-mode.html">Hướng dẫn Dark Mode</a></li>
    <li><a href="/posts/deploy.html">Deploy blog với Netlify</a></li>
  </ul>
</aside>

.widget {
  background: #f5f5f5;
  padding: 1rem;
  border-left: 4px solid #ccc;
  margin: 2rem 0;
}
.widget h4 {
  margin-bottom: 0.5rem;
}
.widget ul {
  list-style: none;
  padding-left: 0;
}
.widget li {
  margin-bottom: 0.4rem;
}

4. Đặt vị trí hợp lý

• Banner CTA: đầu bài, giữa bài hoặc ngay trước phần kết
• Nút CTA: cuối bài, sau phần chia sẻ
• Widget: sidebar (nếu có), hoặc cuối trang

Việc chèn các thành phần như banner, CTA hay widget không cần phải “dynamic”. Với blog tĩnh, bạn hoàn toàn kiểm soát từng khối bằng HTML sạch, dễ bảo trì, dễ update, không ảnh hưởng tốc độ.

Chúc bạn tăng tỉ lệ chuyển đổi, giữ chân người đọc – và biến blog tĩnh thành blog “có lực”!