Giải pháp hiệu quả tăng Traffic cho website
Traffic Exchange Site

Tự quảng cáo popup ẩn hiện ở góc màn hình

By

Trong bài viết này mình chia sẻ lại một kiểu popup được các admin web sử dụng khá nhiều là quảng cáo popup ẩn hiện ở góc màn hình bên trái hoặc bên phải website, có khá nhiều bài chia sẻ về code này, ở đây mình chỉ chia sẻ lại cho các bạn mới bước chân vào tìm hiểu blogspot tham khảo và sử dụng.
Demo:

Demo popup quảng cáo ẩn hiện ở góc màn hình
Cách làm:
Đăng nhập vào trang quản trị blogspot
Bạn chèn đoạn code popup sau vào Mẫu
Đăng nhập => Mẫu => Chỉnh sửa HTML => tìm thẻ </body> và chèn đoạn code:
Code:
<style type="text/css">#fl813691{position:fixed;z-index:9999;right:0;border-radius:4px 4px 0 0;bottom:0;padding:2px;background:#4e4d4d}
#eb951855{width:300px;position:relative} //Chiều rộng quảng cáo
#coh963846{color:#690;display:block;height:20px;line-height:20px;font-size:11px;width:100%}
#coh963846 a{color:#690;text-decoration:none}
#coc67178{float:right;padding:0;margin:0;list-style:none;overflow:hidden;height:15px}
#coc67178 li{display:inline}
#coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYv_tlkNYPmNIqPRG6eAjssDirSLDZDDpN8VimQrDwifFNNybu0yy0WQDL1XO2dDcHt7S9axLLYduQ4GotVMtCzsVUCsdaNDmonpsEVDdnP4FPKYEwch7FMp6fxb_GE2aDZhXhmPujjqg/s1600/closebutton-namkna.gif);background-repeat:no-repeat;width:30px;height:0;padding-top:15px;overflow:hidden;float:left}
#coc67178 li a.close{background-position:0 0}
#coc67178 li a.close:hover{background-position:0 -15px}
#coc67178 li a.min{background-position:-30px 0}
#coc67178 li a.min:hover{background-position:-30px -15px}
#coc67178 li a.max{background-position:-60px 0}
#coc67178 li a.max:hover{background-position:-60px -15px}
#co453569{display:block;width:100%;height:100%;position:absolute;z-index:9999}
</style>
<div id="fl813691">
<div id="eb951855">
<div id="cob263512">
<div id="coh963846">
<ul id="coc67178">
<li id="pf204652hide">
<a class="min" href="javascript:pf204652clickhide();" title="Ẩn  đi">Ẩn</a></li>
<li id="pf204652show" style="display: none;">
<a class="max" href="javascript:pf204652clickshow();" title="Hiện  lại">Xem </a></li>
</ul>
</div>
<div id="co453569">
<!-- code ads -->
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg"/>
<!-- code ads -->
<script>     
//<![CDATA[
pf204652bottomLayer = document.getElementById('fl813691');    
var pf204652IntervalId = 0;    
var pf204652maxHeight = 250;//Chieu cao khung quang cao     
var pf204652minHeight = 20;    
var pf204652curHeight = 0;    
function pf204652show(){pf204652curHeight+=2,pf204652curHeight>pf204652maxHeight&&clearInterval(pf204652IntervalId),pf204652bottomLayer.style.height=pf204652curHeight+"px"}function pf204652hide(){pf204652curHeight-=3,pf204652curHeight<pf204652minHeight&&clearInterval(pf204652IntervalId),pf204652bottomLayer.style.height=pf204652curHeight+"px"}function pf204652clickhide(){document.getElementById("pf204652hide").style.display="none",document.getElementById("pf204652show").style.display="inline",pf204652IntervalId=setInterval("pf204652hide()",5)}function pf204652clickshow(){document.getElementById("pf204652hide").style.display="inline",document.getElementById("pf204652show").style.display="none",pf204652IntervalId=setInterval("pf204652show()",5)}function pf204652clickclose(){document.body.style.marginBottom="0px",pf204652bottomLayer.style.display="none"}pf204652IntervalId=setInterval("pf204652show()",5);
//]]> 
</script>
</div>
</div>
</div>
</div>

Bạn cũng có thể chèn đoạn code trên vào phần Bố cục Blog
Đăng nhập => Bố cục => Tạo tiện ích HTML/Javacript => Paste đoạn code trên.
Lưu ý:
Bạn thay đoạn code quảng cáo demo màu đỏ thành quảng cáo bạn muốn hiển thị, ví dụ như 1 ảnh quảng cáo, 1 video quảng cáo, hoặc 1 đoạn flash.
Bạn cũng có thể tùy chỉnh chiều cao và kích thước quảng cáo theo chú thích code tôi đã chú thích.
Chúc bạn thành công.

Đôi khi mình sao chép code có thể bị lỗi chưa chuẩn, các bạn có thể copy chuẩn xác hơn tại : Tạo popup quảng cáo ẩn hiện ở góc màn hình



Loading...