20 tháng 12, 2007

bảng quảng cáo hay một bảng thông tin tự động trượt đến một vị trí được chỉ định

Thỉnh thoảng có lúc bạn muốn có một bảng quảng cáo hay một bảng thông tin tự động trượt đến một vị trí được chỉ định khi visitor scroll trang web lên-xuống. Đây là cách rất tốt để ưu ái quảng cáo của những đối tượng sẵn sàng chí trả nhiều tiền. Cách làm như sau:

Mở file index.php của template bạn đang sử dụng bằng bất kỳ trình soạn thảo văn bản nào và...

1. Ngay trước thẻ </head> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<script type="text/javascript">
var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;

/*
h - height in pixel of the floating object
x - padding in pixel from the left side of floating object to the left side of browser window
y - padding in pixel from the top side of floating object to the top side of browser window
z - slide time in milisecond
*/
function setUp(h, x, y, z) {
if (document.getElementById) {
isDOM = true;
floaterObj = document.getElementById("floater").style;
} else {
isDOM = false;
floaterObj = document.floater;
}
if (navigator.appName == 'Netscape') {
isNS = true;
} else {
isNS = false;
}

paddingX = x;
paddingY = y;
slideTime = z;

floaterObj.left = paddingX + (isDOM ? 'px' : '');
floaterObj.top = '-' + h + (isDOM ? 'px' : '');

window.onresize = refreshValues;
window.setInterval("placeFloater()", 10);

refreshValues();
}

function refreshValues() {
if (isNS) {
pageHeight = window.innerHeight - 20;
} else {
pageHeight = document.body.clientHeight;
}

placeFloater();
}

function placeFloater() {
if (isNS) {
scrollTop = window.pageYOffset;
} else {
scrollTop = document.body.scrollTop;
}

currentY = parseInt(floaterObj.top);

mainTrigger();

}

function mainTrigger() {
var newTargetY = scrollTop + paddingY;
if ( currentY != newTargetY ) {
if ( newTargetY != targetY ) {
targetY = newTargetY;
floatStart();
}
animator();
}
}

function floatStart() {
var now = new Date();
A = targetY - currentY;
B = Math.PI / ( 2 * slideTime );
C = now.getTime();
if (Math.abs(A) > pageHeight) {
D = A > 0 ? targetY - pageHeight : targetY + pageHeight;
A = A > 0 ? pageHeight : -pageHeight;
} else {
D = currentY;
}
}

function animator() {
var now = new Date();
var newY = A * Math.sin( B * ( now.getTime() - C ) ) + D;
newY = Math.round(newY);
if (( A > 0 && newY > currentY ) || ( A < 0 && newY < currentY )) {
floaterObj.top = newY + (isDOM ? 'px' : '');
}
}
</script>
<!-- Floating Object container /-->
2. Sửa thẻ <body> thành
Code:
<body onload="setUp(60, 15, 15, 1500)">
Function setUp có những thông số lần lượt là

* Chiều cao (đơn vị pixel) của module tự trượt.
* Khoảng cách (đơn vị pixel) từ lề trái của module tự trượt đến lề trái của cửa sổ trình duyệt
* Khoảng cách (đơn vị pixel) từ lề trên của module tự trượt đến lề trên của cửa sổ trình duyệt
* Khoảng thời gian (đơn vị milisecond) để module trượt từ vị trí cũ đến vị trí mới khi visitor scroll lên-xuống trang web.


3. Ngay trước thẻ </body> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<div id="floater" name="floater" style="position: absolute; z-index: 1000">
<!-- Banner Module code \-->
<?php if (mosCountModules('banner')) mosLoadModules('banner'); ?>
<!-- Banner Module code /-->
</div>
<!-- Floating Object container /-->
...lưu lại các thay đổi trong file index.php của template rồi đăng nhập vào trang quản trị của Joomla để cấu module hiển thị bảng quảng cáo hoặc bảng thông tin để hiện ở vị trí (position) banner.

Chúc may.

0 Ý kiến:

Blog Hoc Tap :)) Blog Hoc Tap ;)) Blog Hoc Tap ;;) Blog Hoc Tap :D Blog Hoc Tap ;) Blog Hoc Tap :p Blog Hoc Tap :(( Blog Hoc Tap :( Blog Hoc Tap :X Blog Hoc Tap =(( Blog Hoc Tap :-o Blog Hoc Tap :-/ Blog Hoc Tap :-* Blog Hoc Tap 8-} Blog Hoc Tap :)] Blog Hoc Tap ~x( Blog Hoc Tap :-t Blog Hoc Tap b-( Blog Hoc Tap :-L Blog Hoc Tap x( Blog Hoc Tap =))

Đăng ý kiến của bạnBlog Hoc Tap

Đây là Web Blog dùng để "Ghi lại" trong quá trình làm việc và học tập. Bạn có thể đăng ý kiến để Đóng góp, Xây dựng, Trao đổi, Học tập với tôi. Cảm ơn bạn đã ghé qua web blog của tôi.
Bạn có thể sử dụng các biểu tượng cảm xúc trong bài "ý kiến" bằng cách gõ ký tự bên phải của mỗi biểu tượng.
Thân chàoBlog Hoc Tap

BlogWeb: tạo từ Blog của Google
Nội dung: lấy từ nhiều Nguồn khác nhau.
Mục đích: note lại bài Hướng dẫn hay và Đáng đọc.
Kết quả: nghiện Internet Nặng.
Tương lại: xuống lỗ Vẫn Nghiện nếu không có ai giúp.
Blog Web của: Trí Dũng đến từ Việt Nam - Liên kết đến trang Blog Cá Nhân
Tôi biết (^_^)
Thông tin về Tác giả. Chi Tiết
Sử dụng (FireFox | Google Chrome on Ubuntu) để xem tốt nhất. Học Nhiều Hơn Tại Đây
©2009 Google Blogger - HuuNguyen's Home