Style mới cho tiện ích "Recent post" theo label ở Homepage

Ngày Thứ Hai, 12 tháng 9, 2011 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Style mới cho tiện ích "Recent post" theo label ở Homepage
Chúc bạn xem tin tức vui vẻ !!

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

Code

<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";

label = "thu thuat blog";

numposts = 12;

home_page = "http://huunghi-t78.blogspot.com/";

</script>

<script src="http://vietlao2014.googlecode.com/files/VnE-recent%204%20hinh.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:

http://huunghi-t78.blogspot.com/
- 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;

(Tìm đọc lại bài viết của Fandung, chỉnh sửa 1 chút mới hiện được tất cả các bài viết trên Blog.)
☼ 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):

Hình minh họa:

- 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.

Code

<style type='text/css'>
#cotent-news {
border:#999 solid 1px;
width: 607px;
}
#top-news {
width: 405px;
height:190px;
padding:5px;
border:#bbb solid 1px;
background:#eeeeee;
font-size:12px;
}
#bottom-news {
width: 410px;
padding:5px;
}
#bottom-news-item {
width: 131px;
margin-right:5px;
float:left;
}
#left-news {
padding: 5px;
border-left:2px dotted #ccc;
text-align: justify;
}
#left-news a {
color: #555;
}
#left-news a:hover {
color: #f00;
}
</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 = 180;
topheight = 175;
botheight = 110;
botwidth = 130;
fntsize = 12;
vnesize = 16; //kích thước của tiêu đề bài viết trong class &quot;top-news&quot
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = false;
text = "comments";
showPostDate = true;
summaryPost = 220;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 12;
home_page = "http://huunghi-t78.blogspot.com/";

</script>
<script src="http://vietlao2014.googlecode.com/files/VnE-recent%203%20hinh.js" type="text/javascript"></script>

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

[Theo FD's BlOg]