Loading post navigation ...
 
 

Pro page

47
Nhận xét

Tổng hợp các style cho tiện ích "Recent posts with thumbnail" (có thể yêu cầu style khác ở đây)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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)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/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.


Enter your mail address:

47

Lê Công Tiến
share4vnn.Tk

anh Dũng tiến bộ nhanh quá !!!

share4vnn.Tk

anh dũng mở cái topic này thì giúp em làm cái hiệu ứng của jQuery chỉ hiển thị ảnh của 1 label..cái này có vẻ khó..bác cố giúp

fandung

share4vnn.tk : tức là giống cái style4 phải không em. Thay vì hiển thị ảnh và tiêu đề, thì giờ chỉ cho hiển thị ảnh không hả, rồi còn phần mô tả thì cho hiển thị cái gì vào đó, tiêu đề hay summary post?

Mr Hiến

Thủ thuật của bạn rất tiện ích. Có thể chỉ mình cách để thêm readmore... vào cuối mỗi "Recent posts" như hình vẽ này được không:
http://lh3.ggpht.com/_zBBbtR9254Y/SjCVgXf1GKI/AAAAAAAAAKo/KEyVVU5Yf-4/Untitled.gif
(Mô tả: Phần nội dung chỉnh lên trên (top) Thumbnail căn trái, phần nội dung tăng thêm các ký tự mô tả cho phù hợp với độ rộng của thẻ và cuối mỗi nội dung thêm readmore...
:( cám ơn trước nhé!

Phan Dũng

@Mr Hiến: Như vậy là chỉ thêm chữ readmore... vào thôi phải không bạn, tức là chỉ cần chỉnh sửa như hình của bạn đưa thôi phải không. Không cần thêm popup mô tả bài viết phải ko?

LouLou

thanks bác thank cả ngày
bác fd đúng là người của công chúng :)

Phan Dũng

Sự ủng hộ của mọi người là động lực cho mình tìm tòi và suy nghĩ :D

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

Hôm nay mới đọc cái này xong. Phục ông FD sát đất luôn, không còn gì để nói :D.

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

À FD ơi sao cái Emoticon yahoo dạo này chạy ko ổn định lắm hay sao ấy, bạn để ý mà xem nó có hiện biểu tượng nữa đâu

Phan Dũng

@Thành Công: hôm nay mới thấy bạn ghé thăm blog của mình lại đó. Cảm ơn về lời khen của bạn :)

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

Hi tại dạo này công việc bề bộn quá ko có cả thời gian coi blog nữa.À tiện mình nói luôn sau này có thời gian mình định mở một cái topic về hack blog,các bài lấy từ nguồn blog của Dũng nếu dũng dồng ý thì mình xin phep nha. Cám ơn trước nha. Tất nhiên mình sẽ ghi rõ nguồn từ đâu để lỡ có lỗi gì thì Dũng chịu he he đùa vậy thôi :D

fandung

@Thành công: uh, cũng đc :D

Lê Công Tiến
Vincent

Thanks FD nha mi`nh ap dung thu nhi`n cool thiet

Mr Hiến

Ok. Tui tìm ra cách rồi. Cám ơn nhé! Thủ thuật thật hay!

LouLou

bác fD ơi bác giúp em Các bài cùng chủ đề theo style 2 được ko ah

Phan Dũng

LouLou :Đây là code full của style 2, bạn tạo widget HTML/javascript rồi dán nó vào

http://sites.google.com/site/fdblogsite/Home/codefull-style2.txt

Hiệp Cò

Đây là lần thứ 3 HC ghé blog này, 2 lần trước chỉ đọc những thủ thuật cũ ^^!
Lần này đọc những topic mới thấy hay hay.

Chúc site bác ngày 1 phát triển !

Tùng Shady

no ko hien anh , ma chi hien no image thi phai lam sao, thank

Phan Dũng

@Tùng Shady: no image là ảnh mà mình mặc định. Do bài viết của bạn ko có ảnh, nên nó mới hiện ảnh mặc định này. Nếu bài viết bạn có ảnh thì nó sẽ tự động lấy ảnh đầu tiên làm thumbnail cho bài viết.

Đào Nguyên Giáp

Bạn có thể tư vấn cho mình code hoàn chỉnh của Style 2, vì khi mình copy code đó và past vào widget HTML thì không hiển thị bài viết dưới dạng Style.
Bạn chỉ dẫn nhé.

