---

dailyvideo

Tổng số lượt xem trang

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

Tạo banner quảng cáo dạng PopupỞ 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ọc và banner 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;C&#225;oV&#224;ng.Com - Tin n&#243;ng h&#224;ng ng&#224;y
               </div>
                <div id="co453569"> 
<!-- code ads -->
<a target="_blank" href="http://www.itechplus.info" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDxAtJmuDT3VGIxHZ_6ldcbUXxw99ESPGabq-h2w_k0YnzuTJ6kwMd4GnAP08DZCf98fBJdC8IrCvEoI_3LB2aNFKpjHh5Wb4y4HACmHE3v4clXH3Ma17iuUaJf-r6QXhoJMwVrNXagU/" height="115" title="iTechPlus.info | Kiến thức - 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 :
  • iTechPlus.info - Giải pháp CNTT : tiêu đề khung quảng cáo
  • http://www.itechplus.info : liên kết đến website nhà quảng cáo
  • https://…lap-dat-ADSL-fpt-telecom.gif : hình ảnh quảng cáo
3. Save and Done.
Chúc các bạn thành công !

0


Theo dõi: Blogspot | Facebook | Twitter | Google+

Đăng bởi Tin Lanh Mennonite on 03:31. Chuyên Mục . Chào mừng quí vị đã đến với Blog's của David Nguyễn. Nếu thấy nội dung blog's có ích cho quí vị xin vui lòng chia sẻ nó cho những người khác. Xin chân thành cảm ơn! Davidnguyen. Mọi thắc mắc, góp ý xây dựng xin liên hệ! tại đây.

0 nhận xét for Tạo banner quảng cáo dạng Popup

Đăng một nhận xét

BÀI MỚI

NHẬN XÉT MỚI

MEDIA

TIN TỨC

...

LÊN ĐẦU TRANG