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

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 đăng và comment
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-title và a-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.