Tạo banner quảng cáo dạng Popup ẩn hiện cho blog

Đăng bởi Admin | 25/6/13 | 1 nhận xét

Hôm nay Namkna sẽ giới thiệu  tới các bạn cách tạo banner quảng cáo hiển thị dạng popup ở góc màn hình. Với mẫu này độc giả có thể bấm nút để ẩn hiện popup theo ý của độc giả, nghĩa là khi độc giả truy cập vào trang của bạn thì popup này sẽ hiện ra (show) và người dùng có thể bấm vào nút ẩn để ẩn nó đi nếu họ không thích.

Các bạn có thể xem ảnh minh họa hoặc xem demo bên dưới góc màn hình khi xem bài viết này:

VIEW DEMO

Ảnh minh họa:

»  Cách tạo banner quảng cáo dạng Popup ẩn hiện góc màn hình cho blogger :

1. Vào bố cục (layout)

2. Chọn Thêm tiện ích => Tạo một widget HTML\JavaScripts và chèn code bên dưới vào đó:

<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/AVvXsEhYpt7sbtepTRhXqv3-0Pi49bMxWpEejxhXmXcbKAw-kVTM8RIBx3PirSQpCsaEvKi3chO_Cqg0evAvST8ON2DVYaLqQut82sNrbadGEeaJHlRulH3MgdYeISlf6yJ-1iauIDoL1PnyhkU/s1600/rightp-namkna.gif) no-repeat right top;}      
 #cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRBRZTbyWrd9wIf5V_MAfnLuWaLBADrqanJFgrfGaoR8lfAxYLdbwqmqLKtBywHdVt8loLPKzpu2891vzm3xQkUYuS7lU1UbSAl7Ig1-zUwSEHyY2g8b4PSHaPVCBnhtG4zHHC4rArR8/s1600/fulld-namkna-ngoctra.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/AVvXsEj4_-auvn-t_cAFkOyaa9e_ystihng5XhjRpw6eboqipGPwITLKg-QSUQ__mCm4-Ez7-KHteHDUqinhtkbUYrmhvttDEPnfdiwPHy97hxHfxWW02dXYCPC3j-67t5_0-SolhqC0_MO3ElQ/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; 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="&#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;Namkna.blogspot-Thủ thuật Blog
 </div>       
 <div id="co453569"> 
<!-- code ads -->       
<a target="_blank" href="http://namkna.blogspot.com/" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLDTuouVSf5YOWQHuAV47-PdU0_9o6svaURJc1EWOJ97NupjyMPxPGMYh7-vc25FwGveWbu9G9a7hhz_uw8HM5dxQKBPXmNh52d0gUMl2Ktgcxeu7mkZGCzdQMwzMRBj0K1HvWat0tN8/s1600/banner-namkna-blogspot-com.png" height="115" title="Namkna | Kiến thức - Giải Trí - Thủ thuật - Giải pháp công nghệ"/></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ùy chỉnh code :

• Namkna.blogspot-Thủ thuật Blog : tiêu đề khung quảng cáo
• http://namkna.blogspot.com/ : liên kết đến website nhà quảng cáo
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLDTuouVSf5YOWQHuAV47-PdU0_9o6svaURJc1EWOJ97NupjyMPxPGMYh7-vc25FwGveWbu9G9a7hhz_uw8HM5dxQKBPXmNh52d0gUMl2Ktgcxeu7mkZGCzdQMwzMRBj0K1HvWat0tN8/s1600/banner-namkna-blogspot-com.png : hình ảnh quảng cáo
• Để khung popup hiện bên trái thì bạn thay chữ ringht:0 thành left:0

3. Lưu lại là xong.

»  Xem thêm:

Tạo Banner quảng cáo hiển thị ngẫu nhiên

Tạo banner quảng cáo dạng Popup

Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên

Tùy chọn vị trí quảng cáo cho banner 468x60 pixels

TẠO 4 BANNER QUẢNG CÁO 125X125 TRONG MỘT TIỆN ÍCH HTML/JAVACRIPT

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

                                                                                                   Theo: Namkna

                                                                                                   Thu thuat vi tinh