netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.

Tuesday, 12 January 2021

Tạo banner quảng cáo cố định trượt phía dưới góc phải blog








Cách làm như sau:
Vào Thiết kế > Phần tử trang
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:177px; padding-right:7px;
background:url(http://c.uploadanh.com/upload/2/49/0.4667527_2763_1.gif)
no-repeat right top;}

   
#cob263512{background:url(http://c.uploadanh.com/upload/2/49/0.4667526_2763_1.gif)
no-repeat left top; height:150px; padding-left:7px;}

   
#coh963846{color:#690;display:block; height:20px; line-height:20px;
font-size:11px; width:172px;}

    #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://dothang.googlecode.com/files/button1.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="Ẩn đi">Ẩn</a></li>

<li id="pf204652show" style="display:
none;"><a class="max"
href="javascript:pf204652clickshow();" title="Hiện lại">Xem
</a></li>

</ul>

BÁN SIM SỐ ĐẸP - HÀ NAM</div>

<div id="co453569">

<a
rel="nofollow" target="_blank"> <img
border="0" height="120"
src="http://dothang.googlecode.com/files/qc-sim.gif" title="Ảnh
hoặc logo quảng cáo của bạn." width="170" /></a>


</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>
Thay nội dung chữ màu xanh bằng nội dung của bạn.


Một dạng quảng cáo trượt khác
Chèn đoạn code sau vào nơi bạn muốn hiển thị


<style>
#ads { /* required to avoid jumping */
  position: absolute;
  width:310px;
}

#float {
  position: absolute;
  top: 0;
  margin-top: 20px;
  padding-top: 19px;
}
#float.fixed {
  position: fixed;
  top: 0;
}
#facebook {
    background: #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#float').offset().top - parseFloat($('#float').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#float').addClass('fixed');
      } else {
        // otherwise remove it
        $('#float').removeClass('fixed');
      }
    });
  } 
});
</script>

    <div id="ads">
      <div id="float">
<!--Đặt đoạn code banner quảng cáo vào đây -->
      </div>
    </div>
Chúc các bạn thành công

No comments:

Post a Comment

Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |