Home » Thủ thuật blog
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
[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.

- Tiện ích Recent posts tích hợp hiệu ứng từ jQuery
- Hiệu ứng show ảnh từ jQuery
- Tạo thanh TabNews cho Header khá ấn tượng với jQuery
- Tab Menu cực cool cho blog với jQuery
- Tạo thanh menu ngang với hiệu ứng từ jQuery
- Tạo nút lên đầu trang với hiệu ứng từ jQuery
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
Comments[ 0 ]
Đăng nhận xét