Tạo slide ảnh cho blog

 14 comments

Hôm qua ROMF có nhờ mình hướng dẫn làm 1 slide ảnh cho blog nên hôm nay xuất bản thủ thuật này cũng đồng thời cho những bạn khác có cùng nhu cầu.

Xem Demo

1. Chèn đoạn css sau vào trước thẻ ]]></b:skin>

#vqaslideshow img {display: block; padding: 15px;background: url(http://i.imgur.com/hh5ir.png);position:absolute;left:0; top:0}
#vqaslideshow {position:relative; width:780px; height:488px; margin:0 auto}

2. Chèn đoạn code sau vào sau thẻ ]]></b:skin>

<script src='http://voquocan.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $('#vqaslideshow img:gt(0)').hide();
    setInterval(function(){
      $('#vqaslideshow :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#vqaslideshow');},
      4000);
})
</script>

3. Đặt đoạn code này tại nơi muốn xuất hiện slide ảnh.
Trong hướng dẫn này mình đặt slide ảnh ở phía trên footer của bài viết bằng cắch đặt đoạn code phía trên thẻ <footer>

<div id='vqaslideshow'>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/fallen.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/Job.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/Lonely.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/Love.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/sad.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/Share.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/smile.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/time.jpg' width='750'/>
<img height='460' src='http://dl.dropbox.com/u/45453902/Photo/waiting/waiting.jpg' width='750'/>
</div>

Chú ý:

» Trong đoạn code ở bước 1 có width:780px; height:488px; là chiều rộng chiều cao của khung chứa ảnh.
» Trong đoạn code ở bước 3 width='750' height='460' là chiều rộng chiều cao của bức ảnh.
» Nếu bạn muốn slide ảnh này nằm trên sidebar thì cho đoạn code ở bước 3 vào 1 tiện ích HTML và điều chỉnh chiều rộng chiều cao của khung ảnh và ảnh cho phù hợp với blog là được.
» Trong đoạn code ở bước 2 có chứa file jquery.min.js. Nếu trên blog bạn đã có file này rồi thì bỏ đoạn code <script src='http://voquocan.googlecode.com/files/jquery.min.js'