Tạo Banner thay đổi trên Header - Banner Rotator

Một số blog có Header banner thay đổi theo một khoảng thời gian nhất định, có blog lại thay đổi mỗi khi chuyển sang bài viết khác. Cách thực hiện cũng tương đối đơn giản không đến nỗi phức tạp, đơn giản bạn chỉ cần tạo các hình ảnh và copy chúng vào mã Script là xong.
Trong ngôn ngữ của Blog người ta gọi chúng làBanner Rotator Generator. Có 2 loại (1) Thay đổi Banner theo thời gian, (2) Thay đổi banner khi Load (nạp) trang mới.
Bài viết này anh3ngơ giới thiệu với các bạn cả 2 cách trên, để tạo chúng bạn chỉ cần Tạo widget HTML/Javascript rồi copy đoạn mã Script dưới và dán vào đó là xong.

(1) Thay đổi Banner theo thời gian

Với thí dụ dưới, 20 giây thay đổi banner một lần, trong đó banner thay đổi bởi 4 hình ảnh ("Link hình ảnh 1","Link hình ảnh 2","Link hình ảnh 3","Link hình ảnh 4") tương ứng với các link khi clic vào hình ảnh ("Link 1","Link2","Link3","Link4").
Bạn có thể thay đổi thời gian hiển thị bằng cách thay đổi giá trị 20000 (tương đương 20 giây)

<script type="text/javascript">
var imgs1 = new Array("Link hình ảnh 1","Link hình ảnh 2","Link hình ảnh 3","Link hình ảnh 4");
var lnks1 = new Array("Link 1","Link2","Link3","Link4");
var alt1 = new Array("Alt text 1","Alt text 2","Alt text 3","Alt text 4");
var currentAd1 = 0;
var imgCt1 = 4;
function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  document.getElementById('adLink1').href=lnks1[currentAd1]
  currentAd1++;
}
  window.setInterval("cycle1()",20000);
</script>
<a href=""Link 1"" id="adLink1 target="_top">
<img src="Link hình ảnh 1" id="adBanner1 border="0" width="125" height="125"></a>

Bạn có thể thêm Banner nhưng nhớ điều chỉnh giá trị  var imgCt1 = 4; tương ứng với số banner
Thay đổi chiều rộng và chiều cao width="125" height="125" tương ứng với tiện ích bạn sẽ sử dụng

(2) Thay đổi Banner khi load trang mới
Tương tự ví dụ trên, dưới đây là đoạn code để thay đổi 4 Banner có kích thước 468 x 60 px khi load trang mới.

<script type="text/javascript">
<!-- Begin
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd() {
        rnd.seed = (rnd.seed*9301+49297) % 233280;
        return rnd.seed/(233280.0);
};
function rand(number) {
    var result = Math.ceil(rnd()*number);
    if (!result)result++;
        return result
};
var ad_cnt1 = 4;
var ad1 = rand(ad_cnt1);
var link1;
var adBanner1;
var width1
var height1
if (ad1==1) {
link1="Link 1";
adBanner1="Link hình ảnh 1";
width1="468";
height1="60";
alt1="alt text 1";
}
if (ad1==2) {
link1="Link 2";
adBanner1="Link hình ảnh 2";
width1="468";
height1="60";
alt1="alt text 2";
}
if (ad1==3) {
link1="Link 3";
adBanner1="Link hình ảnh 3";
width1="468";
height1="60";
alt1="alt text 3";
}
if (ad1==4) {
link1="Link 4";
adBanner1="Link hình ảnh 4";
width1="468";
height1="60";
alt1="alt text 4";
}
document.write('<center><a href="' + link1 + '" target="_new">');
document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>');
document.write('</center>');
// End -->
</SCRIPT>

Nếu tăng số lượng banner bạn thêm lần lượt theo thứ tự, ví dụ nếu muốn banner thứ 5 bạn thêm :

}
if (ad1==5) {
link1="Link 5";
adBanner1="Link hình ảnh 5";
width1="468";
height1="60";
alt1="alt text5";
}

Vào dưới code:

}
if (ad1==4) {
link1="Link 4";
adBanner1="Link hình ảnh 4";
width1="468";
height1="60";
alt1="alt text 4";
}

Và thay đổi giá trị var ad_cnt1 = 4; tương ứng với số banner (hình ảnh), trong thí dụ trên nếu thêm banner thứ 5 thì giá trị của nó sẽ là var ad_cnt1 = 4;
Nhớ thay đổi giá trị chiều cao và rộng cho phù hợp.

Trên đây là hướng dẫn thực hiện cách để chạy một tiện ích thay đổi banner trên blog, nếu bạn muốn có tiện ích thay đồi thứ 2 thì cần thay các giá trị thành số tiếp theo (thay các giá trị imgs1, lnks1, currentAd1,... thành số tiếp theo tương ứng với số tiện ích), ví dụ với tiện ích thay đổi banner thứ 2 trên blog thì các giá trị của nó sẽ là (imgs2, lnks2, currentAd2,...)

Chúc các bạn thành công

Nguồn : http://vinh36.blogspot.com/

Được đăng tại nhãn: Thủ thuật blog