Init HTML

Tham khảo thêm:

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

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

Các loại banner này đều trượt theo trang web, vị trí cố định khá đơn giản nên mình không trình bày ở đây. Mình chia các quảng cáo thành 2 loại. PC, thiết bị có màn hình lớn:

• Float Left + Right: 2 banner có kích thước 120×600 ở hai bên của trang web
• Balloon Left + Right: 2 banner có kích thước 300×250 ở hai bên của trang web
• PC Catfish: banner ở dưới chân trang

Mobile, thiết bị có màn hình nhỏ:

• Mobile Catfish: banner trượt theo ở chân trang
• Mobile Fixed Top: banner trượt theo ở đầu trang

Lưu ý: Một số tên các vị trí là do mình đặt.

Xem demo Tải về

CSS

Dưới đây là CSS mình làm sẵn, có thể đổi màu của các nút ở :root.

: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

Các vị trí đều được đặt tên ở id, các bạn thay banner vào vị trí theo nhu cầu nhé.

<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>

Chúc các bạn thành công!