Loading post navigation ...
 
 

Pro page

52
Nhận xét

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

| by Phan Dũng | views

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

Cập nhật yêu cầu của bạn Tài (roboonline.tk)- (1/7/2009)
[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 thumnailtiê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ướcmàu sắc của các khung (tùy chỉnh code 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


☼ 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)
- 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 jQuery, 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 CSS, như thế nó sẽ nhẹ hơn.

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

Hình ảnh minh họa:


- 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, chiều cao 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 code CSS của class zmota:hover span trong code bên dưới :

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 = "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>

- 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://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-post.js


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


Enter your mail address:

52

Max4download

hay quá , thanks :D

Khách (ẩn danh)

Quá tuyệt, tuy ko blog tui ko áp dụng thêm nhiều nữa nhưng để sưu tầm những bài hay này sau này thế nào cũng sẽ cần tới nó :) cám ơn FD rất nhiều

fandung

ừh, cám ơn mọi người ủng hộ

NganKVN

Phát hiện ra hai điều :

1.Blog Fan Dũng hôm nay vào luôn làm FireFox của mình bị Crash

2.Trên IE6 tất cả chữ tiếng việt tại HomePage đều bị lỗi Font

Unknown

À không :D , cái firefox bị crash là do cái máy

fandung

Bị mất font trên IE mình cũng hay thường gặp ở 1 số trang khác, ko chỉ riêng mìh, nhưng không thường xuyên, mình cũng ko hiểu vì sao nữa

fandung

bên mình xem blog trên IE6 đâu có bị gì đâu Ngân

Thành Công

