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

01/10/2020 2 39 5 phút đọc

Một số vị trí quảng cáo không cố định thông dụng được làm sẵn để sử dụng nhanh chóng và tiện lợi hơn. Nếu bạn có nhu cầu gắn banner ảnh, bài viết này sẽ giúp bạn.

Mục lục

Một số vị trí quảng cáo thông dụng
CSS
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>