Loading post navigation ...
 
 

Pro page

24
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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


Enter your mail address:

24

Chinhnd

Cám ơn, anh sẽ thử nhé.

share4vnn.tk

cái này luột đó anh dũng à.:D
thanks bác nha !

Phan Dũng

ờ :D

Chinhnd

(tạo 1 widget HTML/Javascript rồi dán toàn bộ code bên dưới vào).

Chỉnh sửa home_page và các label 1 2 3 4 mà sao nó không hiện ra hả FD ơi.

fandung

em hiểu vì sao rồi anh PTS à, để em fix lại bài viết chút.

Sorry vì sự bất cẩn này.

fandung

@PTS : Em đã fix rồi, anh xem thử coi hiển thị đc chưa, em đã test trên blog test của em rồi. ko có vấn đề gì nữa.

Khách (ẩn danh)

thủ thuật này gặp rất nhiều lỗi với IE bác ạh

phattrien@so

Dung' nhu du doan, hom truoc anh view source code casi trang demo cua em, nen da copy don dau paste vao tren head, nhung copy khong chi phan trong style nen ko chay duoc ^_^

fandung

@PTS : chủ yếu là đọan JS có mấy cái nhãn Label1, Label2,... . Nếu ta copy đọan code này và dán và trong widget HTML/Javascript thì nó bị lỗi code JS liền, do kí tự ' trong code sẽ tự động chuyển thành " . Nên dẫn đến đọan JS ko chạy.

CÒn nếu copy nó vào trong code template thì template sẽ báo lỗi ngay. Vì thế cuối cùng ta phải chuyển tất cả các kí tự đặc biệt trong đọan code JS này và dán nó vào trong code template là xong.

Admin :

với IE nó hiện rất xấu và lệch :(

fandung

uh, mình cũng nghe mấy bạn khác nói về cái này, mình cũng chưa biết khắc phục.

Mika Group

CAm On FD cung cap cac bai viet that su qua hap dan .Chuc Anh suc khoe doi dao de tiep tuc phat trien vung manh trang nay nha Anh ! Pro_mikanguyen

Phan Dũng

cám ơn lời chúc sức khỏe của mikanguyen nhiều

Unknown

Fandung ơi ! Có thể hướng dẩn mình làm 1 cái như trên nhưng trình bày theo chiều dọc ko

Khách (ẩn danh)

sao mình làm giống như trên mà chỉ hiện ra src='http://fandung.110mb.com/JS-files/news-recent/rd-label_znews/setupfeeds.js' là sao vậy FDung? Nhờ FD hướng dẫn dùm.thank's

fandung

@VT : bạn muốn hiển thị theo chiều dọc thì sửa code height:120px; trong id z-news (code CSS) thành width:120px; , và thay đổi lại hình nên nằm ngang lại cho thích hợp.

Tức là ban đầu bạn thiết lập chiều cao cho id z-news để các phần tử trong nó được xếp theo hàng ngang, khi bạn thiết lập độ rộng cho id này width:120px (độ rộng này phải lớn hơn độ rộng của các phần tử trong nó) khi thấy độ rộng của id z-news ko đủ để cho các phần tử xếp thành hàng ngang thì tự động nó sẽ nhảy xuống hàng, như thế ta sẽ được 1 bố cục theo hàng dọc.

@Lê Vũ : bạn thử lại xem, các bạn khác thực hiện đc mà

Đinh Chí Hiếu (C.E.O)

Mình làm rồi ,nhưng cũng k ra dc cái hình ,chỉ chuất hiện http://www.sieuthimaybo.com/ ,mình hình trống không..CHo mình cách khắc phục nhé >>0909 530 110

fandung

để mìh test lại xem có bị lỗi gì ko. rồi sẽ trả lời sau

Đinh Chí Hiếu (C.E.O)

Fandung ơi cho mình cách khắc phục nhé.

Khách (ẩn danh)

Sao mấy file js của anh trên 110mb hết hoạt động cả rồi...anh up lại hết chưa a fandung

Phan Dũng

bạn cứ chờ chút đi, mình đang up lại, mình up từ bài cũ nhất trở lên, có thể có 1 số bài sẽ không còn, nhưng đa số sẽ up lại đc hết

Huy Tập

anh FD ơi sao em lam ko đươc nhỉ

Vision79

Anh Dũng ơi. Thủ thuật này hay quá. Nhưng test trên IE8 thì bị lỗi rồi. Hic. tiếc qua đi... mong anh fix lại dùm sớm

Unknown

anh oi may cai demo voi file js nay die het rui` :(



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home