TẠO SLIDESHOW ẢNH (Kiểu 3)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 3).

Ở kiểu 3 này, các ảnh này sẽ được trình diễn "chạy" từ trên xuống hoặc từ dưới lên, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<div class="content"><div class="panel"><div class="panel-content" id="sidebar_download" style="display: block"><center><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="up" scrolldelay="10" hight="150" valign="baseline" width="240" height="400">
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9uz-6l_2LRtyzIbfh8qKwqf_uRcgBYLAMPvvBsarA5Fl7shyOiNNuWBR6XFSoRJJ_-uBmzFr_ihxPMtJ1Og-lJHigXtb7_Tz07gvmYxf7PN3uQMAj58RapZWZ6t7uDR3FGwSAso5qAQo/s1600/0004.gif" width="240" height="320"title="Các loại chim" /></a></div>
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-ghe-thuyen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjU8sQCg3XAuI9XO-VkjzijT0JHqIwWc-7ZtLSFG-il9N2MI2fKXTjpVLJj1FRni2yoYSiXW_99NnXYyGtgjRRgoQop1WBXZ8jfCmHpwqpInsI1-M7Ie_MgPzEKdnxZMI6jjA8jZj32H5/s1600/0002.gif" width="240" height="320"title="Ảnh động ghe thuyền" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-con-ca.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsmBgxdTC9ltpO3dvUrBDqCrWNWr_kzU7fFgoauDIoOy11zAosLGuIowqDDL3AR-4-M6SJ9-BF6Ompbme30N4OcrrM7TYjxWCnIDFjkwfE3ueOKX7tLwZPXQuQaJ7u_L9LChin88qlu1w/s1600/0024.gif" width="240" height="320"title="Ảnh động cá các loại" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7CTGcZF8o5ysCs2h5Kl25E8eYUa4SLOkiafH9P6bKaMme3ovmwrHqaW_1-hkw6ziQ2cvH4e-mk6Q88fK4rfWrVHJRZVmRtkpTjroleEaXccND3pUFw6UFUc2wZ-oW7QKzHkKAkThzNw/s1600/0026.gif" width="240" height="320"title="Ảnh động báo và Sư tử" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-trai-tim-phan-2.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbhCn6h7ucnTpCCD_NhYv3v2Oy3N6izFJuxz6tTAycnkWqZlhMRURwXHBhRoM4bMlw19cfX7YxpaKrsPripPN2lRG9sArpBnCKkwEonXp2DK3VUbfGIAKsKWQAKXYkItmTOP7gZB26Js/s1600/0179.gif" width="240" height="320"title="Ảnh động trái tim" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/background-hoa-van.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOKHHch3SpQ_rChyaAZO2h_tgmNSPNO6PFPyAnPAlRvgm2YgJ7bcvdP3VSzQwono6TvLFDFeCfMEkASAdB1veCwBs9b9L02DaRxzzQEXtoaJF87IuWy80Ziexq38y_FprMhKr1ARldzE/s1600/0008.gif" width="240" height="320"title="Background hoa văn" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-ngon-nen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7RrXUvMwbVmNIyInmjmXoefAxVA1WeL7dHb6OLzBKj33A5E6-d9RMWzKA9wt1ov8rqAvpg0A9orDqSe398CkD1mi-qFot-PJq-cwqj_c-h4PcegZ3QUyDYI5-WNXh7sXItLw-c7r7XU/s1600/0042.gif" width="240" height="320"title="Ảnh động ngọn nến" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-cac-loai-hoa.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwc0k41mNYiQsT153XHqCn6MZTVA06i3WF4YnGCHPA_hXlEj2IZAdQNmweCWM6_NSZWIUWuu8ZRjqGt5QbZ_Qyaq8PCS-9ZOtgqWV60TGH1_E5vKNOBzJxcpux8iN9jNebUVmguzTVzMgc/s1600/0037.gif" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

</marquee></center> </div></div></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (link ảnh), màu xanh (link liên kết), màu vàng (độ rộng và chiều cao của ảnh), title (chú thích cho ảnh) theo ý thích của mình, muốn ảnh chạy từ trên xuống thay chữ "up" thành chữ "down", sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
<div><a target="_blank" href="Link liên kết"> <img border="1" src="Link ảnh" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

Dán trên dòng lệnh: </marquee></center> </div></div></div>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

Chúc các bạn thành công!!!