Tiện ích "Bài viết mới nhất - có ảnh thumbnail" kết hợp với hiệu ứng slide từ jQuery

Widget Recent Posts Using jQuery

[FD's BlOg] - Sau một lần lục lọi, tìm kiếm trên mạng được một hiệu ứng từ jQuery, mình đã quyết định áp dụng nó cho tiện ích "Bài viết mới - có kèm ảnh thumbnail" mà website VietWebGuide đã phổ biến. Để áp dụng jQuery vào widget "Recent Posts" của VWG, mình có chỉnh sửa đôi chút từ file JavaScript của VWG.

Xem hình minh họa:

Xem demo của thủ thuật gốc:
http://fandung.110mb.com/JS-files/recent-post-Jquery/demo/recent-post.html

Như các thủ thuật trước, để đơn giản, bạn hãy tạo 1 Widget HTML/Javascript và copy tất cả code bên dưới vào :

// Code javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});
</script>

// Code CSS
<style type="text/css">

#listticker{
height:300px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 6px 6px 6px;;
background:#fff;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:2px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>

// Code HTML
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";

showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 15;

home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/js/recent-post-Jquery/recentposts_thumb_5.js" type="text/javascript"></script>

- Có thể các link Javascript của mình load chậm, nên các bạn có thể download về và up lên host nào load nhanh hơn.
- Chú ý điều chỉnh các code màu đỏ (độ rộng) cho hợp lý
- http://www.fandung.com : thay bằng địa chỉ của blog bạn.
- Và một điều lưu ý cuối cùng : chiều cao của ảnh thumbnail (imgheight = 60;) và chiều cao của thẻ <li> (height:60px;) fải bằng nhau.

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