Tạo quảng cáo sticky ở chân trang website giống AdSense Page-Level Ads

How to create an AdSense Page-Level Ads manually?

Google Adsense có rất nhiều hình thức quảng cáo khác nhau trong đó có Quảng cáo cấp trang (Page-Level Ads) là nhóm định dạng quảng cáo khá phù hợp cho các thiết bị di động có màn hình bé. Nếu bạn đã có 1 tài khoản Adsense thì rất đơn giản bạn chỉ việc vào cài đặt và kích hoạt tùy chọn này.

Còn đối với những ai chưa có "Gà" mà cũng muốn làm banner quảng cáo dạng này thì hãy xem bài viết hướng dẫn dưới đây của Iris Tips để tạo quảng cáo sticky ở chân trang website có kèm theo nút thu gọn giống như Quảng cáo cấp trang (Page-Level Ads) nhé.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.sticky_bottom{position:fixed;bottom:0;width:100%;max-width:1024px;z-index:999;background:#f2f2f2;padding:10px 5px 5px;text-align:center;box-sizing:border-box}
.button_sticky_bottom{position:absolute;width:40px;height:30px;background:#f2f2f2;top:-20px;padding:10px;border-radius:100%;z-index:888;left:50%;margin-left:-15px;text-align:center}
.ads_sticky_bottom{position:relative;z-index:999}

2Tìm đến thẻ </body> và dán đoạn code bên dưới vào trước thẻ đó

<div class="sticky_bottom">
<a href="javascript:;" class="button_sticky_bottom"><i class="fa fa-angle-down"></i> </a>
<div class="ads_sticky_bottom" style="display: block;">
//Đặt code quảng cáo của bạn tại đây    


</div>
</div>
<script type="text/javascript">
    $('.button_sticky_bottom').click(function(){
        $(".ads_sticky_bottom").slideToggle();
    })
</script>

3Vậy là xong rồi đấy, rất đơn giản phải không nào, việc cuối cùng là bạn hãy dán mã code quảng cáo của bạn vào đoạn HTML bên trên thôi. Kết quả sẽ hiện ra như hình bên dưới. Ngoài ra website của bạn cần sử dụng thêm Font-awesome để hiển thị mũi tên nhấp xuống nhé.

Xem thêm: Cách thêm và hướng dẫn sử dụng Font-awesome cho website

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm