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

Ở các bài viết trước, Namkna  đã giới thiệu đến các bạn thủ thuật tạo là tạo 4 banner quảng cáo trong 1 widget cho Blogspot.

Tiếp tục chủ đề trên, hôm nay Namkna xin giới thiệu tiếp một style khác, đó là tạo banner quảng cáo hiển thị dạng popup – nghĩa là mẫu quảng cáo sẽ bật lên khi người đọc ghé thăm website của bạn.

     

Demo for Post
 

Ảnh minh họa

Cách thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScripts và chèn vào code bên dưới :

<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/AVvXsEgtDtDiwOKD_jkKBr6zsmwKmeJahtr1H9xaNpNpu_4DggZWrlmbPP1ABbS9Ol8kTvpdI98g6_FPETNiC38VhhRYSIxGHWIYrmlqa_iJO7C23UljpdoIt_uIaARpFWPg77VdHMhpeA17-lM/s1600/rightp-namkna.gif) no-repeat right top;}      
        #cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JwqQJWLHvpN7O7T_LtD1urAJ8fwYevyiao9ERYydpAbV9S9c03uGC-HMvQtE9zeWZaWMPhQS5ufBn7i9ENQb5AcR39RCSVBMLO9VX-ELfhlKINIJilj-ZU_Femj6bkkIfU40zdsolvQ/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/AVvXsEhqr1cKdprwg21BROpa6fjvHZFoxRbInu7yYqo3OSgatFY2dd-OfgofwtXP0FFHVnxA9Bpcr9c6p0L0zvoKk8E7px7sF2TkJ5GfRjJNBWhWjeJlkgiLt8kSofu0xCggn3EGY0g9vA0quyA/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/AVvXsEiIZGmULktwYscHDSvM0_bSmZ-SQoJNs-_d3wV3JQJM_QRTbdadEp9rLwqnT2_9GbD1aonYleWJL1X-Du-jlJnMdn7CUkV7SZX9wEScuWau1Sdq8ik4QMuNVZ-c6Heevo-TxEIMth2CW0g/" 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>

Trong đoạn code trên :

• 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/AVvXsEiIZGmULktwYscHDSvM0_bSmZ-SQoJNs-_d3wV3JQJM_QRTbdadEp9rLwqnT2_9GbD1aonYleWJL1X-Du-jlJnMdn7CUkV7SZX9wEScuWau1Sdq8ik4QMuNVZ-c6Heevo-TxEIMth2CW0g/ : hình ảnh quảng cáo 
• Bổ xung: <17/10/2011>: Để thủ thuật hiện bên trái thì bạn thay chữ ringht:0 thành left:0

3. Save and Done.

Xem thêm:

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

• Ẩn

 Namkna.blogspot-Thủ thuật Blog

Chủ đề:
Blogspot Advertising, Blogspot-tips