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
Chủ Nhật, 31 tháng 5, 2009
[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.

- 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
- Tạo thumb cho bài đăng phổ biến
- Tạo lại header cho chuẩn Seo
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- ANCData - Plugin load feed Blogger version 1
- Đưa Radio vào Blog của bạn (Yêu cầu)
Comments[ 0 ]
Đăng nhận xét