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:
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 != "item"'> <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 :
Theo dõi tôi trên:
 phần 1){kind=link}
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
ReplyDeletechèn được slide vào đây không bạn chung cư Ruby Tower phường 8
ReplyDeletecho mình xin code của blog quangmen05 được không :D email anhchjnhnb@gmail.com tks bạn
ReplyDeleteCám ơn tác giả nhiều
ReplyDeletead cho em hỏi, làm sao co giãn baner theo blog,
ReplyDeletemình làm nó báo lỗi max result 5 gì đó :(
ReplyDeleteÁo chống nắng nam