Loading post navigation ...
 
 

Pro page

56
Nhận xét

Tiện ích "Related Posts" với hiệu ứng mô tả bài viết

| by Phan Dũng | views

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

Theo yêu cầu của bạn LouLou (luomlatblog.blogspot.com)
[FD's BlOg] - Tiện ích "Bài viết liên quan"(Related Posts) là một trong các tiện ích không thể thiếu cho mỗi bài viết. Nó giúp người xem dễ dàng truy cập vào các bài viết khác tương tự. Và tiếp theo chuỗi ứng dụng của hiệu ứng mô tả bài viết, hôm nay theo yêu cầu của bạn LouLou mình sẽ tiếp tục ứng dụng nó cho tiện ích các bài viết liên quan.
Đã fixed lỗi - và có thay đổi 1 chút về code CSS + Link JS

Hình ảnh minh họa:


Thủ thuật này sẽ lấy ra một số bài viết mới nhất (ví dụ 5 bài) từ các link RSS của mỗi nhãn trong bài viết làm list các bài liên quan. vì thế nếu bài viết của bạn có nhiều nhãn thì các bài liên quan cũng sẽ nhiều hơn. Ví dụ bài viết có 2 nhãn ta sẽ có 2x5= 10 bài viết liên quan.
Do kiến thức về javascript của mình còn ít ỏi, nên thủ thuật này mình chỉ có thể làm được như thế. Và thủ thuật này vẫn phát triển từ thủ thuật recent post của VWG.

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chọn mở rộng mẫu tiện ích
5. Chép tất cả đoạn code bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
.mota-desc{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-desc:hover{
background-color: transparent;
z-index: 50;
}

.mota-desc span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-desc span img{
border-width: 0;
padding: 2px;
}

.mota-desc:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:70px;
width:250px;
background:#ddd;
text-align: justify;
}

#related-posts {
padding-top:40px;
}

#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
</style>


<script language='JavaScript'>
imgr = new Array();

imgr[0] = "http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif";


showRandomImg = true;

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#555";
aBold = true;
motacolor = "#f00";

text = "Nhận xét";

showPostDate = true;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;

home_page = "http://www.fandung.com/";

</script>

<script src='http://data.fandung.com/blog/demo/newposts-Description/style2/desc-related-post3.js' type='text/javascript'/>

- Lưu ý:

+ imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả .
+ fntsize = 12; : size chữ của tiêu đề bài viết
+ acolor = "#555"; : màu của tiêu đề bài viết
+ motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
+ summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
+ summaryFontsize = 12; : size chữ của phần mô tả
+ summaryColor = "#000"; : màu chữ của phần mô tả
+ numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 bước 7.
+ home_page = "http://www.fandung.com/"; : thay bằng địa chỉ URL của blog bạn


6. Tiếp tục xuống dưới, tìm đoạn code sau :
<data:post.body/>

7. Thêm vào sau nó đoạn code bên dưới:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>
<b:loop values='data:post.labels' var='label'><b>Nhãn : </b><font color='#FF0000'><data:label.name/></font><br/>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;' type='text/javascript'/>

</b:if>
</b:loop>

</div>

</b:if>

8. Save template.

- Lưu ý : (update 18/06/2009)

+ Do tên của các class trong code CSS của thủ thuật này trùng với tên của các class trong các thủ thuật Recent posts mà mình đã post, nên mình có 1 chút thay đổi so với bài viết ban đầu.
+ Cụ thể : tên của class mota sẽ đổi lại thành mota-desc, và file JS đổi lại thành file desc-related-post3.js . Các bạn xem và sửa lại nhé.

Cáo lỗi với các bạn vì sự cố này.

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


Enter your mail address:

56

Góc Nhìn

Thủ thuật rất hay, tuy nhiên sẽ làm blog load lâu hơn

fandung-tester

không lâu đâu bạn, mình đã test thử rồi.

Khách (ẩn danh)

sao mình làm toan bị báo lỗi không ah Fandung?

Unknown

