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

Với kiểu 4 này, các ảnh sẽ được xếp lại khá gọn, khi muốn xem ảnh nào, các bạn rê chuột vào ảnh, ảnh sẽ tự động "bung" ra kèm theo những dòng chú thích cho ảnh...

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.

<link href="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/haccordion.css" rel="stylesheet" type="text/css"></link></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/dunghennessyslideshow.js" type="text/javascript">
</script></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/slideshow.js" type="text/javascript">
<font size="5">
/***********************************************
* Mời các bạn ghé tham quan và ủng hộ dunghennessy tại địa chỉ
http://www.dunghennessy.blogspot.com
***********************************************/
</font>
</script></div>

<style type="text/css">
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightgreen;
}
</style>

<script type="text/javascript">
haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'500px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false//<- No comma following very last setting!
})
</script>
<div class="haccordion" id="hc1">

<ul>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1jgrytJ_PRvkIRCqA-rmCGAiZgQgihLBTAJswcSM7RBUni2IfawbuZHzKfsr4qHwdArzO0bIc2wqyzby-h6H3snfh-YtTY-R96bWQpQvN7WYEGfeuTbRfE_bEJ3aRi_FeBs9qhMYC1kQ/s1600/0006.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Đây là một trong những ảnh động về chủ đề "Các loại chim", bạn sẽ tìm thấy nhiều ảnh đẹp hơn tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkSRfpyyQVlmfv4_8eLt6wfXpBcJAc2cpKM-Eyp_Uv1UA__F4bgbmZQ1J2jFiz7mHavoEh24Qd08Z3fMD4r4L_H0XwYG0JKYGGb29gEcIancTIFyY3qHqhQL6oh47qQtVDBqa7Nkn3JTG/s1600/0202.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "I LOVE YOU", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-i-love-you.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUMw-kRmjg2-SI4sS8ArJH82g4Kb9aIZAzXSWyCHn5uZ2stecQ8gQFrMfVSx7wQ2khPWbVl6-xFuqT7smc1uIwY_NaEgwYCmha5Y5qO1qhHq9OSBVJpWTAHuti2SpG0Nyg2O094SCiGK4/s1600/0004.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Tiếp theo, đây là một những ảnh động với chủ đề "Xe Ôtô", các bạn sẽ tìm thấy nhiều ảnh động xe ôtô tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-xe-hoi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEpKwfI8fMDeKrWqZ2h36uqDTVFUGUalAg7jgz4ll68vRtKBxurbo8u8ToRW5kc7bKzAAqDFtm-Mjtmt5It0iXPsWz7ofeDqLUV7peppSr43FNxeYh2Hva3VgJUGSozMVM5RYO59EYj2Oc/s1600/0027.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động về chủ đề "Chiến binh và vũ khí", các bạn cũng dễ dàng tìm thấy những ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chien-binh-va-vu-khi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgID_XiBhM1eB8vp1b8Rg-2HP3OnCufoq_cY7vn7S51mRgiK_rKpx_LODU8PDg3_1cxWf0uuQdC3bM5IJV-2DfIUcp2sOEIod3pH71_72B0yL7PitOOdCXAgKEwndvY-7LGXjRXC15Fj7Y/s1600/0023.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là ảnh động với chủ đề "Thánh giá và Chúa GiêSu", các bạn có thể tìm được nhiều ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chua-gie-su-va-thanh-gia.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTIPQbe0C7kOBWWgtjdKbecBq-kVyIhH2rGM83XW8-zj4LFuy2AKILyHhtDUZPSp5-Rfo6N29uXGSnc7qAbuEojCpTWaEzsYU-XH5HLk9AKmNABomvZVirKElk8VyXwLM6o0RC6WeL3c/s1600/0026.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
</ul>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó:
* Fullw: độ rộng của slideshow
* h: Chiều cao của slideshow
* Background: màu nền của Slideshow
* Img src: Link của ảnh
* Height: chiều cao của mỗi ảnh
* Width: Độ rộng của mỗi ảnh
* a herf: Địa chỉ link liên kết.
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

<li>
  <div class="hpanel">
<img src="Link ảnh" style="float: left; height: 320px; padding-right: 8px; width: 240px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="Link liên kết"> anhdepblog.blogspot.com.</a>
  </div>
</li>

Dán trên dòng lệnh </ul> (màu xanh) gần cuối dòng.

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