Tham khảo thêm:
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.
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://www.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://www.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://www.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://www.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://www.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://www.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://www.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!