Tạo slider ảnh Banner Ngẫu Nhiên Cho Blogspot

Tạo slider ảnh Banner Ngẫu Nhiên Cho Blogspot

Nói đến quảng cáo trên trang web, thông thường tại một không gian web cố định bạn chỉ có thể đặt 1 banner, lấy ví dụ trên phần Header về bên phải bạn chỉ có thể đặt 1 banner có kích thước 468x60 hoặc banner 125x125 ở sidebar. Script sau đây sẽ giúp tạo hiệu ứng chạy luân phiên các banner, từ đó trang web của bạn sẽ trở nên sinh động hơn.

Về cơ bản thủ thuật này hiển thị giống như thủ thuật Tạo Banner quảng cáo hiển thị ngẫu nhiên Cho blog.

1- Đăng nhập vào Blog

2- Vào Bố cục (Layout)

3- Bấm vào Thêm tiện ích (Add widget)

4- Tạo một tiện ích HTML/Javascripts và dán đoạn code sau đây vào tiện íchHTML/Javascripts bạn vừa tạo.

<script type="text/javascript">

// Banner Rotation Script by Bloggerism

var ban = new Array();

var link = new Array();

var index = 0;

ban[0] = new Image();

ban[0].src = "URL_banner_0";

link[0] = "URL_link_0";

ban[1] = new Image();

ban[1].src = "URL_banner_1";

link[1] = "URL_link_1";

ban[2] = new Image();

ban[2].src = "URL_banner_2";

link[2] = "URL_link_2";

index = Math.random() * (ban.length);

index = Math.floor(index);

function rotator()

{if (index == ban.length) index = 0;

if (document.images) {

document.images.rotation.src = ban[index].src;

}

else {

document.getElementById('rotation').src=ban[index].src;

}

index++;

setTimeout('rotator()',3000);

}

function go() {window.open(link[index-1]);}

</script>

<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>

<script type="text/javascript">rotator();</script>

5- Lưu lại và xem kết quả nha.

☼ Tùy Chỉnh:

Thay URL_banner_0, URL_banner_1, URL_banner_2 thành URL của hình ảnh bạn muốn hiển thị trên banner

Thay URL_link_0, URL_link_1, URL_link_2 thành linh liên kết tới trang cần quảng cáo tương ướng với mỗi bức ảnh ở bên trên.

 Chú ý số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần chuyển banner. Bạn có thể điều chỉnh con số này tùy ý.

Web7s Chúc bạn thành công!

Tạo Đoạn Text hiển thị ngẫu nhiên hoặc luân phiên

rên blogspot của bạn, đôi khi bạn thích hiển thị một số dòng text thông báo hoặc một vài câu danh ngôn mà bạn tâm đắc. Hiệu ứng tạo text hiển thị ngẫu nhiên hoặc luân phiên sẽ giúp cho trang web trở nên sinh động và bớt đơn điệu hơn. Qua bài viết này mình sẽ giới thiệu bạn cách tạo 2 kiểu text như thế.

1. Hiển thị text ngẫu nhiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<div style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">

<!-- RANDOM QUOTES -->

<script type="text/javascript">

quotes = new Array()

quotes[0] = "Nội dung đoạn text 1"

quotes[1] = "Nội dung đoạn text 2"

quotes[2] = "Nội dung đoạn text 3"

quotes[3] = "Nội dung đoạn text 4"

quotes[4] = "Nội dung đoạn text 5"

quotes[5] = "Nội dung đoạn text 6"

randomquote = Math.random() * (quotes.length)

randomquote = Math.floor(randomquote)

document.write(quotes[randomquote])

</script>

<!-- RANDOM QUOTES -->

</div>

2. Hiển thị text luân phiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<!-- ROTATING QUOTES -->

<script type="text/javascript">

var index = 0;

quotes = new Array();

quotes[0] = "Nội dung đoạn Text 1";

quotes[1] = "Nội dung đoạn Text 2";

quotes[2] = "Nội dung đoạn Text 3";

quotes[3] = "Nội dung đoạn Text 4";

quotes[4] = "Nội dung đoạn Text 5";

quotes[5] = "Nội dung đoạn Text 6";

index = Math.random()*(quotes.length);

index = Math.floor(index);

function rotator() {

if (index == quotes.length) {index = 0;}

document.getElementById("rotation").innerHTML = quotes[index];

index++;

setTimeout("rotator();",5000);

}

</script>

<!-- ROTATING QUOTES -->

<div id="rotation" style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto"></div>

<script type="text/javascript">rotator();</script>

Lần lượt thay nội dung các đoạn text cần hiển thị luân phiên. Chú ý có thể thay đổi số 5000 tượng trưng cho 5 giây chỉ khoảng cách thời gian giữa các lần hiển thị text luân phiên.

Ở 2 code trên, bạn có thể tùy biến thêm CSS để tạo bản sắc riêng khi áp dụng cho blogspot của bạn.