Home » » Recent Post Widget with thumbnail images, version 3.0

Recent Post Widget with thumbnail images, version 3.0

Written By 1 on Thứ Năm, 2 tháng 10, 2008 | 06:21

Recent Post Widget (RPW) này là bản nâng cấp lần thứ 3 của RPW trước đây, lần này có bổ sung các thuộc tính và tùy chọn mới như sau:

- Có thể show hoặc không show số comment của bài viết, tùy chỉnh comment label text,
- Có thể show hoặc không show ngày tháng của bài đăng,
- Có thể show hoặc không show một phần nội dung của bài đăng,
- Tùy chỉnh màu viền, màu chữ, các loại font, tùy chọn Icon hiện trước các text.
- Có thể cho hiện có trật tự hoặc ngẫu nhiên các hình ảnh mặc định (ảnh sẽ hiện khi trong bài viết không có bất cứ 1 ảnh nào).
- ....

Dưới đây là code của bản mới nhất:


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


imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";

showRandomImg = true;

tablewidth = 248;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 70;
imgheight = 70;

fntsize = 12;
acolor = "#000";
aBold = true;
icon = " &#8226; ";

text = "cm";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " &rarr; ";

numposts = 10;

home_page = "http://www.vietwebguide.com/";


</script>
<script type="text/javascript" src="http://vietwebguide2.googlepages.com/recentposts_thumb_final.js"></script>




Giải thích các tham số (chữ đỏ trong code, bạn cần thay cho phù hợp với mình):

- Các dòng
imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";

chứa link đến các hình ảnh mặc định, bạn có thể thay thế các link này bằng ảnh của bạn, bạn cũng có thể thêm nhiều hình khác bằng cách tạo thêm các dòng imgr[5]=..., imgr[6]=..... Hãy cố gắng chọn những ảnh có size nhỏ để đỡ làm nặng widget.

- Dòng showRandomImg = true; cho biết đang bật chế độ hiện ngẫu nhiên ảnh mặc định, nếu bạn muốn ảnh hiện có trật tự, hãy thay true thành false.

- 4 dòng

tablewidth = 248;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";


lần lượt là : chiều rộng của widget (pixel), khoảng cách giữa các ô, màu viền của widget và màu nền của widget.

- 2 dòng

imgwidth = 70;
imgheight = 70;


là chiều rộng và chiều cao của ảnh thumbnail.

- 4 dòng

fntsize = 12;
acolor = "#000";
aBold = true;
icon = " • ";


lần lượt là: Font Size của tiêu đề, màu tiêu đề, bật chế độ tô đậm tiêu đề (nếu muốn tắt thì đổi true thành false), icon hiện trước tiêu đề (nếu không muốn có icon thì cho giá trị rỗng).

- Dòng

text = "cm";

khai báo text của comment mà bạn muốn hiện (ví dụ: text = "lời bình"). Nếu không muốn hiện số comment cho mỗi post, đặt giá trị text = "no".

- Dòng

showPostDate = false;

ý nói chế độ hiện ngày tháng đã tắt. Hãy thay false bằng true nếu bạn muốn hiện ngày tháng.

- 4 dòng

summaryPost = 50;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " &rarr; ";

lần lượt là: số kí tự muốn hiện miêu tả cho mỗi posts (nếu muốn tắt, hãy đặt giá trị là 0), Font Size của miêu tả, màu miêu tả và icon hiện trước phần miêu tả.

- Dòng

numposts = 10;

yêu cầu bạn khai báo số bài sẽ hiện trên widget, ví dụ ở trên là 10.

- Dòng

home_page = "http://www.vietwebguide.com/";

yêu cầu bạn khai báo địa chỉ blog hiện tại đang sử dụng của bạn. Đừng quên 1 điều quan trọng là thêm dấu soẹt ngược (/) vào cuối link như tôi đã thêm nhé.

Đấy là toàn bộ những cái cần thiết, có thể bây giờ bạn thấy nó có quá nhiều tùy chọn và "khó sử dụng" ? RPW này đã qua nhiều lần nâng cấp nên số tùy chọn đã phải tăng lên (Tuy nhiên không làm chậm blog đi hơn những cái trước đâu). Nếu bạn muốn sử dụng ở dạng đơn giản, có thể xem những bài phiên bản trước của tôi ở đây:

- Các đặt widget "Bài Gần Đây" bên dưới mỗi bài viết
- Widget "Bài Gần Đây": Hỗ trợ hiện ảnh thumbnail cho mỗi post
- Widget các bài gần đây: bản update lần 1,2

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

( nguồn http://www.vietwebguide.com - có gì thắc mắc các bạn cứ qua blog anh ấy mà hỏi nhe )

0 nhận xét:

Đăng nhận xét