Chèn script quảng cáo hai bên với thủ thuật javascript

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 đó.

Đầ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://sharecode.vn/" 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://sharecode.vn/" 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