Loading post navigation ...
 
 

Pro page

51
Nhận xét

Style mới cho tiện ích "Recent post" theo label ở Homepage

| by Phan Dũng | views

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

[FD's BlOg] - Từ sau khi hoàn thiện thủ thuật "Recent posts" hiện thị giống trang tin247.com, mình nảy ý định hiển thị nhiều kiểu khác nhau cho các bài viết trong widget "Recent posts". Tức là bài này hiển có kèm ảnh thumbnail , bài khác thì chỉ hiển thị tiêu đề... Với cách này, tiện ích Recent posts của chúng ta sẽ không còn đơn điệu nữa.

Xem demo ở đây : LIVE DEMO


Đây là hình ảnh minh họa mình đã thực hiện:


☼ Và đây là toàn bộ code của thủ thuật :
- Chỉ việc tạo 1 widget HTML/Javascript và dán tất cả code bên dưới vào:

<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 650px;
}

#top-news {
width: 440px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#eee;
font-size:12px;
}

#bottom-news {
width: 444px;
padding:5px;
}

#bottom-news-item {
width: 106px;
margin-right:5px;
float:left;
}

#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 160;
topheight = 160;

botheight = 100;
botwidth = 100;

fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;

text = "comments";
showPostDate = true;

summaryPost = 250;
summaryFontsize = 12;
summaryColor = "#000";


numposts = 17;
label = "Love";
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/vne-recent/vne-recent.js" type="text/javascript"></script>


Để hiểu rõ hơn cho việc chỉnh sửa độ rộng của khung, các bạn xem hình bên dưới:

- Tùy chỉnh lại số bài viết để việc hiển thị được hợp lý nhất.
- Tùy chỉnh lại các độ rộng theo ý bạn.
- Lưu ý với việc điều chỉnh độ rộng của class bottom-news , độ rộng của class này phải lớn hơn con số : 4x(botwidth + 2px + 4px) + 4x5px = 444px (với botwidth=100px), nếu độ rộng của class này nhỏ hơn con số trên, các bài viết sẽ bị tràn xuống hàng ở class bottom-news.
- Độ rộng của class bottom-news-item : botwidth + 2px + 4px = 106px;
- Link JS dự phòng :

<script src="http://sites.google.com/site/fdblogsite/js/vne-recent.txt" type="text/javascript"></script>


☼ Cập nhật bản khác của thủ thuật (bản hiển thị 3 bài viết ở class bottom-news):
Hình minh họa:


- Code của thủ thuật : ở đây mình sẽ đưa code đã chỉnh sửa sẵn, cho các bạn tiện sử dụng.

<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 530px;
}

#top-news {
width: 330px;
height:126px;
padding:5px;
border:#bbb solid 1px;
background:#eee;
font-size:12px;
}


#bottom-news {
width: 333px;
padding:5px;
}

#bottom-news-item {
width: 106px;
margin-right:5px;
float:left;
}

#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 120;
topheight = 120;

botheight = 100;
botwidth = 100;

fntsize = 12;
vnesize = 16;
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;


text = "comments";

showPostDate = true;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";


numposts = 16;
label = "Love";
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/vne-recent/vne-recent(fix).js" type="text/javascript"></script>

- Nhưng code màu đỏ là nhưng chỗ mà mình đã chỉnh sửa lại.
- link file JS dự phòng:

<script src="http://sites.google.com/site/fdblogsite/js/vne-recent%28fix%29.txt" type="text/javascript"></script>


☼ Bản nâng cao của thủ thuật
- Với bản nâng cao này, các bạn có thể tùy chỉnh số bài viết ở class bottom-news.
- Code của thủ thuật sẽ thay đổi 1 chút như bên dưới:

...
...
...
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

botnum = 3;
numposts = 16;
label = "Love";
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/vne-recent/vne-recent-adv.js" type="text/javascript"></script>

- với code botnum = 3; là code điều chỉnh số bài viết hiển thị ở class bottom-news
- Với bản nâng cao này, đòi hỏi bạn phải chỉnh sửa nhiều về phần kích thước trong code CSS để có được hiển thị như mong muốn.
- Xem hình minh họa bên dưới:


- link file JS dự phòng:

<script src="http://sites.google.com/site/fdblogsite/js/vne-recent-adv.txt" type="text/javascript"></script>

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


Enter your mail address:

51

share4vnn.tk

tuyet qua..test ngay moi duoc

Le Thuan

bác dũng ơi...to quá cho cho vao bị thừa..bác nên cho ảnh thumb ở dưới là 3 thôi để kéo cái mục recent post chỉ có tiêu đề vào...bác giúp em nhé

Viet-offer.com

Anh Dũng ơi dán cái này vào đâu,em dán trước /head nó ở trên ko phải thân body hả.

fandung

Việt Offer : trên đó anh có hướng dẫn là tạo 1 widget HTML/Javascript rồi dán vô mà.

