Init HTML

Lưu ý là các quảng cáo thường cố kích thước cố định, không hỗ trợ co dãn (responsive) nên việc hiển thị bạn cần tối ưu cho từng loại màn hình để giao diện trang web không bị phá vỡ bởi quảng cáo.

Medium rectangle (300 x 250)

Đây là kích thước quảng cáo phổ biến nhất, bạn có thể đặt nó tại Sidebar, trong bài viết, Balloon (dính ở góc màn hình)… Kích thước quảng cáo này hiển thị tốt ở mọi màn hình.

Balloon

Ví dụ một trang có Balloon.

Bấm vào hình để xem kích thước lớn hơn.

Ví dụ cách làm một Balloon đơn giản như hình. Đầu tiên là HTML.

<div id="ballon" class="ballon hidden-xs">
    <div class="ballon-content">
        <a href="https://www.inithtml.com/quan-tri-server/huong-dan-tao-vps-o-vultr/" target="_blank">
            <img src="https://www.inithtml.com/wp-content/uploads/2017/04/vultr_300x250.x53576.png" width="300" height="250" alt="Vultr">
        </a>
        <span class="x-button">Đóng</span>
    </div>
</div>

Với quảng cáo này, bạn không nên hiển thị ở màn hình có kích thước nhỏ vì nó sẽ che hết màn hình. Mình sử dụng class hidden-xs của Bootstrap để ẩn đi. Tiếp đến là CSS.

.ballon {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 999999;
    background: #000;
}
.ballon-content {
    position: relative;
    width: 100%;
}
.x-button {
    position: absolute;
    right: 0px !important;
    top: -27px !important;
    background: #7fc400;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
}
.x-button:hover {
    background: #8aac42;
}

Và jQuery để ẩn quảng cáo.

$('#balloon .x-button').click(function() {
    $('#balloon').remove();
});

Ngoài ra, còn có Large rectangle (336 x 280) tương tự nhưng chỉ có thể đặt vào nội dung bài viết.

Skyscraper (120 x 600) và Wide skyscraper (160 x 600)

Thường đặt ở Sidebar hoặc trượt theo 2 bên của trang web (Float Banner)…

Float Banner

Xem demo

Đây là ví dụ đơn giản nhất của Float Banner, quảng cáo sẽ nằm mặc định ở 2 bên của trang, trượt theo mọi lúc.

HTML

<div class="float-left visible-lg"><!-- Skyscraper (120 x 600) --></div>
<div class="float-right visible-lg"><!-- Skyscraper (120 x 600) --></div>

Quảng cáo này cũng chỉ nên hiển ở màn hình có kích thước lớn để tránh việc che nội dung, ta sử dụng class visible-lg.

CSS

.float-left, .float-right {
    position: fixed;
    top: 0;
}
.float-left {
    left: 0;
}
.float-right {
    right: 0;
}

Leaderboard (728 x 90) và Large leaderboard (970 x 90)

Thường đặt ở đầu trang, kế bên Logo… Quảng cáo này chỉ nên xuất hiện ở màn hình có kích thước lớn, vì vậy bạn nên dùng thêm 3 class hidden-xs, hidden-sm, hidden-md hoặc chỉ một class visible-lg.

Popunder và các quảng cáo chỉ có Script

Đối với các quảng cáo này, bạn cần có chút kiến thức về JavaScript để đặt chúng đúng theo ý muốn. Ví dụ đoạn mã quảng cáo của PopCash dưới đây, mình sẽ không cho chạy ở màn hình nhỏ (mobile) có kích thước nhỏ hơn 768px.

Đoạn mã mặc định

<script type="text/javascript">
var uid = 'x';
var wid = 'y';
</script>
<script type="text/javascript" src="//cdn.popcash.net/pop.js"></script>

Với x và y là ID của tài khoản.

Đoạn mã tùy chỉnh

<script type="text/javascript">
    var uid = 'x';
    var wid = 'y';
    var scr = document.createElement("script");
    scr.type = "text/javascript";
    scr.src = "//cdn.popcash.net/pop.js";
    if (screen && screen.width > 768) $('body').append(scr);
</script>

Dòng if (screen && screen.width > 768) nghĩa là điều kiện màn hình có kích thước lớn hơn 768px.

Một ví dụ khác (cùng mục đích).

<script type="text/javascript">
var uid = 'x';
var wid = 'y';
if (screen && screen.width > 768) document.write('<script type="text\/javascript" src="\/\/cdn.popcash.net\/pop.js"><\/script>');
</script>

Mình sẽ cập nhật thêm các định dạng và thủ thuật khác sau này. Chúc các bạn thành công!