Một số vị trí quảng cáo không cố định thông dụng

Một số vị trí quảng cáo không cố định thông dụng

Nếu bạn đang tìm cách chèn banner quảng cáo vào các vị trí cố định trên trang, như mép trái/phải, đầu trang hoặc chân trang — thì đây là danh sách những vị trí phổ biến, thường được sử dụng trên cả desktop lẫn mobile.

Các đoạn mã HTML/CSS dưới đây từng được dùng thủ công để tạo hiệu ứng “floating ads”, tuy nhiên nếu bạn muốn một giải pháp mạnh mẽ hơn, dễ quản lý, không cần đụng đến code thì nên tham khảo ngay plugin Init Ad Engine – công cụ quảng cáo linh hoạt dành riêng cho WordPress.

Vì sao nên dùng Init Ad Engine?

• Không cần sửa file theme – tất cả quản lý từ admin
• Hỗ trợ đầy đủ các vị trí: catfish, float, balloon, sticky, popunder…
• Chọn thiết bị, phân quyền, thêm fallback HTML nếu không có banner
• Giao diện cấu hình đơn giản, dễ hiểu, có preview trực tiếp
• Hỗ trợ shortcode để chèn banner vào nội dung nếu muốn

Tham khảo thêm:

• Tự tạo mã quảng cáo Popup/Popunder, có hỗ trợ Cookies

Các vị trí quảng cáo không cố định thông dụng

Trên desktop:

• Float Left + Right: Hai banner 120×600 nằm ở hai bên trang
• Balloon Left + Right: Hai banner 300×250 dưới chân trang
• PC Catfish: Một banner lớn ở cuối trang (728×90)

Trên thiết bị di động:

• Mobile Catfish: Banner 320×50 dưới chân trang
• Mobile Fixed Top: Banner 320×50 cố định đầu trang

Xem demo Tải về

CSS

:root {
	--theme-color: #000;
}
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 0;
}
.sticky-footer {
	cursor: pointer;
	width: 320px;
	left: calc(100% / 2 - 160px);
	position: fixed;
    bottom: 0;
    z-index: 999;
}
.sticky-top {
	bottom: auto;
	top: 0;
}
.sticky-x-button {
	position: absolute;
    left: 0;
    top: -10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    background: var(--theme-color);
    border-radius: 50%;
	width: 30px;
	height: 30px;
    line-height: 30px;
    text-align: center;
}
.sticky-top .sticky-x-button {
	top: auto;
	bottom: -10px;
}
.sticky-pc-footer-content {
	width: 728px;
	left: calc(100% / 2 - 364px);
}
.left-balloon {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999
}
.x-left-balloon {
	position: fixed;
	left: 0;
	bottom: 227px;
	display: block;
	background: var(--theme-color);
	color: #fff; cursor:
	pointer; padding: 5px 10px
}
.right-balloon {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999
}
.x-right-balloon {
	position: fixed;
	right: 0;
	bottom: 227px;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}
.float-left {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999
}
.x-float-left {
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}
.float-right {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999
}
.x-float-right {
	position: fixed;
	right: 0;
	top: 0;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}

/*  Nếu sử dụng Bootstrap 3, không cần sử dụng đoạn này */

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
	display: none !important;
}
@media (max-width: 767px) {
	.visible-xs {
		display: block !important;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm {
		display: block !important;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.visible-md {
		display: block !important;
	}
}
@media (min-width: 1200px) {
	.visible-lg {
		display: block !important;
	}
}

HTML

<div id="pc-catfish" class="visible-lg visible-md sticky-footer sticky-pc-footer-content">
<a href="https://inithtml.com/#pc-catfish" target="_blank" rel="noopener"><img src="banners/768x90.jpg" alt="PC Catfish" width="768" height="90" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#pc-catfish').remove();">X</span>
</div>

<div id="mobile-fixed-top" class="visible-xs visible-sm sticky-footer sticky-top">
<div class="sticky-footer-content w-320-50">
<a href="https://inithtml.com/#mobile-fixed-top" target="_blank" rel="noopener"><img src="banners/320x50.jpg" alt="Mobile Fixed Top" width="320" height="50" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#mobile-fixed-top').remove();">X</span>
</div>
</div>

<div id="mobile-catfish" class="visible-xs visible-sm sticky-footer">
<div class="sticky-footer-content w-320-50">
<a href="https://inithtml.com/#mobile-catfish" target="_blank" rel="noopener"><img src="banners/320x50.jpg" alt="Mobile Catfish" width="320" height="50" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#mobile-catfish').remove();">X</span>
</div>
</div>

<div id="float-left" class="float-left visible-lg">
<a href="https://inithtml.com/#float-left" target="_blank" rel="noopener"><img src="banners/120x600.jpg" alt="Float Left" width="120" height="600" loading="lazy"></a>
<span class="x-float-left" onclick="$('#float-left').remove();">Đóng</span>
</div>

<div id="float-right" class="float-right visible-lg">
<a href="https://inithtml.com/#float-right" target="_blank" rel="noopener"><img src="banners/120x600.jpg" alt="Float Right" width="120" height="600" loading="lazy"></a>
<span class="x-float-right" onclick="$('#float-right').remove();">Đóng</span>
</div>

<div id="left-balloon" class="left-balloon visible-lg">
<a href="https://inithtml.com/#left-balloon" target="_blank" rel="noopener"><img src="banners/300x250.jpg" alt="Balloon Left" width="300" height="250" loading="lazy"></a>
<span class="x-left-balloon" onclick="$('#left-balloon').remove();">Đóng</span>
</div>

<div id="right-balloon" class="right-balloon visible-lg">
<a href="https://inithtml.com/#right-balloon" target="_blank" rel="noopener"><img src="banners/300x250.jpg" alt="Balloon Right" width="300" height="250" loading="lazy"></a>
<span class="x-right-balloon" onclick="$('#right-balloon').remove();">Đóng</span>
</div>

Kết luận

Việc tạo quảng cáo dính theo trang bằng HTML/CSS như trên hoàn toàn khả thi và dễ tuỳ biến. Tuy nhiên, nếu bạn đang dùng WordPress và muốn tối ưu thời gian, quản lý mọi thứ từ admin, thì Init Ad Engine là lựa chọn chuyên nghiệp hơn — phù hợp cả cho blog, báo điện tử, truyện tranh, và website nội dung cao.

Chúc bạn triển khai thành công!