Tạo Quảng Cáo Kiểu Pop-up

Quảng cáo kiểu Pop-up

Kiểu Quảng cáo này là một ô nhỏ sẽ xuất hiện ở góc trái / phải màn hình sau khi tải trang. Quảng cáo này cũng khá thu hút mà không làm vướng mắt người dùng, vì nó chỉ là một box nhỏ pop-up ở cuối góc blog thôi.

quang cao pop up

Cách tạo quảng cáo pop-up trong blogspot

Với bộ code này việc tạo Quảng cáo kiểu Pop-Up này khá đơn giản mà không phải vọc vạch sâu vào trong HTML. 
Đơn giản như sau:
Login > Blogger 
Vào mục >Layout > Chọn thêm 1 widget mới HTML
Copy dòng code dưới đây và paste vào widget vừa tạo

Code:

<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:162px; }    
 #eb951855{ width:220px; padding-right:7px; background:url(#) no-repeat right top;}    
 #cob263512{background:url(#) no-repeat left top; height:162px; padding-left:7px;}    
 #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:220px;}    
 #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(#); 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: 162px;">    
 <div id="eb951855">    
 <div id="cob263512">    
 <div id="coh963846">    
 <ul id="coc67178">    
  <li id="pf204652hide"><a class="min"  href="javascript:pf204652clickhide();" title="&#7848;n  &#273;i">&#7848;n</a></li>    
  <li id="pf204652show" style="display: none;"><a class="max"  href="javascript:pf204652clickshow();" title="Hi&#7879;n  l&#7841;i">Xem </a></li>
 </ul>    
 &nbsp;TIÊU ĐỀ QUẢNG CÁO
 </div>    
 <div id="co453569">
<!-- code ads -->    
<a target="_blank" href="LINK TỚI TRANG ADS" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="220" src="LINK HÌNH ẢNH QC" height="158" title="TIÊU ĐỀ QC"/></a>    
<!-- code ads -->    
</div>    
 </div></div></div>    
 <script>    
 pf204652bottomLayer = document.getElementById('fl813691');    
 var pf204652IntervalId = 0;    
 var pf204652maxHeight = 162;//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>

Chú ý:

  • Kích cỡ hiện tại của QC là khá phù hợp, có thể thay đổi. Nên test và điều chỉnh
  • Thay các dòng chữ tô màu xanh thành nguồn của Bạn.
  • Các màu sắc trang trí pop-up có thể điều chỉnh cho phù hợp với site của B.
Share on Google Plus

About Thế Này Nhé

Thế này nhé blog tuyển tập những thứ linh ta linh tinh do hội chứng hứng thì viết thoai ^^ 

Mình là mình rất thích được gạ gẫm đi cafe cafao nhé. Bàn chiện gì kiếm ra tiền thì càng hay. Ko thì ta chém chiện Gu cafe, chiện đây đó, chiện "trính chị" thì cũng thú vị ^^

0 comments:

Blogger Template Blogger Theme Created by Blogger Tips

Đăng nhận xét

Thanks for your message !