Loading post navigation ...
 
 

Pro page

23
Nhận xét

[ Yêu cầu ] : Tạo widget recent posts (Hiển thị dạng Gallery) cho các Nhãn

| by Phan Dũng | views

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

Theo yêu cầu của bạn Cowboyvn (www.seosite1.com)
[FD's BlOg] - Bài viết này vẫn sẽ sử dụng tiện ích recent posts của Anhvo để hiển thị bài viết mới theo nhãn. Điểm chính trong yêu cầu này là bố trí việc hiển thị bài viết theo dạng Gallery, tức là chỉ hiển thị tiêu đề và ảnh thumbnail. Các ảnh thumbnail sẽ được bố trí theo 2 hoặc 3 cột tùy theo ý thích của mỗi người.

Xem demo trực tiếp ở đây: http://data.fandung.com/js/recentposts-gallery/index.html

Hình ảnh minh họa:

Như đã nói ở trên, bài viết này mình sẽ chỉ nói rõ việc trang trí cũng như bố trí hiển thị các bài viết sao cho hợp lý, còn việc tùy chỉnh trong code của thủ thuật Recent posts mình sẽ chỉ nói sơ qua thôi.

☼ Đây là code của thủ thuật: (tạo 1 widget HTML/Javascript rồi dán tất cả code vào)

// Code CSS
<style type="text/css">
#art {
height:221px;
margin-right: 15px;
margin-bottom:15px;
float:left;
width:250px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#a-title {
height:64px;
border-bottom:2px #ccc solid;
}

#a-content {
height:150px;
padding-top:5px;
}
</style>

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

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;

imgwidth =250; // độ rộng của ảnh thumbnail
imgheight =150; // chiều cao của ảnh thumbnail
ftcm = 2; // kích thước chữ của dòng hiển thị ngày đăngcomment
fntsize = 16; // kích thước chữ của tiêu đề bài viết
acolor = "#f00"; // màu chữ của tiêu đề bài viết
aBold = true;

text = "Nhận xét"; // Nếu không muốn hiện comment thì thay "Nhận xét" bằng "no"
showPostDate = true; // Nếu không muốn hiện ngày đăng thì sửa true bằng false
poston ="Ngày đăng :";

numposts = 6;
label = "Love"; // nhãn cần hiển thị
home_page = "http://fandung.blogspot.com/"; // thay bằng địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/js/recentposts-gallery/art-label.js" type="text/javascript"></script>

- Có thể bỏ các dòng chú thích màu xanh.

☼ Sau đây là hướng việc chỉnh sửa code CSS:
- Đầu tiên các bạn hãy xem hình minh họa của bố cục hiển thị bài viết như bên dưới:
- Cơ bản của thủ thuật này ko phải là sử dụng thẻ table để hiển thị dạng gallery như hình minh họa, mà là thủ thuật xếp các thẻ <div> theo hàng.
- Trong đoạn code CSS ở trên ta sẽ có 3 class, đó là art, a-titlea-content.

a. Class a-title : đây là vùng hiển thị tiêu đề bài viết và hiển thị 1 chút thông tin về bài viết.
- Ở class này ta chỉ quan tâm tới chiều cao (height:64px;) của nó, sở dĩ ta đặt chiều cao cho nó là để cho các bài viết có cùng khung hiển thị giống nhau, nếu bạn ko đặt chiều cao cho class này thì với các bài viết có tiêu đề dài ngắn khác nhau sẽ tạo nên chiều cao của khung hiển thị bài viết khác nhau, như thế sẽ ko đồng nhất.
- Nếu bạn không muốn hiển thị phần thông tin bài viết thì chỉnh chiều cao của class này nhỏ lại cho hợp lý.

b. Class a-content : đây là vùng hiển thị ảnh thumbnail
- Chiều cao (height:150px;) của class này bạn hay điều chỉnh bằng với chiều cao của ảnh thumbnail.
- padding-top:5px; : lệnh này dùng để căn lề trên cho ảnh

c. Class art : đây là vùng hiển thị bài viết.
- height:221px; : chiều cao của class này được tính bằng công thức như sau : 64px + 150px + 2px + 5px = 221px (64px : là chiều cao của class a-title, 150px : là chiều cao của class a-content, 2px : là đường bo bên dưới của class a-title, 5px là căn lề trên của class a-content). Hãy tính toán đúng như trên để có 1 bộ khung hợp lý.
- margin-right: 15px; , margin-bottom:15px; : 2 lệnh này dùng để giãn cách các khung của bài viết cho hợp lý.
- width:250px; : độ rộng này được điều chỉnh bằng với độ rộng của ảnh thumbnail. và hãy điều chỉnh cho phù hợp với vùng hiển thị widget (sẽ nói ở bên dưới).

☼ Tùy chỉnh việc hiển thị các khung bài viết trong vùng hiển thị :

- Như đã nói ở trên, đây là thủ thuật xếp các thẻ div nằm trên 1 hàng ngang, do đó để điều chỉnh bố cục của các khung này ta sẽ điều chỉnh ở phần độ rộng.

- Nếu muốn hiển thị các khung dạng 2 cột (như hình minh họa) thì độ rộng của vùng hiển thị của bạn phải lớn hơn 2 lần độ rộng class art + tất cả các khoảng cách căn lề. Cụ thể trong hình minh họa, độ rộng của khung phải lớn hơn giá trị : 554px = 2*250px + 2*15px + 2*(1px +1px) +2*(5px + 5px).

- Nếu độ rộng của vùng hiển thị nhỏ hơn giá trị trên (cho dù là 1px) thì các khung sẽ chỉ hiển thị 1 cột.

