Update - 4 yêu cầu đã được cập nhật
[FD's BlOg] - 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.htmlHì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.htmlHì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/js/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ị.
Ngoài ra bạn nào có yêu cầu thêm style khác mà mình thích thì cứ comment ở dưới, mình sẽ chỉnh sửa theo yêu cầu (nếu được) và mình sẽ update lên.
[FD's BlOg] - Lang thang trên mạng 1 hồi, mình tìm được tiện ích này. Tiện ích này sẽ tự tạo bài viết kiểu thu gọn ở các trang. Một dạng giống như kiểu thêm tiện ích "Read more...". Nhưng ở đây dùng javascript để tự động thu gọn bài viết với ảnh thumbnail.
