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

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 !

Đọc thêm:

● Hướng dẫn khắc phục lỗi 404 trong blogspot (blogger)

● Thêm nút mạng xã hội kết hợp với tiện ích theo dõi bài viết qua Email

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

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!

Theo dõi tôi trên:

9 nhận xét:

Thang DamNovember 27, 2016 at 6:35 AM
Anh cho em hỏi với có cách nào để tạo ảnh trong bài post dạng slide không ạ, em muốn viết vài bài review về laptop nhưng không hiện ảnh kiểu slide được thì không ổn lắm
Uyên MinhDecember 12, 2016 at 5:54 PM
chèn được slide vào đây không bạn chung cư Ruby Tower phường 8
1234January 18, 2017 at 12:27 AM
cho mình xin code của blog quangmen05 được không :D email [email protected] tks bạn
BẤT ĐỘNG SẢN SAO ĐỎJanuary 18, 2017 at 3:49 PM
Cám ơn tác giả nhiều
Cao Minh HiềnJune 8, 2017 at 8:40 PM
ad cho em hỏi, làm sao co giãn baner theo blog,
Áo khoác chống nắng HINLETJune 26, 2017 at 12:56 AM
mình làm nó báo lỗi max result 5 gì đó :(
Áo chống nắng nam
NỘI THẤT THIẾT PHANApril 9, 2018 at 7:17 AM
vạy cho e hỏi điều chỉnh kích thước theo ý muốn thì sao ko thấy width và height anh vậy làm sao ?e cám ơn
Trần Hùng MạnhJuly 9, 2018 at 8:17 PM
cho em hỏi là nếu muốn căn giữa vị trí của slider sao cho 2 bên trái và phải bằng nhau thì làm như thế nào ạ.

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

About Quang Mến :

THỦ THUẬT LIÊN QUAN

9 nhận xét: