Thủ thuật javacript : chèn script quảng cáo hai bên

01/06/2012

Trong quá trình làm việc với khách hàng, có 1 khách hàng đã yêu cầu mình phải làm chọ họ banner quảng cáo 2 bên giống như trang 24h.com.vn, thoạt đầu mình hơi bối rối và có chút lo ngại vì không biết phải làm thế nào vì mình chưa từng làm cái đó, lên mạng tìm hiểu thì có quá nhiều code và mã nguồn khác nhau giúp mình làm điều đó, nhưng chúng thường lộn xộn và khó hiểu, cuối cùng mình đã chọn ra 1 đoạn code giúp mình làm hài lòng với khách hàng và cũng giúp mình có thêm 1 thủ thuật, nay mình xin chia sẻ với các bạn đoạn script đã giúp mình làm điều đó.

quang cao 2 ben

Đầu tiên bạn phải download file này về: Quảng cáo hai bên

Muốn chèn quảng cáo hai bên bạn cần có site trước khi chèn và file mà bạn muốn chèn ví dụ là file index.html, home.php, abc.aspx…

Đầu tiên bạn mở thư mục lên copy file floater_xlib.js vào site của bạn, chèn đoạn code sau đây vào thẻ head trong file mà bạn muốn chèn quảng cáo.

<!–
     <SCRIPT src=”floater_xlib.js” type=text/javascript></SCRIPT>
–>

Tiếp tục copy đoạn code sau vào thẻ head:


<!--
<SCRIPT type=text/javascript>
var slideTime = 700;
var floatAtBottom = false;
function pepsi_floating_init()
{
    xMoveTo('floating_banner_right', 887 - (1024-screen.width), 0);
    winOnResize(); // set initial position
    xAddEventListener(window, 'resize', winOnResize, false);
    xAddEventListener(window, 'scroll', winOnScroll, false);
}
function winOnResize() {
    checkScreenWidth();
    winOnScroll(); // initial slide
}
function winOnScroll() {
  var y = xScrollTop();
  if (floatAtBottom) {
    y += xClientHeight() - xHeight('floating_banner_left');
  }
  xSlideTo('floating_banner_left', (screen.width - (800-775) - 770)/2-115 , y, slideTime);  // Chỉnh khoảng cách bên trái
  xSlideTo('floating_banner_right', (screen.width - (800-795) + 770)/2, y, slideTime); // // Chỉnh khoảng cách bên Phải
}
function checkScreenWidth()
{
    if( document.body.clientWidth < 926 )
    {
        document.getElementById('floating_banner_left').style.display = 'none';
        document.getElementById('floating_banner_right').style.display = 'none';
    }
    else
    {
        document.getElementById('floating_banner_left').style.display = '';
        document.getElementById('floating_banner_right').style.display = '';
    }
}
</SCRIPT>
-->

Ở đây bạn có thể chỉnh sửa khoảng cách theo chú thích trong file trên.

Tiếp theo copy doạn code sau đây vào trong thẻ body trong file bạn.


<!--
<div id="floating_banner_left" style="text-align:right; position:absolute; overflow:hidden; top: 0px; left: 0px; width: 105px; border: 0px solid #000;">
<div id="floating_banner_left_content">
    <a href="http://thuathuatweb.net/" target="_blank"><img src="hinh1.gif" border="0" width="105px" alt="" /></a>
</div>
</div>
<div id="floating_banner_right" style="text-align:left; position:absolute; overflow:hidden; top: 0px; right: 0px; width: 105px; border: 0px solid #000;">
<div id="floating_banner_right_content"  >
    <a href="http://thuthuatweb.net/" target="_blank"><img src="hinh2.gif" border="0" width="105px" alt="" /></a>
</div>
</div>
<script>
    runQuery();
</script>
<script>
    pepsi_floating_init();
</script>
-->

vậy là đã hoàn tất , bạn nào có câu hỏi, hay thắc mắc gì thì gửi cho mình nha, chúc các bạn thành công

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Trọng Trí

    bạn ơi. mình không download file ở phía trên được, bạn gửi cho mình với :

    mail: trongtridhlongan@gmail.com nhé, thanks bạn

    • papyrut

      Chào bạn, mình đã sửa lại link download, bạn down về mà dùng nhé.

  • phan

    ad ơi cho mình hỏi sao mình chèn vào web site asp.net của mình mà nó ko chạy dọc 2 bên mà chỉ đứng im