[Blogspot] Tạo Banner quảng cáo hiển thị ngẫu nhiên
Thứ Hai, 28 tháng 3, 2011
|
Thủ thuật blogspot
Đôi khi bạn ghé thăm một website nào đó, có thể bạn sẽ thấy một mẫu quảng cáo sẽ bị thay thế bởi một quảng cáo khác ở cùng một vị trí khi refresh trang, hoặc khi bạn xem một trang mới. Hay nói cách khác, các mẫu quảng cáo đã hiển thị một cách ngẫu nhiên.
Xin lưu ý rằng đây không phải là một mẫu quảng cáo dạng Flash hoặc ảnh động, mà có thể tự động thay đổi do lập trình sẵn.
Vậy họ đã làm điều đó như thế nào ? Bài viết hôm nay iTechPlus sẽ hướng dẫn bạn một thủ thuật nho nhỏ, đó là sử dụng vài dòng JavaScript đơn giản để khiến cho các hình ảnh quảng cáo đơn lẻ của bạn hiển thị một cách ngẫu nhiên khi refresh hoặc chuyển trang.
Lưu ý : Refresh trang ( nhấn F5 ) để thấy hiệu ứng
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML\JavaScripts và dán vào đoạn code bên dưới
<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>
<!-- BANNER#1 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- BANNER#2 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
<tr>
<td><center>
<!-- BANNER#3 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- BANNER#4 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</td></center>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vzqOudS_Xh6HEGsYS3pm67Wfdhd2V31gjcUtUY3tYAKjlhGL4O9NFYNY2G_q9cun878ychimSRK7-SN9DULnz9LUQBF8Veoft3KCyftdfWAlECNxsBtu-1XbeJUR6j6gxjOjdBRqucwj/s1600/ADVERTISE-HERE.gif" /></a></center></td>
</tr>
</tbody></table>
</div>
- width="265" : chiều rộng khung chứa hình ảnh quảng cáo ( sử dụng để tăng\giảm khoảng cách giữa các hình ảnh quảng cáo )
- height='125' width='125' : chiều rộng và chiều cao của hình ảnh quảng cáo
- URL OF ADVERTISER : liên kết đến website nhà quảng cáo
- URL OF BANNER’S IMAGE-1 và URL OF BANNER’S IMAGE-2 : liên kết đến hình ảnh quảng cáo
- AD DESCRIPTION : thông tin quảng cáo ( sẽ hiển thị khi rê chuột vào )
Hy vọng bạn sẽ thích tiện ích này. Chúc các bạn thành công !
Đại ca ơi
Em đã làm và thành công trên trang của em: http://lamkan.blogspot.com
Nhưng em không hiện đc cái AD DESCRIPTION
Ấn chuột vào ảnh nó không hiện anh ơi
Anh qua xem giúp em được không
Mà em thử cách anh nói phía trên như sau
Mặc định mỗi vị trí chứa banner (có 4 vị trí BANNER#1,BANNER#2,...) có 2 banner (images[0]...,images[1],..) hiển thị random. Theo ý bạn thì xóa cả đoạn code BANNER#2,BANNER#3,BANNER#4 đi, sau đó chèn thêm vào BANNER#1 dòng images[2]...,images[3]...là được.
Nhưng em làm sai
Nó hiện mỗi 1 banner thôi
Không hiện đc 4 Banner và mỗi khu vực Banner chỉ hiển thị 1 ảnh
Anh viết lại code mỗi vị trí banner chỉ hiển thị 1 ảnh được không anh
Khi nãy em đọc nhầm
Bây giờ em muốn hỏi
Em vẫn giữ cả 4 vị trí (Banner#1, #2, #3, #4)
Nhưng giờ mỗi vị trí chỉ hiển thị một Banner (không ngẫu nhiên nữa) thì code nhưt thế nào ạ
Mình cũng ko rành nữa, cái này mình chưa xài với lại lấy từ nguồn khác nên ... :12: