Xem demo ở đây : LIVE DEMO
☼ 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):
- 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.
- 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.
tuyet qua..test ngay moi duoc
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é
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ả.
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ị đó.
uh nhỉ em đọc chưa kĩ cảm ơn anh nhiều,anh reply nhanh ghê.
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
đú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.
Chít!! Viết nhầm đó FD :D:D:D
thử xem nào....
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.!
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.
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.
@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.
tuyệt vời
thanks bác dung trước nha :D
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
@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.
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?
@PTS : đúng rồi mà anh, anh phải bỏ cả đọan như thế này /-/"+label+"
Lam y nhu chi dan cua em, anh xoa bo /-/"+label+" va ca dong label o pahn tren ma van khogn duoc
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.
cái này hay thiệt đó bác fD , thanks bác nhá
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?
@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
Á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ũ ^^
cứ tự nhiên Tài à :D
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
Ok, cái này xong rồi, cám ơn mọi người
Một vấn ề nhỏ là anh thử nghệm với botnum = 0 là không được
đú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
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
@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
Anh Dũng ơi, làm sao để cái này nó chạy kiểu slideshow ?
@SHOPDVD SAIGON :muốn hiện slide show thì làm kiểu khác
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?
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
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!!!
thanks fandung nhìu nhé , chúc cho blog bạn ngày càng phát triển :X
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 ?
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é !!
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 ạ
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,
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
mong bác Bác PHAN DŨNG sớm về để giúp đỡ anh em !!
lỗi rồi
hichic sao ai cũng làm được mà em không làm được @.@ ~x(
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!
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
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
» 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.