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

Thứ Bảy, 6 tháng 2, 2016

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

Nguyễn Đạt KhánhThứ Bảy, tháng 2 06, 2016 Facebook Comment Không có nhận xét nào

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 SlideShow trong 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_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 ý.

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

Bạn nào không rõ thì cứ để lại Comment nhé !

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..

Share:

LIKE and Share this article: :

Nguyễn Đạt Khánh | Thứ Bảy, tháng 2 06, 2016 | Thủ thuật Blogger

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.

Nơi truy cập vào Nick của Tôi trên mạng: