Tổng hợp các style cho tiện ích “Recent posts with thumbnail”

Bài viết này mình sẽ tổng hợp các style của tiện ích “Recent posts with thumbnail” mà mình đã hoàn thiện từ tiện ích của VWG. Ngoài ra các bạn có thể yêu cầu các style khác mà bạn thích, mình mình chỉnh sửa được sẽ update lên.
Trong bài viết này mình sẽ không giới thiệu cách thực hiện thủ thuật, mà mình chỉ minh họa kết quả và đưa các file javascript cho từng style. Còn thủ thuật thì các bạn có thể tham khảo ở các bài trước.
Trong các style đầu tiên này, có 2 style của mình đưa ra và 2 style theo yêu cầu.
1. Style 1 : hiển thị mô tả bài viết khi rê chuột vào tiêu đề:
- Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/newposts-Description/style1/index1.html

Ảnh minh họa :

- Tham khảo thêm thủ thuật này ở đây: style1
(thực hiện lại tương tự và chỉ việc thay đổi link của file Javascript)
- Link file javascript:

Cho từng nhãn: http://data.fandung.com/blog/demo/newposts-Description/style1/s1-label.js
Cho cả blog:
http://data.fandung.com/blog/demo/newposts-Description/style1/s1-post.js

2. Style 2 : hiển thị bài viết dạng list, với việc hiển thị mô tả có kèm ảnh thumbnail khi rê chuột.
- Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/newposts-Description/style2/index2.html

Ảnh minh họa :

- Tham khảo thêm thủ thuật này ở đây: style2
(thực hiện lại tương tự và chỉ việc thay đổi link của file Javascript)
- Link file javascript:

Cho từng nhãn: http://data.fandung.com/blog/demo/newposts-Description/style2/s2-label.js
Cho cả blog:
http://data.fandung.com/blog/demo/newposts-Description/style2/s2-post.js

3. Style 3 : Thủ thuật theo yêu cầu của bạn YoYo
- Chỉ hiển thị ảnh của bài viết, với hiện thị tiêu đề bài viết khi rê chuột.
- Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/newposts-Description/style3/index3.html

Ảnh minh họa :

- Tham khảo thêm thủ thuật này ở đây: style3
(thực hiện lại tương tự và chỉ việc thay đổi link của file Javascript)
- Link file javascript:

Cho từng nhãn: http://data.fandung.com/blog/demo/newposts-Description/style3/s3-label.js
Cho cả blog:
http://data.fandung.com/blog/demo/newposts-Description/style3/s3-post.js

4. Style 4 : Thủ thuật theo yêu cầu của bạn LouLou
- Thủ thuật này là sự kết hợp của hiệu ứng jQuery và hiệu ứng mô tả bài viết: http://data.fandung.com/blog/demo/newposts-Description/style4/index4.html

Ảnh minh họa :

- Tham khảo thêm thủ thuật này ở đây: style4.1 (jQuery) và style4.2 (Mô tả)
(thực hiện lại tương tự, ngoài việc thay đổi link của file Javascript từ thủ thuật 4.1 bạn còn phải thêm tất cả code CSS của thủ thuật 4.2 vào trong code của thủ thuật 4.1)
- Link file javascript:

Cho từng nhãn: http://data.fandung.com/blog/demo/newposts-Description/style4/s4-label.js
Cho cả blog:
http://data.fandung.com/blog/demo/newposts-Description/style4/s4-post.js

5. Style 5: Thủ thuật yêu cầu của bạn share4vn.tk
- Tương tự thủ thuật của style 4, với yêu cầu này, thì chỉ cho phép hiển thị ảnh bài viết của từng nhãn. bạn chỉ cần thay đổi link javascript của style4 là xong. Và style5 này chỉ dùng cho từng nhãn.
- Xem demo trực tiếp: http://data.fandung.com/blog/demo/newposts-Description/style5/index.html

Ảnh minh họa:

- File Javascript:

http://data.fandung.com/blog/demo/newposts-Description/style5/s4-label.js

- Thực hiện tương tự như style4, nếu không rõ có thể Nhấp chuột phải vào trang demo của mình để View Source (xem code của thủ thuật).
- Lưu ý : với yêu cầu chỉ hiển thị ảnh thì sẽ tạo một khoảng trống phía bên phải của ảnh thumbnail, nếu bỏ khoảng trống này đi (thay đổi độ rộng của id #listticker) thì phần mô tả sẽ bị che, (xem hình minh họa bên dưới). Do đó đây là sự bất tiện của thủ thuật này.

6. Style 6 : Thủ thuật yêu cầu của bạn Mr Hiến
- Với style này mình sẽ giới thiệu 2 loại, và chỉ sử dụng jQuery, không có sử dụng popup hiển thị mô tả bài viết.
- Giới thiệu chung : ở style này mình sẽ chỉ cho phép hiển thị 1 bài viết cho mỗi lần hiển thị, và ứng dụng jQuery vào để tạo hiệu ứng thay đổi bài viết dạng Flash.
a. Style a:
- xem demo trực tiếp: http://data.fandung.com/blog/demo/newposts-Description/style6/index61.html

Hình minh họa:

- Link javascript:

Cho từng nhãn http://data.fandung.com/blog/demo/newposts-Description/style6/label_slide61.js
Cho cả blog
http://data.fandung.com/blog/demo/newposts-Description/style6/post_slide61.js

b. Style b:
- xem demo trực tiếp: http://data.fandung.com/blog/demo/newposts-Description/style6/index62.html

Hình minh họa:

- Link javascript:

Cho từng nhãn http://data.fandung.com/blog/demo/newposts-Description/style6/label_slide62.js
Cho cả blog
http://data.fandung.com/blog/demo/newposts-Description/style6/post_slide62.js

☼ Và sau đây là code cho style này:
- Tạo 1 widget HTML/Javascript và dán tất cả code vào bên dưới:

<script src=”http://data.fandung.com/blog/demo/newposts-Description/style6/jquery-1.2.6.min.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
var first = 0;
var speed = 500;
var pause = 4500;
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>
<style type=”text/css”>
#listticker{
height:200px;
width:480px;
overflow:hidden;
border:solid 0px #DEDEDE;
padding:1px;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:300px;
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:10px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>
<script language=”JavaScript”>
imgr = new Array();
imgr[0] = “http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif”;
showRandomImg = true;
imgwidth = 130;
imgheight = 130;
fntsize = 17;
acolor = “#f00″;
aBold = true;
text = “Comment”;
showPostDate = true;
summaryPost = 200;
summaryFontsize = 13;
summaryColor = “#000″;
numposts = 10;
label = “Thu%20Thuat%20Blog”;
home_page = “http://www.fandung.com/”;
</script>
<script src=”post_slide61.js” type=”text/javascript”></script>

Một vài lưu ý:
- Thay code màu xanh (link javascript) tương ứng với style mà bạn chọn.
- label = “Thu%20Thuat%20Blog”; : nhãn mà bạn muốn hiển thị
- home_page = “http://www.fandung.com/”; : đổi thành URL blog của bạn.
- summaryPost = 200; : số kí tự của phần summary post sẽ hiển thị.
- text = “Comment”; : phần này sẽ hiển thị ngày đăng và comment của bài viết, nếu không muốn hiển thị thì sửa lại thành text = “no”;
- numposts = 10; : số bài viết sẽ được hiển thị.