Bài này mình chia sẻ đến anh em Mẫu banner quảng cáo HTML CSS responsive (kiểu dọc) lắp bên sidebar của website WordPress, hay Blogspot gì đó tuỳ ae (nó là HTML CSS thôi). Anh em nào có nhu cầu thì hót về xài nhé !
Để sử dụng thì anh em copy đoạn HTML CSS sau và đem dán vào phần HTML widget trên website WordPress hoặc Blogspot (Blogger). Sau đó sửa lại nội dung và link ảnh cho phù hợp với nhu cầu thôi. Ngoài ra phần nút nhấn và ảnh có link trỏ về trang đích, ae cũng sửa lại link cần trỏ của ae nhé !
Mẫu 01: Trước đây mình từng dùng trên demo theme Nevo
<style>
.hb-card {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
font-family: 'Nunito', sans-serif;
font-size: 17px;
color: #495057;
overflow: hidden;
box-sizing: border-box;
padding: 0 !important;
}
.hb-card-img-link {
display: block !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.hb-card-img {
width: 100% !important;
height: auto !important;
border: 0 !important;
display: block !important;
margin: 0 !important;
}
.hb-card-body {
padding: 5px 0 0 0 !important;
flex: 1 1 auto;
border: none !important;
}
.hb-card-label {
margin: 0 0 8px 0 !important;
padding: 0 !important;
font-size: 130%;
font-weight: 500;
color: #212529;
line-height: 1 !important;
text-transform: none;
display: block !important;
}
.hb-card-text {
margin: 0 0 15px 0 !important;
line-height: 1.6;
display: block !important;
}
.hb-card-btn {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(#489dff, #288cff);
color: #fff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: 0.2s;
white-space: nowrap;
}
.hb-card-btn:hover {
filter: brightness(1.1);
}
</style>
<div class="hb-card">
<a class="hb-card-img-link" href="https://hocban.vn/kinh-nghiem-toi-uu-toc-do-website-wordpress/" target="_blank" rel="noopener">
<img class="hb-card-img" src="https://hocban.vn/wp-content/uploads/2025/11/kinh-nghiem-toi-uu-toc-do-website-wordpress.jpg" alt="Tối ưu WordPress" />
</a>
<div class="hb-card-body">
<div class="hb-card-label">Quảng cáo</div>
<p class="hb-card-text">Đây là quảng cáo sử dụng HTML CSS để tối ưu hiển thị trên các thiết bị khác nhau.</p>
<a class="hb-card-btn" href="https://hocban.vn/kinh-nghiem-toi-uu-toc-do-website-wordpress/" target="_blank" rel="noopener">Xem thêm</a>
</div>
</div>Mẫu 02: Dịp Black Friday 2025 mình đặt bên sidebar, nhân tiện chia sẻ ae luôn.
Bổ sung thêm cho ae một mẫu banner dọc siêu đẹp, có hiệu ứng bong bóng chuyển động ngon lành, mượt trên PC và mobile. Mẫu này không có ảnh nhưng có chèn JS, ae copy đoạn code bên dưới để sử dụng nhé !
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" rel="stylesheet">
<style>
#bubble-widget-wrapper p, #bubble-widget-wrapper a {
margin: 0 !important;
padding: 0 !important;
text-transform: none !important;
border: none !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
#bubble-widget-wrapper {
position: relative;
width: 100%;
min-height: 350px;
overflow: hidden;
background: linear-gradient(135deg, #124773 0%, #02203c 100%);
border-radius: 12px;
color: white !important;
font-family: 'Inter', sans-serif !important;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 1.5em 0 !important;
}
#bubble-widget-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.widget-content {
position: relative;
z-index: 2;
padding: 0 40px !important;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100%;
gap: 18px !important;
}
#bubble-widget-wrapper .widget-title {
font-size: 40px !important;
font-weight: 800 !important;
color: #ffffff !important;
}
#bubble-widget-wrapper .widget-title span { color: #facc15 !important; }
#bubble-widget-wrapper .widget-desc {
font-size: 19px !important;
color: #cbd5e1 !important;
font-weight: 400 !important;
margin-top: -5px !important;
}
#bubble-widget-wrapper .widget-btn {
display: inline-block !important;
background: #2563eb !important;
color: #ffffff !important;
border-radius: 50px !important;
font-size: 19px !important;
font-weight: 400 !important;
padding: 14px 30px !important;
transition: background 0.2s ease, color 0.2s ease !important;
cursor: pointer !important;
line-height: 1 !important;
}
#bubble-widget-wrapper .widget-btn:hover {
background: #ffffff !important;
color: #124773 !important;
}
@media (max-width: 768px) {
.widget-content {
padding-left: 70px !important;
padding-right: 70px !important;
}
#bubble-widget-wrapper .widget-title { font-size: 42px !important; }
}
.widget-bubble { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(0.6px); }
</style>
<div id="bubble-widget-wrapper">
<div id="bubble-widget-canvas"></div>
<div class="widget-content">
<p class="widget-title">Xu hướng <span>2026</span></p>
<p class="widget-desc">Tối ưu để hoàn thiện và tăng trưởng tốt hơn</p>
<a href="https://hocban.vn/toi-uu-blog/" title="Tối ưu Blog để hoàn thiện và tăng trưởng tốt hơn" rel="noopener" class="widget-btn">Xem thêm</a>
</div>
</div>
<script>
(function() {
'use strict';
function init() {
const container = document.getElementById('bubble-widget-canvas');
if (!container) return;
const bubbleCount = window.innerWidth < 768 ? 20 : 40;
const colors = ['rgba(255,255,255,0.10)', 'rgba(56,189,248,0.20)', 'rgba(147,197,253,0.18)', 'rgba(236,72,153,0.16)', 'rgba(167,139,250,0.18)', 'rgba(255,210,140,0.12)'];
const random = (min, max) => Math.random() * (max - min) + min;
const fragment = document.createDocumentFragment();
const bubblesData = [];
for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement('div');
bubble.className = 'widget-bubble';
const r = Math.random();
let size = r < 0.80 ? random(4, 10) : (r < 0.90 ? random(10, 18) : random(18, 44));
Object.assign(bubble.style, { width: size + 'px', height: size + 'px', background: colors[Math.floor(Math.random() * colors.length)], left: random(-5, 105) + '%', top: random(0, 100) + '%' });
bubblesData.push({ element: bubble, x: parseFloat(bubble.style.left), y: parseFloat(bubble.style.top), vx: random(-0.25, 0.25), vy: random(-0.6, -0.12), sway: random(0.2, 1.2), speedFactor: random(0.6, 1.6), phase: Math.random() * Math.PI * 2 });
fragment.appendChild(bubble);
}
container.appendChild(fragment);
let rafId = null;
let isRunning = false;
function animate() {
if (!isRunning) return;
bubblesData.forEach(b => {
b.phase += 0.015;
b.x += (b.vx + Math.sin(b.phase * (1 + b.sway)) * 0.008) * b.speedFactor;
b.y += (b.vy + Math.cos(b.phase * (0.6 + b.sway)) * 0.002) * b.speedFactor;
if (b.y < -12) { b.y = 105; b.x = random(-5, 105); }
if (b.x < -10) b.x = 110;
if (b.x > 110) b.x = -10;
b.element.style.left = b.x + '%'; b.element.style.top = b.y + '%';
});
rafId = requestAnimationFrame(animate);
}
const start = () => { if(!isRunning) { isRunning = true; animate(); } };
const stop = () => { isRunning = false; cancelAnimationFrame(rafId); };
document.addEventListener('visibilitychange', () => document.hidden ? stop() : start());
start();
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else setTimeout(init, 30);
})();
</script>