Bài viết này cũng tương tự dạng hiển thị theo gallery, nhưng ở bài này mình chỉ cho nó hiển thị trên cùng 1 hàng, mang phong cách tương tự như trang mp3.zing.vn.Ở bài viết này mình chỉ hiển thị ảnh thumnail và tiêu đề bài viết, như thế sẽ hợp lý hơn cho tab.
Hình ảnh minh họa:
Hình ảnh từ trang mp3.zing.vn
Hình ảnh từ thủ thuật này
Rút kinh nghiệm từ các thủ thuật trước, ở thủ thuật này mình đã đổi lại tất cả các biến thay thế trong code JS, để tránh gây ra xung đột.
☼ Và đây là code của thủ thuật:
<style type="text/css">
#zart {
height:108px;
margin-right: 3px;
float:left;
width:100px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}
#z-title {
height:40px;
}
#z-content {
height:50px;
padding-top:5px;
}
#z-news {
height:120px;
background:#ccc url(http://farm4.static.flickr.com/3656/3677502552_3f0c38be7d_o.gif) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left: 30px;
}
</style>
<div id="z-news">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
zimgwidth =100;
zimgheight =70;
zfntsize = 12;
zacolor = "#555";
zaBold = true;
text = "no";
showPostDate = false;
numposts = 6;
label = "Love";
home_page = "http://www.fandung.com/";
</script>
<script src="http://data.fandung.com/blog/demo/news-recent/zart-label.js" type="text/javascript"></script>
</div>
- Các bạn hãy tùy chỉnh lại kích thước và màu sắc của các khung (tùy chỉnhcode CSS) cho phù hợp với blog của bạn. (xem hình minh họa bên dưới để hiểu rõ hơn)
- Nếu muốn hiển thị bài viết mới của cả blog thì các bạn đổi link JavaScript thành link bên dưới:
http://data.fandung.com/blog/demo/news-recent/zart-post.js
0 nhận xét:
Đăng nhận xét