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

Hướng dẫn tạo Popup cho Blogspot

Quảng cáo cho khách vào website, kích thước nhỏ gọn ở góc dưới màn hình

Hôm nay Nguyễn Trường Sơ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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfd9zH_vtfzYQXVZU0a2-xN8fCWLkpxlWtzs-viIQ6k-zXWxUSQAaplNJZGt3HqgVC2NTh1rYbRsoaeCA4aqK99RyF4yzFWZuaguiAjMNintJrE9yNECgPV2Tm9X6iNj9b6Dxn5qoMmbiC/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}
#cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0n-leRiSp_3j1v5T4IHdkjzoizNAeQ0f6pL92Cmt99O5qMnAaIzzu7oB2O3ZEep1SamYJw6IeuqdjO0XhnYSWJZidYByeG2CoQGenrbxk244rPtgNmMCVh2kVGr3JRNRH_k4WEBhuwl15/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEF_wx3qaDsT1x6VZAbFOXPI0E_63oClp1njcH1EriRqYisBx50dpREf_VZUxvi5I4WNpxgnU0umoTs_VtOc3L9TE04x1EH4bGwW8pEkBN22BW0OVqitgjbwV0kzbhRoOMdEjkmAn_fbBU/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é.

Như vậy là Nguyễn Trường Sơn đã hướng dẫn xong cách tạo Popup cho Blogspot rồi nhé. Hi vọng nó có ích với bạn

Nếu bạn có câu hỏi nào thì hãy comment xuống phía dưới nhé

Chúc các bạn thành công!