Dán trước thẻ </head> cũng được, nhưng đọan javascript cuối cùng (đọan có link file JS đó) nhất thiết phải dán vào widget HTML/Javscript, nơi mà em muốn tiện ích hiển thị đó.

Viet-offer.com

uh nhỉ em đọc chưa kĩ cảm ơn anh nhiều,anh reply nhanh ghê.

Lê Công Tiến

1 chữ QUÁ thêm 1 chữ Tuyệt :D. À, FD này. Khi test thủ thuật này thì TIến thấy: Nếu số numposts < số bài trong tag mà mình post thì bố cục của blog thấy gớm luôn :)). Cái left_news thì trên header, fần còn lại bay tứ tung :D

fandung

đúng rồi, với thủ thuật này, để hiển thị tốt nhất thì label của bạn phải có 1 số lượng bài đáng kể.

Còn Tiến nói sao mình ko hiểu, số numposts thường bé hơn số bài mà mình có trong nhãn chứ. Lớn hơn mới bị lỗi chứ, tức là nó ko tìm thấy bài viết để truy xuất.

Lê Công Tiến

Chít!! Viết nhầm đó FD :D:D:D

Lê Công Tiến
Lê Công Tiến
min LVT

thử xem nào....

Mr.Nguyễn

Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!Cảm ơn ! Cảm ơn!..............Bạn thật Pro.!

fandung

cám ơn mình nhiều thế sao mình nhận hết đc :D , hihihi...

Dù sao cũng cám ơn tất cả đã quan tâm tới blog của mình.

hophong

Bác giúp em loại bỏ cái cột bên phải với, cái list ấy. Thanks bác.

fandung

@hophong : muốn loại bỏ cột bên phải, đơn giản nhất bạn thêm đoạn code in đậm vào class #left-news như bên dưới :

#left-news {
padding:5px;
border-left:2px dotted #ccc;
display:none;
}

Ngoài ra chỉnh lại độ rộng của class #cotent-news nữa là xong.

#cotent-news {
border:#999 solid 1px;
width: 350px;
}

P/S : sorry với mọi người, ngay từ đầu đã nhầm 1 điều, cột bên phải mà mình lại đặt tên là left-news, thôi kệ, dù gì nó cũng chỉ là 1 cái tên.

Mr Quang

tuyệt vời
thanks bác dung trước nha :D

Mr Quang

anh cho em hoit nếu muốn hển thị bài của mình thì như thế nào ?
Đỗi link có đc ko

Phan Dũng

@Mr Quang : muốn hiển thị bài viết của mình thì bạn đổi 2 code này lại:

label = "Love";
home_page = "http://fandung.blogspot.com/";

Đổi lại code in đậm cho tương ứng với blog của bạn

