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

Danh mục: Html & 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 đó.

quang cao 2 ben, thu thuat javacript, javascript tips, Chèn script, javascript code

Đầu tiên bạn phải download file này về: 

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="/" 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="/" 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

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"