Ở 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.
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ước và mà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
- 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:
Chúc các bạn thành công.
hay quá , thanks :D
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
ừh, cám ơn mọi người ủng hộ
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
À không :D , cái firefox bị crash là do cái máy
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
bên mình xem blog trên IE6 đâu có bị gì đâu Ngân
Còn blog tui mà mở bên IE6 là văng ra luôn, ngồi mà cắn lưỡi thôi :(
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 !!!
phải nói là IE nó kén quá, chán nhỉ
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).
Cái này mình biết nên làm ngay luôn :D
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!!
ko phải đâu , 110mb.com bị cúm hay sao ấy , vào demo mà ko nổi . :(
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
có cách nào biến thành cột đứng không anh dũng :d
@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.
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 ?
Đú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
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 :)
ồ, hay thế!, để qua tham khảo coi :D
Đã biết được thủ thuật của Tài, có muốn mình phổ biến nó không ??? :D
Hìhì FD dùng tự nhiên nèk ^^ Mình sẽ không "hận thầm" đâu :D
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
@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 đó
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
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á
http://img213.imageshack.us/img213/1277/err1.jpg
:(( :(( :((
@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
thế thì thêm width: ah bác
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
@Góc Nhìn : trên đó là bài hướng dẫn cho từng nhãn mà bạn.
vậy chỉ cần thêm đoạn target="_blank" vào trong file js là được hả fd
@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ị.
Không hiểu lắm, fd nói rõ hơn 1 chút đc ko :D
@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>';
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
@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
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
:D hẻm cóa chi :)
Cái này hay quá , cảm ơn nhiều !
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
À 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 ....
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.
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
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 ?
a ơi code đó chèn vào đâu vậy
@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.
làm song sao chẳng thấy nó hiện bài viết zậy fandung
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
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
» 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.