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


Đăng nhận xét

/