SlideShow trình chiếu ảnh tuyệt đẹp cho blogspot (blogger) phần 1

SlideShow trình chiếu ảnh tuyệt đẹp cho blogspot
Kiểu trình chiếu SlideShow bạn thường thấy nhiều nhất là ở các Blog/website tài liệu (123tailieufree.com, 123doc.org, idoc.vn, kilobooks.com đây là các site tài liệu lớn nhất Việt Nam hiện nay)… Nó làm nổi bật nội dung của một Blog/Website thường đặt ở ngoài trang chủ. Ngoài ra một số Blog thường dùng các SlideShow để trao quảng ở các cột sitebar. Hoàn toàn dùng Javascript không dùng Jquery và Flash.

Hôm nay windows2it sẽ hướng dẫn các bạn cách chằn một SlideShow vào cột Sitebar và trực tiếp vào trong template (nơi mà bạn muốn chằn vào). Bắt đầu thủ thuật !


Chằn vào cột sitebar (vô cùng đơn giản) thường dùng cho quảng cáo

Đầu tiên bạn vào Blog => Bố cục=> Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

<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>


Chằn trực tiếp vào trong template làm nổi bật giao diện Blog/Website

Thay đoạn code SlideShowtrong Blog/Website của bạn bằng đoạn Code dưới đây: (đoạn code SlideShow thường nằm giữa thẻ mở <body> và thẻ đóng </body>)


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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></b:if>


Tùy chỉnh

  • Thay URL_banner_0URL_banner_1URL_banner_2 thành URL của hình ảnh bạn muốn hiển thị trên banner

  • Thay URL_link_0URL_link_1URL_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 ý.

  • Bạn muốn thêm báo nhiêu Ảnh cũng được nhé ! với cú pháp
ban[n] = new Image();
ban[n].src = "URL_banner_n";
link[n] = "URL_link_n";
Kết luận

  • Dễ dàng tùy biến, Code gọn đơn giản dể sửa và đặc biệt hoạt động tốt trên mọi trình duyệt.

  • Đặc biệt không dùng Flash thuận lợi cho việc đăng ký Google Asen 

0 comments:

Post a Comment

Blog Archive

Powered by Blogger.