TẠO SLIDESHOW (Kiểu 6)

Ở kiểu 6 này, dưới slideshow ảnh có các thẻ bấm bao gồm: XEM TIẾP, QUAY LẠI và XEM LẠI TỪ ĐÂU...

Trên đầu slideshow có dòng chữ chạy để các bạn giới thiệu mô tả vài nét về slideshow, ngoài ra các bạn có thể điều chỉnh kích thước ảnh mà mình mong muốn (không lệ thuộc vào ảnh gốc) và tốc độ load ảnh rất nhanh. Slideshow này có thể add các định dạng ảnh (ảnh động hoặc ảnh tĩnh đều được).

Mời các bạn xem thử slideshow phía dưới nha.

Các hình ảnh động dưới đây được lấy từ trang anhdepblog.blogspot.com. Cám ơn các bạn đã ghé tham quan và ủng hộ dunghennessy. Chúc các bạn luôn vui khoẻ và hạnh phúc

Trở lại từ đâu

Để làm được như vậy, các bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML mời các bạn xem TẠI ĐÂY), sau đó copy đoạn code phía dưới dán vào.

<center><table border="0" cellpadding="0">
  <caption><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="#FFE87C" scrollamount=3> <span style="font-weight:bold;font-size:150%;color: rgb(#ffffff,#7D053F, 0);">Lời giới thiệu về slideshow ghi tại đây</span>
</marquee>
</caption>
  <tr>
    <td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8__cJCVSHgHesXPL44SKFOgbh2KuLuJF-muxQ36JHb60_iuu0mPhSyT4OOnTPxDB4noAKbDYuOQLvFG9N2MjYi23-jZqAhIxpQof_BuGl9huo9G0aOzQc2dNVrh9riSl4zXU4DbUuAay/s1600/0014.gif" width="300" height="400" name="photoslider" /></td>
  </tr>
  <tr>
    <td width="100%"><form method="POST" name="rotater">
      <div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8__cJCVSHgHesXPL44SKFOgbh2KuLuJF-muxQ36JHb60_iuu0mPhSyT4OOnTPxDB4noAKbDYuOQLvFG9N2MjYi23-jZqAhIxpQof_BuGl9huo9G0aOzQc2dNVrh9riSl4zXU4DbUuAay/s1600/0014.gif"
photos[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bO3hapBYABn_EFZ_rdlZS8AXgjYPSiqIAV1CSQi8FJ-mbaTdue175C0DY0XiLBtDFH3Mzb2FBm8PeMe0H2n_QY-LzfAXE6UOhnqt_53dJyxby0KwXwOmbXTEw_DK9y0rTj7QfFWnM88/s1600/0355.gif"
photos[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Xh6Ar4ERFTzvf8OomJlqi1OBd77ExyfGMeAd-h7Ech6kY6NAUlKsz27AXuNzEAjFtNYkqdq7BDq2XuiTqz0gtJ6ytjJXl9nAeGTNS-vO240FdIamzxI1sYKGLo516efxEFHFL3a2oCME/s1600/0039.gif"
photos[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXEt5Xc4WB5b5WxHJX-vO6PzWzDRmeiAMUZmYgRNNDb-8zh5tWwQ0i-EMtA8NRmhmlxk7UtO5qIABxKA6Wy7S9-x49qcJck6gB6wn0U9gwqcZkNewlUD3nnxx_wZZ4bamsYgF-wWmkIA/s1600/0210.gif"
photos[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xRNdiMi4U3MmTtVI8ksQac_3czNyoi8Y-XxRoRlK-IVeS05lyVxN23CZGtaOrlLqz7DMtO6_AyaFN-vMeT0eZPGd2x2MzIxQ-pwUORzBlij4vypK400fu8jmcDx_H8R3Dp3w-Nh89o2n/s1600/0073.gif"
photos[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vd28ytV2HLFDel-2vY1b1XZz8Ufp93pGsqJ7W-O3KVJuA_qHFjf1LsVHpbWZIdxDO9DsAmBOkJR_aU190lsYmB_OkErJxEVS5hYlbw-jTfO1yPxVg_6KY6FDciXp95RMBtxkrOADLIlg/s1600/0231.gif"
photos[6]="link ảnh"
photos[7]="link ảnh"
photos[8]="link ảnh"
photos[9]="link ảnh"
photos[10]="link ảnh"



function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Xem lại" name="B2"
 onclick="backward()" /> <input type="button" value="Xem tiếp&gt;&gt;" name="B1"
 onclick="forward()" /><br />
      <a href="#" onclick="which=1;backward();return false"><small>Trở lại từ đâu</small></a></p>
      </center></div>
    </form>
    </td>
  </tr>
</table>

</center>

Bây giờ các bạn có thể thay đổi các dòng lệnh màu đỏ (lời mô tả giới thiệu cho slideshow), dòng lệnh màu trắng (kích thước của ảnh) và dòng lệnh màu vàng (các link ảnh). Cuối cùng bấm Lưu lại và trở lại blog xem kết quả nha.

* Mở rộng thêm: muốn thêm ảnh vào slideshow, các bạn chỉ việc thêm đoạn code sau:

photos[n+1]="link ảnh" 

dán tiếp theo sau dòng lệnh photos [10] cuối cùng, trong đó n là số thứ tự cuối cùng của ảnh (ở code trên số thứ tự cuối cùng của ảnh là số 10). Ví dụ bạn muốn thêm một ảnh nữa thì code là: 

photos[11]="link ảnh"

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