Tạo quảng cáo dạng nổi ở cạnh trái và cạnh phải, có nút đóng, thiết kế responsive cho Blogger/Blogspot

Create an Ad Floated Left and Right with a Close Button, Responsive Design for Blogger / Blogspot

Đây là một dạng biến thể của code ở bài viết: Tạo quảng cáo dạng nổi có nút đóng thiết kế responsive ở chân trang cho Blogger/Blogspot.

• DEMO

Tạo quảng cáo dạng nổi ở cạnh trái và cạnh phải, có nút đóng, thiết kế responsive cho Blogger/Blogspot

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.

1. Banner bên cạnh trái

<!-- ADS LEFT BY IRIS-TIPS.BLOGSPOT.COM-->
<script type='text/javascript'>
$(document).ready(function() {
$('img#closedl').click(function(){
$('#left_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#left_banner {
left: 0;
position: fixed;
height: 100%;
opacity: 0.9;
top: 0;

}
div#left_banner img{
border:0;
cursor:pointer;

}

@media screen and (max-width:1300px){
#left_banner{display:none}

</style>
<div style='height: 0px;'></div>
<div align='center' id='left_banner' style='width: 10%; z-index: 9999;'>
<div style='text-align: right; width: 100%; height:5px;'>
<img id='closedl' 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 LEFT BY IRIS-TIPS.BLOGSPOT.COM--> 

2. Banner bên cạnh phải

 <!-- ADS RIGHT BY IRIS-TIPS.BLOGSPOT.COM -->
<script type='text/javascript'>
$(document).ready(function() {
$('img#closedr').click(function(){
$('#right_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#right_banner {
right: 0;
position: fixed;
height: 100%;
opacity: 0.9;
top: 0;

}
div#right_banner img{
border:0;
cursor:pointer;

}

@media screen and (max-width:1300px){
#right_banner{display:none}

</style>
<div style='height: 0px;'></div>
<div align='center' id='right_banner' style='width: 10%; z-index: 9999;'>
<div style='text-align: left; width: 100%; height:5px;'>
<img id='closedr' 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 RIGHT BY IRIS-TIPS.BLOGSPOT.COM --> 

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

Ngoài ra bạn cần lưu ý thêm thuộc tính max-width:1300px tức là quảng cáo sẽ tự ẩn nếu chiều rộng màn hình nhỏ hơn 1300px, bạn có thể điều chỉnh lại cho phù hơp với blog. Nếu bạn không muốn quảng cáo tự ẩn thì xóa dòng code sau:

Đối với banner cạnh trái

 @media screen and (max-width:1300px){
#left_banner{display:none} 

Và banner cạnh phải

 @media screen and (max-width:1300px){
#right_banner{display:none} 

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