Code quảng cáo Popup cho Blogspot ở góc màn hình

Sau đây Cuộc sống muôn màu xin hướng dẫn cách chèn khung quảng cáo popup hay thông báo luôn dưới góc phải (trái) màn hình dành cho Blogger/ Blogspot. Khung quảng cáo sẽ trượt lên và mở của sổ quảng cáo nhỏ dưới góc màn hình khi load trang và có thể ẩn hiển tùy ý.

Quảng cáo dưới góc màn hình cho blogspot

Live Demo

Cách chèn khung quảng cáo dưới góc màn hình cho Blogger/ Blogspot

Tạo một widget mới để chèn code quảng cáo popup

Rất đơn giản, các bạn chỉ cần vào công cụ quản trị Blogger, "Bố cục", thêm Widget (Tiện ích) mới, chọn tiện ích HTML/Javascript.

- Để trống tiêu đề Widget.
- Copy toàn bộ đoạn code dưới đây cho vào phần nội dung của Widget:

<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: Bán cho thuê căn hộ cao cấp Thảo Điền Pearl
 </div>    
 <div id="co453569">
<!-- code ads -->    
<a target="_blank" href="http://www.canhothuehcm.com/2013/10/ban-cho-thue-can-ho-cao-cap-thao-dien-pearl.html"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://lh6.googleusercontent.com/-Uoi9AAnO-hM/UmNLSWBlAOI/AAAAAAAACY8/4EinHfijRt0/w264-h115-no/1.jpg" height="115" title="Dự án mới | Căn hộ cao cấp Thảo Điền Pearl"></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>

- Tìm trong đoạn code các dòng mình đã hightlight đỏ và thay lại cho phù hợp với blog của bạn.

Have fun :)

Share on Google Plus

Tác giả: Đặng Việt Hoàng

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.