Love : là nhãn tương ứng mà bạn muốn hiển thị bài viết
fandung : đổi lại thành tên blog của bạn (nếu có tên miền riêng thì đổi cả đoạn http://fandung.blogspot.com)

Có lẽ bạn chưa làm quen với tiện ích Recent posts nhiều, nên không rõ điều này. Tại điều này mình đã giới thiệu nhiều ở các tiện ích recent post khác, nên trong thủ thuật này mình ko nói lại.

phattrien@so

Dũng ơi, cái này rất hay và cũng rất thú vị, nhưng anh muốn nó hiện thị toàn bộ tất cả các bài viết chứ không phải cho từng label nên anh đã chỉnh sửa .js và xoá đoạn -/+label nhưng không được.:D

Anh muốn cái thủ thuật này hiển thị toàn bộ các bài viết chứ không phải cho từng label thi làm thế nào?

Phan Dũng

@PTS : đúng rồi mà anh, anh phải bỏ cả đọan như thế này /-/"+label+"

phattrien@so

Lam y nhu chi dan cua em, anh xoa bo /-/"+label+" va ca dong label o pahn tren ma van khogn duoc

Phan Dũng

em test được mà, anh xem lại xem có xóa xót code nào ko.

đây là hình ảnh em đã test :
http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/13/08/46881247492913.bmp

Mà anh đang sử dụng bản nào vậy, nếu bản nâng cao anh phải thêm dòng code :

botnum = 3;

thì nó mới chạy đc.

LouLou

cái này hay thiệt đó bác fD , thanks bác nhá

phattrien@so

Anh xoá bỏ dòng /-/"+label+" của cái bản nâng cao để trở thành +home_page+"feeds/posts/default"?max-results="+numpost... trong cái bản
vne-recent-adv và điền thông tin như ở dưới:

botnum = 3;
numposts = 16;
home_page = "http://www.vnpressnet.com/";

Với đường dẫn tới host lưu của anh cho cái chỉnh sưa file js mà vẫn không được, kiểm tra file js vẫn tốt.

Chán thật, không hiểu lý do gì, anh sửa bằng notepad rồi save liệu có vấn đề gì không?

Phan Dũng

@PTS : chài, anh ơi, nhầm 1 chỗ kìa, sau chữ default ko có dấu " anh à , tức là chỉ có như vậy thôi default?max-results

★☆★ Lê Hữu Tài ★☆★

Ái chà, thủ thuật hay nèk :X

Xin phép FD rinh về roboonline nhoe :D

Àk sẵn tiện rinh cái bản cũ ^^

fandung

cứ tự nhiên Tài à :D

Mr.Cuong

FanDung noi dung day, Em lam thu cung dc
sau chữ default ko có dấu " anh à , tức là chỉ có như vậy thôi default?max-results

phattrien@so

Ok, cái này xong rồi, cám ơn mọi người

phattrien@so

Một vấn ề nhỏ là anh thử nghệm với botnum = 0 là không được

fandung

đúng rồi a Chính, tại thủ thuât này phải có mấy cột bottom-news mới được, và bố cục của thủ thuật là vậy

ngan ling

anh phan dũng ơi thủ thuật này không dùng được với trang chủ à (tất cả các bài đăng)
nếu có thì fix thế nào

fandung

@Ngân Ling : Nếu muốn hiển thị bài cả blog thì bạn sửa trong file JS của thủ thuật.

Download file về, và mở nó bằng Notepad, rồi tìm đoạn code này (nó nằm ở cuối):

...default/-/"+label+"?max-results...

Xóa đoạn code im đậm đi (/-/"+label+")

Rồi upload file lại lên host là xong

SHOPDVD SAIGON

Anh Dũng ơi, làm sao để cái này nó chạy kiểu slideshow ?

Phan Dũng

@SHOPDVD SAIGON :muốn hiện slide show thì làm kiểu khác

Khách (ẩn danh)

cho hoi đoạn mã này chỉ dùng cho drupal 5.x thui hử? co thể dùng cho drupal 6.x ko?vì drupal 6.x ko co module widget này mà nếu được thì đoạn mã này phải dán vào file template nào?

Blog4vn

không biết tại sao cái template này của mình làm không được. Hôm trước dùng cái template khác thì được.

Mong được sự giúp đỡ từ FD và các bạn.
http://blog4vn.blogspot.com

Cám ơn nhiều

STUTVN

Thủ thuật này hay quá Dũng ơi. Mình cũng có áp dụng cho trang blog của mình. Dũng có thể viết 1 file .js mới để có thể hiện thị tất cả các bài viết chứ không phải chỉ theo label giùm mình không. Cảm ơn Dũng trước nghen!!!

TheFire™

thanks fandung nhìu nhé , chúc cho blog bạn ngày càng phát triển :X

TheFire™

ak bạn ơi , nếu muốn recent post cho tất cả bài biết của blog thì xài code js nào vậy ?

TheFire

Mình đọc cm của anh PTS và bạn nên làm đc rùi ^^ xóa đoạn này /-/"+label+" , thanks pạn nhé !!

Admin

Anh ơi chỉ giúp em làm sao tăng cái số lượng bài bằng chữ bên cạnh với ạ :D Blog em hiên được có 8 bài bên cạnh thôi ạ

Hải Đình Nguyễn
Hải Đình Nguyễn

Bạn ơi mình muốn rút gọn tiêu đề bài đăng của cột left-news có được không bạn? Mình thấy để vậy có nhiều bài viết tiêu đề quá dài thì không được đẹp nữa. Bạn chỉ mình với. Mong phản hồi sớm,

don kihote

Bác PHAN DŨNG ơi giúp em cái style recent post của trang aol.com với .em thấy trên này chưa có kiểu đó .mong bác giúp đỡ .
kiểu 1 :
http://i1209.photobucket.com/albums/cc392/desunvn/fd1.jpg

kiểu 2:
http://i1209.photobucket.com/albums/cc392/desunvn/fd2.jpg

don kihote

mong bác Bác PHAN DŨNG sớm về để giúp đỡ anh em !!

Phụ Trách Nhân Sự

lỗi rồi

caycanhnonbo

hichic sao ai cũng làm được mà em không làm được @.@ ~x(

Hoang Nghia

Chào bạn Dũng!
Cho mình hỏi lúc mình bấm vào tiêu đề trong khung Recent Post thì nó sẽ chuyển mình đến nội dung của bài viết đó nhưng ở trên vẫn còn khung Recent Post. Bạn có cách nào làm cho nó chỉ hiện nội dung khi mình nhấn vào tiêu đề chứ không hiện khung Recent Post ở trên đc ko? Cám ơn bạn!

Tuấn Tèo

Anh Dũng cho em xin lại link file js đi. link http://data.fandung.com/blog/demo/vne-recent/vne-recent.js die rồi anh ơi

Hoang Long

cái này giờ bị lỗi không hiển thị được rồi
kể cả link dự phòng


download wordpress, joomla, blogger templates



☺ 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