Tạo banner quảng cáo chạy dọc 2 bên website bằng HTML

Khi lướt web chúng ta thường xuyên gặp các quảng cáo , ads với hình ảnh dọc 2 bên website. Nhưng có nhiều bạn thắc mắc tại sao để làm được như vậy , Và hôm nay iChiaSe Blog's xẽ  chia sẻ đoạn code tạo banner quảng cáo banner chạy dọc 2 bên website( dành cho những bạn sử dụng Blogspot, hoặc không muốn dùng plugin trong WordPress).Đây là đoạn mã được mình áp dụng cho khách hàng của mình, lúc đầu mình cũng sử dụng một plugin trong WordPress đó là Float Left Right Advertising( Xem hưỡng dẫn cài đặt và thiết lập Float Left Right Advertising) nhưng mình nhận thấy Plugin này sử dụng JS nên cũng khá là nặng, m muốn tối ưu độ tải trang hơn nữa, nói chung được cái nào hay cái đó và mình chọn cách sử dụng CSS/ HTML thuần.

Ảnh minh họa quảng cáo chạy dọc 2 bên website bằng HTML

Ảnh minh họa

<div id='ads-left'>
<div style='margin:0 0 5px 0; padding:0;width:200px;position:fixed; left:0; top:0;'>
<a href='http://www.ichiase.biz/' target='_blank'><img border='0' height='665' src='http://imgur.com/gIM9she.jpg' width='200'/></a>
</div></div>
<div id='ads-right'>
<div style='margin:0 0 5px 0; padding:0;width:200px;position:fixed; right:0; top:0;'>
<a href='http://www.ichiase.biz/' target='_blank'><img border='0' height='665' src='http://imgur.com/gIM9she.jpg' width='200'/></a>
</div></div>

Trong đoạn code trên id=ads-left là phần hiển thị quảng cáo bên trái website, còn id=ads-right là hiển thị bên phải, bạn chỉ cần chỉnh sửa các giá trị width, right, left, top và link ảnh để phù hợp website của bạn nhé.

Đó là cách đơn giản nhất mình đang sử dụng, điều này làm cho website của bạn nhanh hơn, góp phần tối ưu hóa website của bạn, nhưng đòi hỏi bạn cũng cần phải biết một chút code.

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

Nguồn : iChiaSe.Biz

Tag : HTML & CSS