Tạo tab news giống trang mp3.zing.vn

[FD's BlOg] - Bài viết này mình sẽ giới thiệu cho các bạn 1 style khác của tiện ích Recent posts. 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.

Xem demo ở đây : http://data.fandung.com/blog/demo/news-recent/zingnews.html

Ở 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

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 , để tránh gây ra xung đột.- Các bạn hãy tùy chỉnh lại và của các khung (tùy chỉnh ) cho phù hợp với blog của bạ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 thành link bên dưới:- Theo như yêu cầu, style thứ 2 này sẽ có chỉnh sửa đôi chút. Thay vì tiêu đề luôn hiển thị thì giờ nó chỉ hiển thị khi rê chuột vào ảnh. Thủ thuật này mình từng gặp ở hiệu ứng , nhưng ở bài viết này mình sẽ không sử dụng nó, thay vào đó mình sẽ chỉ sử dụng , như thế nó sẽ nhẹ hơn.- Xem ở đây : - Các tùy chỉnh tương tự style ban đầu. Chỉ có thêm phần hiển thị tiêu đề bài viết, của vùng hiển thị này sẽ phụ thuộc và độ dài của tiêu đề bài viết, do đó bạn hãy tùy chỉnh các kích thước sao cho hợp lý nhất. Để tùy chỉnh vùng hiện thị tiêu đề, các bạn có thể điều chỉnh trong phần của class trong code bên dưới :và đây là code của style này :- Code trên là dùng cho từng , nếu muốn hiển thị bài viết của thì các bạn đổi link ở trên lại thành link bên dưới:

Hình ảnh từ thủ thuật này

code JS

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

kích thướcmàu sắccode CSS(xem hình minh họa bên dưới để hiểu rõ hơn)

JavaScript

http://data.fandung.com/blog/demo/news-recent/zart-post.js

☼ Style 2 : Hiện thị tiêu đề khi rê chuột vào ảnh (Yêu cầu của bạn Tài - Roboonline.tk)
jQueryCSS

demohttp://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zingnews.html

Hình ảnh minh họa:

chiều caocode CSS zmota:hover span

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

.zmota{
position: relative;
z-index: 0;
text-decoration:none;
}

.zmota:hover{
background-color: transparent;
z-index: 50;
}

.zmota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #fff;
text-decoration: none;
font-family:arial;
font-size:11px;
}

.zmota span img{
padding: 0px;
text-decoration: none;
}

.zmota:hover span{
padding:2px 5px 2px 5px;
visibility: visible;
bottom: 0px;
left:0px;
width:90px;
background:#000;
line-height:15px;
}
</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 =100;
zaBold = true;

text = "no";
showPostDate = false;

numposts = 5;
label = "Love";
home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-label.js" type="text/javascript"></script>

</div>

nhãn cả blogJavascript

http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-post.js

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