- Với cách tính trên, để hiển thị 3 cột thì độ rộng của vùng hiển thị phải lớn hơn giá trị sau : 831px = 3*250px + 3*15px + 3*(1px + 1px) + 3* (5px + 5px).

- Ngoài ra bạn có thể điều chỉnh ngược lại, tức là từ độ rộng của vùng hiển thị suy ngược lại độ rộng của class art.

- Để giới hạn cho vùng hiển thi, bạn có thể đặt tất cả các code của thủ thuật vào trong thẻ <div> và đặt độ rộng cho thẻ <div> này.


Những hướng dẫn ở trên có vẻ hơi tỉ mỉ, nhưng cũng ko quá phức tạp. Những ai rành về CSS thì chắc không cần xem hướng dẫn của mình cũng có thể điều chỉnh được việc hiển thị các bài viết sao cho hợp lý với blog của mình. Tuy nhiên nó cũng rất cần cho nhưng người mới bắt đầu.

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


Enter your mail address:

23

share4vnn.tk

cái này hay đó..test cái coi

share4vnn.tk

anh dũng post bài khuya thế??

Thành Công

mấy bữa bay bận quá hôm nay mới coi tiếp được bài của FD :D

fandung

@Thuấn : cũng đâu khuya lắm đâu em, 12h30 là ra lò rồi mà.

Đa số anh post bài khuya, tại ban ngày bận, rồi tối đá banh tới 9h đêm. Với lại bạn ngày anh bận test các thủ thuật nữa, test xong xuôi rồi tối anh cho ra lò.

Quang Minh

Hay quá, vậy có cách nào cho trang chủ hiện 3,4 cột luôn. Còn các sidebar ở 2 bên biết mất ở trang chủ không ta

Lê Công Tiến

Bữa giờ về wê, hôm nay lên lại vô Blog của FD thấy wá trời thủ thuật!! FD nổ lực vì blogspot ghê ta!^.^ Chúc FD sức khỏe nha.

fandung

@Tiến : cám ơn bạn nhiều nha, về quê giờ mới lên à, hôm bữa vào 1 số blog cũng biết Tiến về quê. :D

@Quang Minh : mình sẽ thử. cảm ơn ý tưởng của bạn, cái này mình cũng có nghĩ rồi, nhưng chưa thực hiện được.

KID_KTV2K

cái này rất hay và hữu ích :)

fandung

@KID_KTV2K : cám ơn bạn đã ghé thăm blog của mình.

Lê Công Tiến

@FD: Trời đất?! Sao mà wa mấy blog khác biết Tiến về wê vậy ta? Chắc là nhìu chuyện nên Tiến đi rêu rao khắp nơi:"Zìa wê, zìa wê..." wá! hahaha :))

fandung

@Tiến : tình cờ thôi, chứ không cũng đâu biết Tiến về quê

cowboyvn

Hihi! Mới post hỏi anh thử ai dè a ra lò nhanh quá. Cảm ơn anh FD nhiều nha. À anh FD ơi! Em chợt nghĩ ra thử làm cách nào ra thumnail luôn thì hay quá anh. Em thử sử dụng mấy cái cũ anh đưa thì ko thấy được. Là gallery rồi ra thêm cái thumnail cho ảnh to hơn nữa thì số dzách rồi. Hihi! Cảm ơn anh đã giúp em nha

Phan Dũng

@Cowboyvn : tức là hiện ảnh to hơn khi rê chuột vào phải ko em, nếu dùng như cách mô tả trong các bài recent anh sợ không được, do bị ảnh hưởng bởi độ rộng, khi đó sẽ sinh ra nhiều rắc rối.

Anh có biết 1 cái jQuery show ảnh rất đẹp, để thử coi đưa nó vô đc ko.

cowboyvn

Dạ đúng rồi. Hoặc có thể hiện phần mô tả recent post có thumnail như một số style recent post a đã hướng dẫn. Chỉ giờ là chỉnh lại kích thước hình thumnail và cho số chữ hiện lên là 0 cũng có thể ra hiệu ứng tương tự

Quang Minh

Fandung ơi, zậy làm sao cho nó hiển thị toàn bộ bài viết chứ không theo label nữa? Giúp zới

fandung

@Quang Minh : bạn download file javascript về, rồi mở file JS bằng Notepad, tìm đến đoạn code này (nằm ở cuối)

document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

xóa đoạn code này đi : /-/"+label+"

save file lại và up lại lên host để dùng, như thế có thể hiển thị bài viết của cả blog

[!!]Mưa[ -(¯`v´¯)--(¯`v´¯)»]Ngâu[!!]

Anh Dũng ơi sao để cho cái tiêu đều (tức cái a-title) nó nằm bên dưới (bottom) vậy anh >?<

fandung

@Mưa Ngâu : cái này phải chỉnh trong code của file JS :D

Khách (ẩn danh)

Cái này file java script die rồi! Fan Dũng up lại dùm mình được ko? Mình tìm trong mấy file down ở ngoài trang chủ cũng ko có

Khách (ẩn danh)

file java bị die rồi bạn ơi có thể post lại file đó ko?
còn nếu như mình chỉ muốn hiện 1 cột chứ ko phải 2 cột giống hình minh họa ở trên thì làm giống vậy hay phải làm cách khác hả bạn

Linh Dung

Phân trang cho tiện ích này được không hả anh Dũng!

Dung Minh Nguyen

Quá khó,không theo kịp. :((

Sáng Phan

Chắc tại code .js , post đã lâu, giờ không còn dùng được nữa thì phải. Nếu có thể, nhờ FD xem lại giúp anh em nhé..



☺ 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