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.
Đẹp wá :x. FanDũng có nhìu bài viết về jQuery nhỉ? Cái nào cũng hay fết. Vote 5* zdị :D
Sự kết hợp này có thể nói là chưa có blog nào có .(theo như mình biết :D)
đúng là cái loulou mong muốn. thanks bác fandung nhiều quá, site em cũng đang xài jquery thêm cái này vào tuyệt thật
àh bác fandung , lần trước em thấy bác giới thiệu cái slideshow TabNews = jwery, em có ý là bác xem có cách nào làm cho cái TabNews đó tự động lấy tiêu đề và hình của bài viết để show lên giống như recent post lần này được k? chứ cứ phải làm thủ công bất tiện wá
@LouLou: mình cũng có nghĩ tới việc này, khi nào thàn công sẽ post lên. :D
@LouLou:mình đã test thủ thuật mà bạn nói, đã hiển thị tốt các bài viết, nhưng còn phần trình diễn thì lại bị lỗi.
Nó chạy 1 hồi thì bị trục trặc, và mỗi lần trục trặc với những lỗi khác nhau.
Có lẽ là ghép chung nhiều đọan Javascript lại với nhau nên nó mới bị lỗi như vậy.
Thiệt là ko biếtlàm sao...
Mọi người có thể xem thử demo ở đây, coi có bị lỗi như của mình không.
Thủ thuật tạo TabNews (jQuery) - tự cập nhật bài viết mới:
http://fd-tester.blogspot.com
bác FD ơi em vào http://fd-tester.blogspot.com xem rùi xem các bài viết xoay vòng từ đầu đến cuối được 2 vòng thì .... cảm giác mọi thứ đang hoạt động ko khớp nhau
dù sao đây cũng là thành công bước đầu rùi. em ủng hộ bác mong bác sớm hoàn thành widget này
chưa tìm được cách khắc phục. không biết có thể sửa đc lỗi này ko. ~x(
bác fandung ơi bây h` em chỉ muốn show những bài mới của 1 nhãn thì làm thế nào nhỉ ??? giúp em zới
@LouLou: bạn có thể xem bài viết này sẽ thực hiện được
http://fandung.blogspot.com/2009/06/tao-cac-tab-chuyen-muc-noi-bat-cho-blog.html
not good :(
Mấy cái link script up lên host em chẳng chạy được :(
Sao??? up lên host của em chạy ko đc à ??? Nếu không chạy đuợc thì cứ xài link của anh đưa cũng đc.
@Naturo:
Lưu ý với bạn 1 điều nữa là, file javascript có liên quan tới code CSS vì thế không nên đổi tên của các id, class.
thủ thuật này cũng hay đó :D
Cái của mình xài cool hơn nhiều :D
Sẵn đây quảng cáo thêm template mới của mình: http://comedown-vi.blogspot.com :D
FD cho tớ hỏi là muốn cho nó nền trong suốt thì làm thế nào ? Tự dưng nền mình đang màu tối nó lại chơi màu trắng khó xơi quá. À tiện cho tớ hỏi là không hiểu sao template của tớ nó lại mất phần comments. Cậu chỉ tớ với :((
Cảm ơn trc nhé !
Blog của tớ: http://www.duyanhblog.com
thanks anh FanDung.Com
Không thành công bạn à
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.