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


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

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


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

</script>
<script src="http://fandung.110mb.com/JS-files/vne-recent/vne-recent(fix).js" type="text/javascript"></script>

- Nhưng code màu đỏ là nhưng chỗ mà mình đã chỉnh sửa lại.
- link file JS dự phòng:

<script src="http://sites.google.com/site/fdblogsite/js/vne-recent%28fix%29.txt" type="text/javascript"></script>


☼ Bản nâng cao của thủ thuật
- Với bản nâng cao này, các bạn có thể tùy chỉnh số bài viết ở class bottom-news.
- Code của thủ thuật sẽ thay đổi 1 chút như bên dưới:

...
...
...
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

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

</script>
<script src="http://fandung.110mb.com/JS-files/vne-recent/vne-recent-adv.js" type="text/javascript"></script>

- với code botnum = 3; là code điều chỉnh số bài viết hiển thị ở class bottom-news
- Với bản nâng cao này, đòi hỏi bạn phải chỉnh sửa nhiều về phần kích thước trong code CSS để có được hiển thị như mong muốn.
- Xem hình minh họa bên dưới:

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

============
Theo Fandung

0 comments:

Post a Comment