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

1 nhận xét
các bài viết trước, iTechPlus đã giới thiệu đến các bạn 2 thủ thuật tạo banner quảng cáo trượt dọcbanner quảng cáo hiển thị ngẫu nhiên cho Blogspot.
Tiếp tục chủ đề trên, hôm nay iTechPlus 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.
Tạo banner quảng cáo dạng Popup
Hì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(http://img98.imageshack.us/img98/9400/rightp.gif) no-repeat right top;}
            #cob263512{background:url(http://img205.imageshack.us/img205/2176/fulld.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(http://img205.imageshack.us/img205/9837/closebutton.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;Xem Phim Blog Trần Phúc Minh
                   </div>
                    <div id="co453569">
     <!-- code ads -->
<a target="_blank" href="http://www.youtube.com/p/19504296AFE44F36?hl=vi_VN&amp;fs=1" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="http://img.aicoly.com/debate/2010/11/13/2551289615538.jpg" height="115" title="Blog thông tin tỏng hợp | Trần Phúc Minh Phòng Nông nghiệp & PTNT"/></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 :
  • Xem phim Blog Trần Phúc Minh : tiêu đề khung quảng cáo
  • http://www.youtube.com/p/19504296AFE44F36?hl=vi_VN&amp;fs=1 : liên kết đến website nhà quảng cáo
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwZtjCZLjZwtgCDlRsSH3UKxDoacglNb_mwPX4FXPRJCcPBvfxZd_0GqgkDMPR2Xy8gaBVljudWZmn0AYlaKtwd9PP-TxdlJUy37FTlMXUddUnE5Bdh4fXIzkS7WcwC1xw3jNg1EOmTE/s1600/bannerfans_419401.jpg : hình ảnh quảng cáo
3. Save and Done.
Chúc các bạn thành công !

One Response so far.

  1. SoftPC says:

    Thủ thuật rất tuyệt.Cám ơn bạn :3)

Leave a Reply

 
Cả nhà thương nhau © 2011 DheTemplate.com & Main Blogger. Supported by Makeityourring Diamond Engagement Rings

You can add link or short description here