Tạo tab news hình ảnh cho blog

☼  Style của tiện ích Recent posts hiển thị trên cùng 1 hàng.
đâ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:55px;
padding-top:5px;
}


#z-news {
height:120px;
background:#ccc url(http://dothang.googlecode.com/files/hinhanh1.png) 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 = 5;
label = "Ảnh chụp bằng ĐTDĐ";
home_page = "http://www.dothang.name.vn/";


</script>
<script src="http://dothang.googlecode.com/files/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://dothang.googlecode.com/files/zart-post.js

☼ Style hiện thị tiêu đề khi rê chuột vào ảnh

và đây là code của style này :

<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 = "Ảnh chụp bằng ĐTDĐ";
home_page = "http://www.dothang.name.vn/";

</script>
<script src="http://dothang.googlecode.com/files/desc-zart-label.js" type="text/javascript"></script>

</div>

- Code trên là dùng cho từng nhãn, nếu muốn hiển thị bài viết của cả blog thì các bạn đổi link Javascript ở trên lại thành link bên dưới:

http://dothang.googlecode.com/files/desc-zart-post.js