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
Trả lờiXóachèn được slide vào đây không bạn chung cư Ruby Tower phường 8
Trả lờiXóacho mình xin code của blog quangmen05 được không :D email [email protected] tks bạn
Trả lờiXóaCám ơn tác giả nhiều
Trả lờiXóaad cho em hỏi, làm sao co giãn baner theo blog,
Trả lờiXóamình làm nó báo lỗi max result 5 gì đó :(
Trả lờiXóaÁo chống nắng nam
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ả lờiXóaở thẻ <img cuối đoạn code. Bạn thêm thuộc tính width='chiềurộng' height='chiềucao' thế là xong
Xóacho 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 ạ.
Trả lờiXóaanh cho em hỏi code để chèn slider đối tác ở cuối trang web làm thế nào vậy?
Trả lờiXóaCó cách nào gom ảnh trong 1 bài viết vào 1 khung không ad. https://www.for18xxx.com
Trả lờiXóaChuyên thiết kế và thi công các loại giấy dán tường: Hàn quốc, Đức, Ý, Đài loan giá tốt nhất tại Hà Nội
Trả lờiXóagiấy dán tường cho phòng ngủ
giấy dán tường hàn quốc phòng ngủ
tranh gian tuong 3d
giấy dán tường nhật bản hà nội
giấy dán tường mua ở đâu
giấy dán tường 3d