Phan Dũng

@Đào Nguyên Giáp : uh, để mình test rồi gửi cho bạn.

Phan Dũng

@Đào Nguyên Giáp : đây là code full của style2, bạn down về mà tham khảo.

http://sites.google.com/site/fdblogsite/Home/code-full-style2.txt

Đào Nguyên Giáp

Bạn có thể chỉ giúp mình cụ thể hơn một chút được không, vì khi mình thay trang chủ và tên nhã thì hình ảnh lại không hiển thị nữa, bạn có thể vào trang của mình rồi tư vấn cho mình khi mình muốn đưa dưới dạng bài viết như blog của mình được không. Cảm ơn bạn trước nhé: http://giapgv.violet.vn/

fandung

@Đào Nguyên Giáp : trang của bạn là trang nào ,link bạn đưa cho mình, mình vào rồi, nhưng hình như nó ko phải là blog của BLogger. Còn thủ thuật mình hướng dẫn chỉ dùng được cho blogspot của blogger thôi.

Đào Nguyên Giáp

Trang của mình là :http://giapgv.violet.vn/
Mình có một ý muốn nhờ bạn được không?Bạn có thể vào trang của mình: Ở mục TIN TỨC THƯ VIỆN; sau đó bạn bấm vào phần ĐƯA BÀI VIẾT LÊN; Bạn tìm hiểu cách đưa bài viết dạng như blog của mình; Sau đó bạn có thể giúp mình tạo cho mình một dạng code tương thích với bài viết như trang của mình được không bạn?giúp mình nhé!
Vì trang bạn mà mình tin cậy nhất; mình cũng đã đăng quảng cáo trang của bạn trên blog của mình đó.
Rất mong bạn giúp mình.

fandung

@Đào Nguyên Giáp:trang blog của bạn không phải là blogger nên mình không thể giúp được. Muốn làm được ta phải hiểu rõ, nhưng mình lại không có kiến thức về kiểu như trang blog của bạn, nên rất khó.

Bạn thông cảm nha.

Khách (ẩn danh)

Mình làm Thêm hiệu ứng show ảnh từ jQuery vào tiện ích "Gallery Recent Posts", nhưng mình muốn tạo các style khi rê chuột vào tiêu đề thì hiển thị một phần nội dung bài viết như các cách trên.
cám ơn FD

Mộc

Chào FanDung!
Rất cảm ơn những chia xẻ của anh cùng công đồng.Tôi đang bị vấn đề là không hiện ảnh của bài viết cho các tiện ích trên.Mà nó chỉ hiện ảnh mặc định(ảnh này tạo cho tiện ích khi không có ảnh nào trong bài viết).các vấn đề khác làm rất tốt theo hướng dẩn của Anh.Mong FD giúp tôi khắc phục trục trặc trên.
Cảm ơn Anh.

Phan Dũng

@Mộc : mình đã hiểu vấn đề của bạn. Đó là do bạn để chế độ của trang feed ở dạng rút gọn (summary) vì thế mà nó ko tìm thấy ảnh nào từ bài viết, nên sẽ hiển thị ảnh mặc định.

Để khắc phục điều này, bạn vào phần cài đặt >> vào phần Nguồn cấp trang web >> ở mục Cho phép Nguồn cấp dữ liệu Blog bạn chọn "Đầy đủ" . Như thế sẽ hiển thị được ảnh thumbnail.

Chúc bạn thành công.

Mộc

Oh!Cảm ơn anh đã trả lời rất nhanh và tôi cũng đã khắc phục được lỗi trên.
Lần nữa cảm ơn và chúc FD có nhiều bài viết hay

Mộc

Fandung!
Tôi thấy anh nên để phần quảng cáo phía dưới gần khung comment mọi người sẽ tiện hơn khi ủng hộ anh.

Phan Dũng

@Mộc : cám ơn ý kiến của bạn, sẽ khắc phục :D

tuanva

Tớ vừa sử dụng style 2 của cậu, xài tốt lắm, thanks cậu nhiều nhé ^^. Nhưng tớ thấy hình như load feed vào site có vẻ làm site load chậm hơn.

Jack

làm ko dc u.... chán quá

vu huong

