Tạo quảng cáo dạng nổi, có nút đóng, thiết kế responsive ở chân trang cho Blogger/Blogspot

Make Floating Ads with Close Button Responsive Design in Blog Footer for Blogger / Blogspot

Bạn đã bao giờ nhìn thấy một banner quảng cáo lơ lửng dưới trang web? Bây giờ chúng ta sẽ tạo ra các quảng cáo dạng nổi trong chân trang của blog nhé. Khi mở blog, banner quảng cáo sẽ ngay lập tức xuất hiện trong chân trang của blog và tiếp tục hiện khi bạn kéo thanh scrollbar lên xuống. Có một nút đóng để tắt cho những người không thích quảng cáo.

• DEMO

Tạo quảng cáo dạng nổi có nút đóng thiết kế responsive ở chân trang cho Blogger/Blogspot

Rất đơn giản bạn chỉ cần vào Bố cục >> thêm tiện ích HTML/JavaScript và thêm vào dòng code bên dưới.

 <!-- ADS FOOTER  BY IRIS-TIPS.BLOGSPOT.COM-->
<script type='text/javascript'>
$(document).ready(function() {
$('img#closedb').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 80%;
opacity: 0.9;
left: 10%;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 17%; z-index: 9999;'>
<div style='text-align: right; width: 100%; height:5px;'>
<img id='closedb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44XhLkP9Lwt76wr89JTWUTzM8OmBGXC9-SzITTRYvZQbXlehIaIIpO1yFvw_MpprZGvmiC8f2a-v4QxptUNGgqglpHx3bg_gz640W0n7oLpD9ihiN2mhOdADPaDarlKhDbhIIWCxe1gQ/s1600/exit.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
<!-- ADVERTISING CODE -->


ADVERTISING CODE HERE


<!-- ADVERTISING CODE -->
</center></p>
</p>
</div>
<!-- ADS FOOTER  BY IRIS-TIPS.BLOGSPOT.COM-->

Điều chỉnh width: 80%; left: 10%; opacity: 0.9; (độ trong suốt của banner, chọn 1 nếu không muốn trong suốt); height: 17%; cho phù hợp với website của bạn.

Google adsense responsive code bạn có thể tham khảo ở bài viết này: Tạo banner quảng cáo Google Adsense dạng responsive cho Blogger/Blogspot

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