sao không đc nhỉ ! làm như hưỡng dẫn khi lưu lại thì nó báo lỗi đoạn orderby phải cóa ";" kết thúc ! không hỉu sao nữa !

Quang Minh

Fandung oi, sao e làm nó cứ báo lỗi như vậy ko à:
"Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The reference to entity "orderby" must end with the ';' delimiter."

fandung

ủa, ai cũng bi lỗi à, để mình xem lại.

Thành Công

làm cái này hay(dynamic) nhưng mà load lên hơi bị nặng :|

fandung-tester

sorry mọi người, tại mình quên đổi kí tự & trong đoạn code javascript thành chuỗi thay thế &amp; nên mới bị báo lỗi này.

Nếu ai rành thì sẽ biết được lỗi này, thông thường các đoạn javascript khi đưa vào trong code template (trong thẻ <body>) phải được mã hóa, ko nó sẽ ko hiểu. tương tự như khi ta đưa code quảng cáo vào vậy đó, nếu bê nguyên code của nó vào sẽ báo lỗi tương tự như trường hợp này, hoặc ko báo lỗi thì sẽ không hiển thị được.

fandung-tester

@Thành Công : cái này ko phải là dynamic bạn à, phần hiển thị mô tả đó hoàn toàn chỉ dùng CSS thôi, chứ ko có sử dụng javascript. Javascript ở trên chỉ là để truy xuất các bài liên quan thôi. Cũng như các thủ thuật Relate Posts khác , thủ thuật này chỉ thêm đoạn code CSS để hiển thị phần mô tả thôi.

LouLou

quá tuyệt , thank bác đã đáp ứng
việc load nặng thì ko sao , mình có thể điều chỉnh số post được mà
một lần nữa thank bác fD nhá X

fandung

Cuối cùng thì tác giả yêu cầu cũng comment :D

LouLou

lỗi mất rùi bác fD ơi
ở code .7 nó bảo chưa đóng thẻ div, b:loop must be terminated with end tag ...
?>!

Phan Dũng

ừ đúng rồi, mình thật là bất cẩn, tại hồi nãy sửa lại code javascript chắc copy rồi đè lên nó mất rồi, đề mình fix lại .

Yeusuckhoe

Khi tìm data:post.body thì thấy có hai cái data:post.body . Không biết chèn sau cái nào. Cái đầu tiên của code trình bày ảnh dạng thumb. FD xem chèn sau thằng nào ta. Thanks ;))

LouLou

hu sao em hok thấy hiện j` hết vầy
có phải remove related post cũ k bác ?!

Phan Dũng

@LouLou : tốt nhất là remove cái cũ đi.

Có thể xem demo mà anh thực hiện ở đây:
http://fandung-test.blogspot.com/2009/05/test-image-background-for-each-author.html

@Yeusuckhoe : em không rõ 2 cái thẻ data:post.body của anh sao, tốt nhất là thêm sau 2 thẻ đó. Nếu không được thì thử lại. Thực ra đây chỉ là code chọn vị trí để cho widget này hiển thị thôi.

LouLou

phù cuối cùng cũng được
mệt xì khói
:D :D :D :) :) :)

Phan Dũng

@LouLou: được rồi à :D :D .

Yeusuckhoe

Làm được rồi, chèn sau thằng thứ 2. Thằng thứ 1 là của code hiện bài theo ảnh thumb. Cám ơn FD nhiều. Quả là cao thủ.

LouLou

hoàn thành ! với bài 3 nhãn thì load hơi lâu ko đáng kể vd : http://luomlatblog.blogspot.com/2009/06/sock-voi-tieu-xao-bien-hoa-vet-thuong.html
ah` bác Zũng này , hình như nếu dùng kết hợp với widget recent post /w thumbnail có mô tả thì các mảng css nó bị đè nhau hay sao ấy
ở phần css của widget related post em đặt phần mota hover width là 400, lúc đầu thấy thế thật nhưng khi load xong widget recent post nó lại chuyển sang width 220 đã định sẵn trong mota hover của widget recent post

fandung-tester

uh mình quên mất cái này, tại nó trùng class đó, được rồi, cái này dễ thôi, mình sẽ fix lại lần nữa. Bạn theo dõi sau nhé.

PB

Các bác làm ơn chỉ cho em bik chỗ nào chỉ "related post mà ko có mô tả" vậy?

fandung

@Oliver : bạn có thể tham khảo 1 trong 2 bài viết dưới

http://fandung.blogspot.com/2009/05/widget-bai-viet-lien-quan-co-su-dung.html

http://fandung.blogspot.com/2009/02/thu-thuat-blog-cach-tao-cac-bai-lien.html

Anh2

Mình ko thể tìm thấy cái code này : data:post.body Mình phải làm sao? Bạn giúp mình nhé! Thanks http://vnruby.blogspot.com/

Phan Dũng

@Mr.Nguyễn : sao lại ko có đc nhỉ. Thực ra việc tìm code này để định vị trí của widget trong blog thôi. Ngoài ra bạn có thể chèn widget này ngay phía trên footer của bài viết. Bằng cách tìm đoạn code sau :

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>


Và chèn code của thủ thuật vào trước đoạn code vừa tìm được

Anh2

Minh cung ko tim dc code do luon! Du minh da dung phim F3 de tim cho nhanh ma cung kho dc. Dung giup minh ngien cuu tai temple cua Minh voi! Sao moi nguoi lam dc ma cua minh lai khong nhi???(Sorry vi may bi loi Vietkey)

fandung

@Mr.Nguyễn : à, hay là bạn chưa nhấn chọn "Mở rộng mẫu tiện ích", các đoạn code mình đưa là nhưng đoạn code chính của blog, ko thể nào ko co được bạn à.

Anh2

Minh ấn rùi đó chư!!! Mà mình dùng phím F3 để tìm mà.Lam sao ma thoát dc.hihi. Co cách nào ko Dũng ơi! tẤT CẢ NHỮNG THỦ THUẬT YÊU CẦU TIM CAI CODE TRÊN MÌNH CHỊU CHẾT LUÔN.cẢ CÁI LÀM BÀI VIẾT LIÊN QUAN NỮA.

fandung

@Mr.Nguyễn : mình cũng ko biết làm sao luôn. bạn thử gửi code full của template cho mình xem

Unknown

Hay quá :D , không ngờ cái này nhẹ dữ vậy . Thank :D

Unknown

Oái !!! Cái này phải để Feed Full mới xem hiện được hình hả Dzũng ???

Unknown

à !! Chỉnh màu cho cái (86 nhận xét)(28 jun 2009) của phần mô tả bằng cách nào ???

fandung

@NgânKVN : uh phải để full mới hiển thị ảnh thumbnail đc Ngân à, còn cái màu của nhận xét và ngày đăng là code này nè Ngân :

acolor = "#555";

Phan Dũng

ko ngờ cái tiện ích này của mình nhiều người dùng quá. :D, một niềm khích lệ lớn :)

Unknown

Tầm bậy tàm bạ :|
acolor = "#555" mà màu của cái tiêu đề mà :w

Phan Dũng

đúng mà Ngân, nó trùng với màu của nhân xét và ngày đăng luôn đó, đây là code gốc của Anhvo, nếu Ngân muốn mình sẽ đưa ra đoạn code để ngân chỉnh sửa màu cho phần nhận xét.

Phan Dũng

Dưới đây là file JS mình đã chỉnh sửa, Ngân hãy thay thế nó cho file JS trong thủ thuật

http://fandung.110mb.com/JS-files/newposts-Description/style2/desc-related-post3(1).js

và thêm đoạn code này vào trong code thủ thuật (thêm vào sau dòng acolor = "#555"; cho dễn nhìn)

bcolor = "#555";

Đoạn code mình thêm là để tùy chỉnh riêng cho màu chữ của phần nhận xét & ngày đăng

Unknown

OK , rất ư là xinh đẹp :D

Khách (ẩn danh)

Bạn ơi trong bài này nếu áp dụng ko có phần mô tả thì làm sao nên bỏ khúc code nào.
À còn link hình này: http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif
là sao vậy mình thay hình khác đc ko?

Phan Dũng

@Vĩnh Phước : nếu không dùng mô tả thì bạn xem bài viết này :

http://fandung.blogspot.com/2009/05/widget-bai-viet-lien-quan-co-su-dung.html

còn muốn thay hình khác thì bạn đổi link trong code này là đc.

imgr[0] = "http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif";

Virgovn®
Khách (ẩn danh)

À bài đó mình test rồi, mình thích kiểu hiện bài viết liên quan của bài này hơn nhưng ko bik chỉnh sao cho ko hiện mô tả.

Unknown

Fan Dzũng làm cho ảnh trong mô tả giữ đúng tỉ lệ đc không ??? Để mầy méo mó quá !!!

fandung

@Ngân : muốn giữa tỉ lệ đơn giản thôi Ngân à, chỉ cần quy định cho nó chiều cao hay độ rộng là đc, 1 trong 2, còn cái còn lại tự động canh chỉnh theo.

Mà cái này sửa trong code JS, Ngân muốn tùy chỉnh theo chiều nào, rộng hay cao, nói mình sửa rồi mình đưa link file cho.(nếu Ngân biết sửa thì càng tốt)

Unknown

Dzũng ơi mình thử xóa trống giá trị của cái chiều cao của ảnh đi (imgheight = ;) thì script ko chạy nữa , xóa hẳn thành phần imgheight đi thì cũng ko chạy . Thế ý Dzũng là làm thế nào ???

Phan Dũng

@Ngân : Ngân phải xóa trong code của file Javascript, chứ không phải trong đọan code javascript trên. Nếu Ngân xóa trong đọan code trên thì file JS sẽ không tìm thấy biến thay thế, vì thế nó ko chạy là đúng rồi.

Ngân vào trong file JS đó, tìm tới thẻ img của ảnh trong phần :

var trtd = '...';

tìm trong đọan 3 chấm đó dòng code này width="'+imgwidth+'" hoặc height="'+imgheight+'" xóa 1 trong các đọan này là ảnh sẽ tự giữ kích thước. Nếu muốn quy định độ dài cố định theo chiều nào thì giữ code của chiều đó lại.

Unknown

Làm đc rồi , thank nhé :D nhìn rất đẹp .

Còn một vấn đề nữa là đối với các ký tự liền nhau trong phần mô tả ( hình minh họa)- thì nó ko biết cách ngắt xuống dòng làm cho phần mô tả bị rộng ra nhìn rất xấu .

Mình nghĩ cái này chỉnh đc bằng css "overflow" nhưng ko biết chọn giá trị gì đây ???

Unknown

À quên : đấy là trên IE6 :D , nên nếu ko khắc phục đc cũng ko sao , thằng IE6 cùi quá mà :(

ucmasnb

anh Dũng ơi của em nó hiện cả bài mới nhất tức là bài đang xem ý anh xem lại giúp em với >"<

Unknown

http://fandung.110mb.com/JS-files/newposts-Description/style2/desc-related-post3.js

die rùi bạn ơi up lại lên đi

Fiat Trịnh Xuân Thọ

Đến lượt mình thì ...thôi rồi,hình như pad con xài nhiều nên nó hết chạy nổi ~x(

Đinh Xuân Tùng

Xong file này rồi anh Dũng ơi!

http://fandung.110mb.com/JS-files/newposts-Description/style2/desc-related-post3.js

:(

Ngo Quoc Thanh

ANH DUNG AH?SAO E KHÔNG LÀM ĐƯỢC ANH NHỈ?E GÀ VỀ BLOG LẮM A CÓ THỂ CHỈ BẢO CHO E CHÚT ĐƯỢC KHÔNG ANH :http://vetauhanoi-sapa.blogspot.com/

Khách (ẩn danh)
Nguyen Thanh Phu

anh fandung ơi giúp em với, hiện tại em làm theo hướng dẩn trên thì h blog của em lại bị chuyển về http://data.fandung.com/ :((

LoveScenario

js chết rồi :o



☺ 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