anh Dũng ơi.em làm như vậy mà ko hiện ra hết gì luôn.hic.vô trang em xem nha.em add logo của anh r.anh add liên kết hộ em nha.thanks http://www.vuhuong.com/ :((

Khách (ẩn danh)

Mấy trang fandung.110mb.com/....
sao dạo này không truy cập được nữa rồi. Sao vậy bác!

Fishers Of Men

a oi ! tạo một khung bài đăng mà có kèm hình ảnh như Zing News đc ko anh !? http://www.zing.vn/news/ ... hình có tự động chạy luôn á !

Moon Light

anh ơi ở 4. Style 4 đó em muốn cái khung đó nhỏ lại nhưng khi nhỏ lại nó bị mất khung xanh và chữ da cam cũng khuyết :(( em phải làm sao hả anh

Phan Dũng

muốn cho nó nhỏ lại thì chỉnh ở đây nè bạn:
#listticker{
height:300px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 6px 6px 6px;;
background:#fff;
}

và đây:
showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

chỉnh đều 2 giá trị width=400px;tablewidth = 392; nhớ là thay đổi cho đều nhé, cái này bớt bao nhiêu thì cái kia cũng phải bớt đúng như vậy, ko thì nó ko được đều.

Moon Light

hì hì được rùi anh ạ
à anh ơi muốn ứng dụng các hiệu ứng như này nhưng làm cho popular post được ko anh
Thank anh nhiều

Moon Light

anh ơi cho em hỏi thêm là
bên dưới của nó luôn bị cắt vậy làm sao để nó cũng hở 1 khoảng trắng như 3 bên còn lại
http://1.bp.blogspot.com/__gVvBdefOLM/SiNcNv_5iGI/AAAAAAAAA70/wZ_jtOHYjFc/s400/p1.gif

Đồng Tính Việt

Chào anh dũng em đã áp dụng thủ thuật ẩn bài viết ở trang chủ của anh và sau đó áp dụng típ thủ thuật chia nhản thành các ô

Như hình này http://1.bp.blogspot.com/__gVvBdefOLM/Sn_6ood5DPI/AAAAAAAABgo/I86r0LiGDGo/s400/p1.gif


Nhưng khi đọc bài viết thì nó vẩn hiện trong bài viết làm che mất bài viết có cách nào khắc phục cho nó chỉ hiện ở trang chủ thôi không anh

Nếu có làm ơn pm nick yahoo em dùm nhé anh dakhucbuonsd@yahoo.com

Blog em đây : http://dongtinhvn.blogspot.com/

Admin

có tiện ích này củng khá hay mà mình vừa add vào, style của bạn có nhiều cái đẹp hơn :d

xemtruyen.net củng muốn làm 1 cái như bạn, nhưng không biết load thế nào?

Khang Lê

Dũng giúp mình 2 cái này tí nhan:
- style 2 chỉnh sao để có màu nền background màu trắng nghĩa là màu nền của tiêu đề đó Dũng. (Tiêu đề trong ví dụ trên là:Yêu đơn giản chỉ là... nhật ký tôi và em... - ví dụ của Dũng có màu trắng là do nền của web nó màu trắng)

- Rùi chỉnh canh lề padding nữa Dũng (ví dụ mình muốn padding: 5px 5px 5px 5px, mình ngồi thử làm quài mà nó ko có gì thay đổi cả). Chỉnh sửa đoạn code trên khó quá, thêm sai tí là nó không hiển thị luôn.

** Dũng rãnh tạt ngang qua blog mình xem thử: http://www.dichvuthangmay.co.cc/

- Trong blog mình thì mình có ứng dũng cả 2 style 1 và 2 cho cái sidebar, mình rất kết cái style 2 nhưng ko làm sao ra được nền background màu trắng thế nên áp dụng style 1 và chuyền màu sang nền trắng và cho hình ảnh = 0px nhưng lại gặp rắc rối ở canh lề, tiêu đề bài viết nó không nằm thẳng hàng gì hết.

Dũng có thời gian thì giúp mình nhan, thanks alot and chúc Dũng tết này tiền vào đầy túi hen ^___^

Phụ Trách Nhân Sự

mình muốn giống trang này có được ko Yume.vn có gì thông báo qua mail: chamsockhachhang.haidang@gmail.com cho mình với nhé, cảm ơn bạn



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home