Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn cách tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình dành cho Blogspot. Khi người dùng/khách hàng truy cập vào trang Website/Blogspot của bạn thì popup quảng cáo sẽ tự động trượt lên và mở 1 cửa sổ quảng cáo nhỏ gọn ở phía dưới góc phải màn hình và có thể ẩn hiện tùy ý, rất thiện cảm với người dùng.






Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình


Cũng đơn giản thôi. Ko có gì phức tạp cả :D

Để tạo popup quảng cáo góc dưới màn hình cho Blogspot các bạn chỉ cần thực hiện theo các bước sau:
  1. Bước 1: Truy cập vào trang Blogger.com 
  2. Bước 2: Đăng nhập vào Blogger bằng tài khoản Gmail của bạn
  3. Bước 3: Ở phần quản trị Blog: chọn Blog cần tạo popup quảng cáo 
  4. Bước 4: Vào phần Bố cục --> Chọn Thêm tiện ích --> Chọn HTML/Javascript.
  5. Bước 5: Copy đoạn code phía dưới và Paste vào phần nội dung của HTML/Javascript (Phần tiêu đề các bạn để trống)
<style type="text/css">
* html div#fl813691 {position: absolute; overflow:hidden;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}
#fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }
#eb951855{ width:279px; padding-right:7px; background:url(https://lh4.googleusercontent.com/-ZCel684tsGA/Uo8tAONTcZI/AAAAAAAACkg/DaELN1N7HKY/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}
#cob263512{background:url(https://lh4.googleusercontent.com/-vNLa5Sfsz84/Uo8tAL6LAkI/AAAAAAAACkk/CuyKlQfH4Jo/w501-h150-no/cuocsongmuonmau.info_bg.gif) no-repeat left top; height:150px; padding-left:7px;}
#coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}
#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://lh6.googleusercontent.com/-hUB6FHSCOcg/Uo8uqebMB5I/AAAAAAAAClA/t3_oubc1PaE/w90-h30-no/cuocsongmuonmau.info_button.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; margin:0; padding:0; height:123px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
</style>
<div id="fl813691" style="height: 152px;">
<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>
&nbsp;Hot: Hướng dẫn Blogspot Chi tiết
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="
https://huongdanblogspotchitiet.blogspot.com"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="Link-hình-ảnh-quảng-cáo" height="115" title="Hướng dẫn chi tiết | Từ cơ bản đến nâng cao"></a>
<!-- code ads -->

</div>
</div></div></div>
<script>
pf204652bottomLayer = document.getElementById('fl813691');
var pf204652IntervalId = 0;
var pf204652maxHeight = 150;//Chieu cao khung quang cao
var pf204652minHeight = 20;
var pf204652curHeight = 0;
function pf204652show( ){
pf204652curHeight += 2;
if (pf204652curHeight > pf204652maxHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
function pf204652hide( ){
pf204652curHeight -= 3;
if (pf204652curHeight < pf204652minHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
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';
}
</script>

Các bạn thay 2 dòng màu đỏ và 2 dòng màu xanh cho phù hợp với Blogspot/Website của các bạn nhé.

Chúc các bạn thành công!
Chỉnh sửa ảnh Photoshop: https://goo.gl/fdq9Ls
Share on Google Plus

About Sơn Nguyễn

Kênh Youtube cũ của mình đã bị khóa nên các video trên web này ko hiển thị được, mong các bạn thông cảm! Hiện mình đang ạo kênh mới và up lại video sau nhé!Thanks!
Sơn Nguyễn Trường