TabNEWS hiển thị bài viết từ 1 nhãn Random

[FD's BlOg] - Đây là 1 bài viết mở rộng từ bài viết : "Tạo tab news giống trang mp3.zing.vn'. Với bài viết này, tabnews sẽ hiển thị các bài viết từ 1 nhãn bất kì trong blog của bạn, tức là mỗi lần load trang sẽ hiển thị các bài viết khác nhau.

Đây là thủ thuật mình tham khảo từ blog của bạn Tài (roboonline.blogspot.com)

Xem Demo : LIVE DEMO

Hình ảnh minh họa:

☼ Các bước thực hiện :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

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

&lt;script type="text/javascript"&gt;
tabnews = new Array(3);
tabnews[0] = "\&lt;div id='z-news' \&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'Label1'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js' \&gt;\&lt;/script\&gt;\&lt;/div\&gt;";
tabnews[1] = "\&lt;div id='z-news' \&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'Label2'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js' \&gt;\&lt;/script\&gt;\&lt;/div\&gt;";
tabnews[2] = "\&lt;div id='z-news' \&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'Label3'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js' \&gt;\&lt;/script\&gt;\&lt;/div\&gt;";
tabnews[3] = "\&lt;div id='z-news' \&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'Label4'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js' \&gt;\&lt;/script\&gt;\&lt;/div\&gt;";


index = Math.floor(Math.random() * tabnews.length);
&lt;/script&gt;

4. Save template
5. Tạo 1 widget HTML/Javascript và dán code bên dưới vào:

<script type='text/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 = 6;
home_page = "http://www.fandung.om/";
</script>

<script type='text/javascript'>
document.write(tabnews[index]);
</script>

- Một số lưu ý:

+ Thay đổi các code màu xanh cho thích hợp.
+ Chú ý code màu đỏ, nếu bạn dùng n nhãn thì đoạn code màu đỏ sẽ là tabnews = new Array(n-1);

Một gợi ý nhỏ nhỏ cho việc trang trí thủ thuật :

- Như các bạn thấy trong code trên, tất cả các nhãn đều dùng chung 1 id là z-news để trang trí, để cho đẹp hơn (chủ yếu tạo hình nền khác nhau cho mỗi nhãn) bạn hãy tạo các id riêng cho từng nhãn, khi thế mỗi lần load ta sẽ được 1 hình nền (như trong bài viết nó nằm bên trái) khác nhau, như thế sẽ bắt mắt hơn, và sẽ không đơn điệu như việc chỉ hiển thị 1 hình nền.
- Ví dụ ta sẽ tạo 4 id tương ứng với 4 nhãn như ở trên:

#z-news-1 {
height:120px;
background:url(link ảnh 1) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left:30px;
}

#z-news-2 {
height:120px;
background:url(link ảnh 2) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left:30px;
}

#z-news-3 {
height:120px;
background:url(link ảnh 3) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left:30px;
}

#z-news-4 {
height:120px;
background:url(link ảnh 4) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left:30px;
}

- Và ta sẽ sửa code JS (ở bước 3)lại 1 chút như bên dưới:

tabnews[0] = "\&lt;div id='z-news-1'\&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'label1'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js'\&gt;\&lt;/script\&gt;\&lt;/div\&gt;";

tabnews[1] = "\&lt;div id='z-news-2'\&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'label2'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js'\&gt;\&lt;/script\&gt;\&lt;/div\&gt;";

tabnews[2] = "\&lt;div id='z-news-3'\&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'label3'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js'\&gt;\&lt;/script\&gt;\&lt;/div\&gt;";

tabnews[3] = "\&lt;div id='z-news-4'\&gt;\&lt;/script\&gt;\&lt;script\&gt;label = 'label4'\;\&lt;/script\&gt;\&lt;script src='http://data.fandung.com/blog/demo/news-recent/rd-label_znews/setupfeeds.js'\&gt;\&lt;/script\&gt;\&lt;/div\&gt;";

- Chỉ đơn giản như thế là ta đã làm đẹp hơn cho tiện ích này.

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