Còn blog tui mà mở bên IE6 là văng ra luôn, ngồi mà cắn lưỡi thôi :(

Unknown

Kết luận một câu Blog Fan Dzũng chạy tốt :D , chẳng qua do IE6 ở mỗi máy lại có một bệnh khác nhau !!!

fandung

phải nói là IE nó kén quá, chán nhỉ

Ác Quỷ

Trời trời cứ tưởng nói chơi mà FD update thiệt, tuyệt quá FD ôi :X

P/s: Nhìu chiện tý nha, IE 6 lỗi font thì làm zdì nè: Vào View >> Encoding >> Unicode (UTF-8).

Phan Dũng

Cái này mình biết nên làm ngay luôn :D

Unknown

anh dũng ơi!!
File js bị die hay sao áh anh mà nó ko hiển thị cả cái file js hiển thị bài trên nabvar anh fix lại nhé!!
thanks anh!!

Khách (ẩn danh)

ko phải đâu , 110mb.com bị cúm hay sao ấy , vào demo mà ko nổi . :(

Unknown

tuyệt nhưng tiếc là mình hết chỗ đặt rồi :(

Sonnie Tran

Không có style 3 hả anh Dũng! Hihi! Đùa chút! Cái này hay quá. Đánh dấu để dành sau này có dịp xài. Hihi

Tuấn Nguyễn

có cách nào biến thành cột đứng không anh dũng :d

fandung

@Tuấn P.H.A : có chứ bạn, bạn muốn nó làm cột đứng thì chỉnh lại kích thức của class #zart và thay đổi lại hình nên là được

Như ở trên mìh chỉ đặt chiều cao cho class #zart giờ bạn chỉnh lại là đặt chiều rộng, như thế các khung bài viết sẽ tự động xuống hàng, thành cột ngay.

Ác Quỷ

Hình như là cái code lúc chưa update thì nó bị tràn khi tiêu đề bài viết dài quá thì fải :-?

Mà có thể nào làm cho nó hiện các bài trong 1 nhãn ngẫu nhiên được ko FD ?

Phan Dũng

Đúng rồi Tài, vì vậy hãy chỉnh độ rộng của class #z-title để cho nó bao đủ tiêu đề.

Hiện bài trong 1 nhãn ngẫu nhiên hơi khó, hiện giờ mình chưa thể làm được

Ác Quỷ

Tình hình là mình đã làm thành công mĩ mãn (có random nữa ^^) Mình cũng đã áp dụng cho roboonline. Cảm ơn FD rất nhiều :)

fandung

ồ, hay thế!, để qua tham khảo coi :D

fandung

Đã biết được thủ thuật của Tài, có muốn mình phổ biến nó không ??? :D

Ác Quỷ

Hìhì FD dùng tự nhiên nèk ^^ Mình sẽ không "hận thầm" đâu :D

Góc Nhìn

Cái này hay quá, nhưng mình muốn nó mở ra cửa sổ mới khi click vào thì làm sao hả FD

Phan Dũng

@Góc Nhìn : à cái này phải tùy chỉnh trong file JS, chỉ cần thêm đoạn target="_blank" là đc.

Bạn muốn dùng style nào để mình sửa file JS đó

LouLou

cái này đẹp ghê
bác fD ơi bác làm nó chạy từ phải wa trái, dừng lại khi rê chuột đc hok ạk

LouLou

bác fD ơi tại sao em cứ bị lỗi 2 ảnh là nó nhảy xuống dòng chứ ko đc 1 hàng ngang vậy
mặc dù độ rộng lớn nhất đủ chứa 4 ảnh 1 hàng ngang nhưng kể cả để 3 ảnh thì ảnh thứ 3 vẫn bị nhảy xuống dòng dưới bó tay wá

LouLou

http://img213.imageshack.us/img213/1277/err1.jpg
:(( :(( :((

Phan Dũng

@LouLou : à, bạn xem lại vùng hiện thị của bạn đi nhé, trong id #z-news của mình không có đặt độ rộng, nhưng theo trong hình thì nó chỉ hiển thị được bằng 1/2 độ rộng của vùng hiển thị thôi.

Có thể chỗ bạn đặt tiện ích nó bị chia làm 2 thì phải

LouLou

thế thì thêm width: ah bác

Góc Nhìn

Mình định dùng cái mà áp dụng cho từng nhãn fd ạ, fd hướng dẫn cụ thể hơn một chút đc ko :P

Phan Dũng

@Góc Nhìn : trên đó là bài hướng dẫn cho từng nhãn mà bạn.

Góc Nhìn

vậy chỉ cần thêm đoạn target="_blank" vào trong file js là được hả fd

Phan Dũng

@Góc Nhìn : bạn phải thêm cho đúng chỗ đó nha, trong thẻ <a> đó, thêm sai là file JS ko chạy đâu đó.

@LouLou : không cần phải thêm độ rộng bạn à, tự nó sẽ rộng bằng vùng hiển thị.

Góc Nhìn

Không hiểu lắm, fd nói rõ hơn 1 chút đc ko :D

fandung

@Góc Nhìn: bạn download file JS của mình về, rồi mở nó lên, tìm đoạn code như thế này :

var trtd = '<div id="zart"><div id="za-content"><a class="zmota" href="'+posturl+'"><img src="'+img[i]+'" width="'+zimgwidth+'" height="'+zimgheight+'"/><span>'+posttitle+'</span></a></div></div>';

nó nằm ở phía dưới đó, sau đó thêm đoạn code in đậm như bên dưới:

var trtd = '<div id="zart"><div id="za-content"><a class="zmota" href="'+posturl+'" target="_blank"><img src="'+img[i]+'" width="'+zimgwidth+'" height="'+zimgheight+'"/><span>'+posttitle+'</span></a></div></div>';

LouLou

bác fD ơi cái này trên IE nó bị làm sao ấy
bác nghiên cứu fix giùm em zới

Phan Dũng

@LouLou :nó hiển thị không được đẹp lắm trên IE6, mình chưa khắc phục được. Mấy cái vụ này mình còn "mờ" lắm

Góc Nhìn

Cảm ơn FD nhiều lắm, phiền fd quá :D
Tại mình gà :D
Cảm ơn FD một lần nữa :P

Phan Dũng

:D hẻm cóa chi :)

Jeffy

Cái này hay quá , cảm ơn nhiều !

Unknown

Dũng Ơi , mình dùng kiểu hai , loại áp dụng cho toàn blog - không thấy hiện gì

Chỗ Label : mình để Truyen Tranh Dai thì nó chịu hiện , nghĩa là cái file js Dzũng nói dùng cho toàn blog là ko đúng rồi , nó vẫn đòi phải chọn một nhãn nhất định

Unknown

À giờ thì hiện rồi . Nhưng làm sao để nó chỉ cố định một chiều cao thôi đc ko ???? để vầy nó cái bẹt cái dài ....

Phan Dũng

Ngân nói cái dài, cái bẹp là nói về phần tiêu đề hiển thị khi rê chuột đó hả, nếu đúng là cái này thì Ngân có thể rút gọn tiêu đề lại để cho nó hiển thị đều nhau hết.

Điện Tử ChipKool

anh gioi java/scrip the.em nguong mo anh qua.em hi vong anh se viet ra ngay cang nhieu code hay nha.vietkey cua em co van de.em viet ko co dau.hihi

Khách (ẩn danh)

Cái này hay nhưng tiếc là đến thời điểm này file JS hok còn dùng được nữa anh có thể sửa lại k ?

nhocboy

a ơi code đó chèn vào đâu vậy

Phan Dũng

@nhocboy: bạn muốn chèn vào đâu cũng được, chọn chỗ cần chèn rồi thêm widget HTML/Javascript rồi dán code mình đưa vào.

Unknown

làm song sao chẳng thấy nó hiện bài viết zậy fandung

Khách (ẩn danh)

Tìm kiếm thông tin BDS tại Homedy nhanh nhất tại đây:

Tìm chung cư giá rẻ Nam Từ Liêm https://homedy.com/ban-can-ho-gia-re-quan-nam-tu-liem-ha-noi
Tìm căn hộ giá rẻ Cầu giấy Hà Nội https://homedy.com/ban-can-ho-gia-re-quan-cau-giay-ha-noi
Tìm căn hộ Giá rẻ Hà Đông https://homedy.com/ban-can-ho-gia-re-quan-ha-dong-ha-noi
Tìm chung cư giá rẻ quận Bình Thạnh https://homedy.com/ban-can-ho-gia-re-quan-binh-thanh-tp-ho-chi-minh
Tìm chung cư giá rẻ quận 2 HCM https://homedy.com/ban-can-ho-gia-re-quan-2-tp-ho-chi-minh
Tìm chung cư giá rẻ quận 9 HCM https://homedy.com/ban-can-ho-gia-re-quan-9-tp-ho-chi-minh

Khách (ẩn danh)

Tìm kiếm thông tin BDS tại Homedy nhanh nhất tại đây:

Tìm thuê chung cư Mini Ba Đình https://homedy.com/cho-thue-can-ho-mini-quan-ba-dinh-ha-noi
Tìm thuê chung cư Mini Bắc Từ Liêm https://homedy.com/cho-thue-can-ho-mini-quan-bac-tu-liem-ha-noi
Tìm thuê chung cư Mini Hai Bà Trưng https://homedy.com/cho-thue-can-ho-mini-quan-hai-ba-trung-ha-noi
Tìm thuê chung cư Mini Phú Nhuận HCM https://homedy.com/cho-thue-can-ho-mini-quan-phu-nhuan-tp-ho-chi-minh
Tìm thuê chung cư Mini quận 2 HCM https://homedy.com/cho-thue-can-ho-mini-quan-2-tp-ho-chi-minh
Tìm thuê chung cư Mini Tân Bình HCM https://homedy.com/cho-thue-can-ho-mini-quan-tan-binh-tp-ho-chi-minh



☺ 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