Style mới cho tiện ích Recent Post

Từ sau khi hoàn thiện thủ thuật "Recent posts" 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.

Đâ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: 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";

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

</script>
<script src="http://sites.google.com/site/fdblogsite/js/vne-recent-adv.txt" 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ớibotwidth=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-adv.txt” type=”text/javascript”></script>

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

Phan Dũng