Hướng dẫn thêm quảng cáo cố định dưới góc màn hình giống Google Adsense

Chắc hẳn ít nhiều các bạn đã và đang kiếm tiền bằng cách hiển thị quảng cáo trên Blog của mình đều đã biết đến một mạng quảng cáo uy tín và chất lượng đó là Google Adsense. Ở Google Adsense thì chắc chắn các bạn đều biết đến quảng cáo tự động.

Quảng cáo tự động giúp bạn kiếm tiền từ nội dung của mình một cách đơn giản và sáng tạo. Với Quảng cáo tự động, bạn chỉ cần đặt một đoạn mã trên tất cả các trang trong trang web của mình. Sau đó, Quảng cáo tự động sẽ quét trang web và tự động đặt quảng cáo ở những nơi quảng cáo có khả năng hoạt động hiệu quả và có tiềm năng tăng doanh thu.

Về lợi ích của quảng cáo tự động thì có rất nhiều như: có thể giúp bạn tăng doanh thu, dễ sử dụng, cho phép điều chỉnh quảng cáo để phù hợp với trang web và thân thiện với thiết bị di động. Nhắc đến thân thiện với thiết bị di động thì có một loại quảng cáo rất phổ biến đó là quảng cáo cố định ở dưới góc màn hình.

Hướng dẫn thêm quảng cáo cố định ở dưới góc màn hình giống Google Adsense cho Blog

Bước 1: Vào chỉnh sửa HTML của Chủ đề và chèn đoạn code CSS dưới đây vào trước thẻ </head>

<style>/* <![CDATA[ */
.stickyads-bottom{position:fixed;bottom:0;left:0;right:0;min-height:70px;max-height:200px;padding:5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);transition:all .1s ease;display:flex;align-items:center;justify-content:center;background:#fffdfc;z-index:100;border-top:1px solid #e6e6e6}
.stickyads-close{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #e6e6e6;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background:inherit;cursor:pointer}
.stickyads-close::after{content:'✕';line-height:18px;font-size:14px}
.stickyads-content{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickyads-input:checked ~ .stickyads-bottom{padding:0;min-height:0}
.stickyads-input:checked ~ .stickyads-bottom .stickyads-content{display:none}
.hidden{display:none}
.stickyads-ncontent{min-height:70px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#989b9f ;border:1px solid #e6e6e6 ;border-radius:3px} 
.stickyads-ncontent::before{content:attr(data-text)}
/* ]]> */</style>

Bước 2: Tiếp tục tiềm đến thẻ </body> và chèn đoạn code HTML dưới đây vào phía trước thẻ </body>

<b:if cond='data:blog.isMobileRequest'>
<input class='stickyads-input hidden' id='stickyadsInput' type='checkbox'/>
<div class='stickyads-bottom'>
  <label aria-label='Close Menu' class='stickyads-close' for='stickyadsInput'/>
  <div class='stickyads-content'>
	<div class='stickyads-ncontent' data-text='Quảng cáo ở đây'/>
  </div>
</div>
</b:if>

Bước 3: Thay quảng cáo của bạn với thẻ <div class='stickyads-ncontent' data-text='Quảng cáo ở đây'/> trong đoạn code HTML vừa chèn.

Bấm lưu và kiểm tra hiển thị.

Lời kết

Code trên sử dụng hoàn toàn là HTML và CSS không sự dụng đến JavaScript hay JQuery nên không ảnh hước đến tốc độ tải trang mà có thì là do quảng cáo của các bạn. Nếu có vấn đề gì hãy code lỗi các bạn có thể comment ở dưới mình sẽ phản hồi và hỗ trợ.