Loading post navigation ...
 
 

Pro page

17
Nhận xét

Widget bài viết liên quan - Có sử dụng CSS

| by Phan Dũng | views

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

Related Posts Widget for Blogger / Blogspot (using CSS + Java)
[FD's BlOg] - Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn ở cuối mỗi bài viết) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn.



Xem hình minh họa kết quả:


Hình minh họa thủ thuật:


☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Nhấn chọn "Mở rộng mẫu tiện ích" (Expand widget template)
5. Chèn đọan code bên dưới ngay trên dòng code </head>

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://fandung.110mb.com/JS-files/fd-Related_posts.js' type='text/javascript'/>
- Nên download file java Related_posts.js về và up lên host của bạn, để tránh hết bandwidth

6. Tiếp tục tìm đến dòng <data:post.body/> và chèn đọan code bên dưới ngay sau nó:

(Lưu ý nhỏ : đối với những blog có hack tiện ích đọc thêm (Read more...) thì việc bạn đặt code bên dưới trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>)

<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>
<font color='#FF0000'>
<b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

- Bạn có thể sửa các code màu xanh theo ý bạn.
- <font color='#FF0000'> : đây là code mã màu của nhãn (Label)

7. Save template lại là xong.

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


Enter your mail address:

17

Lê Trần Ngự Vũ

sao mình làm mà ở dưới cùng hiện dòng chữ More tips here [?] là sao vậy FD. hướng dẫn mình cách xóa nhé.thank's

Lê Trần Ngự Vũ

mình đã hỉu rồi, sửa lại file java Related_posts.js là được rồi.

fandung

đúng rồi bạn :D

Khách (ẩn danh)

Bạn ơi cho mình link gốc bài này đc ko!

fandung

@new_men : Bản gốc là tiếng anh, bạn có thể vào google mà search. Bài viết này mình chỉ tham khảo file JS, còn các hình minh họa cũng như trình bày là hoàn toàn của mình.

Lê Duy

mình chi chạy được cai widget cua LinkWithin thoi, con cai nay khong chay duoc

Mr.Gà Kon

em lam con hok dc nua~ , de duoi cai data body no hok hien len j` , con de cai line 3 thi no hien may chu~ ma hok hien bai viet lien quan

Phan Dũng

kì thía, thủ thuật này nhiều người dùng rồi, đâu việc gì đâu các bạn. thử lại xem nhé

Make Design :D

File Js die rồi anh ơi, anh up lại đi

fandung

link đây bạn ah
http://data.fandung.com/js/fd-Related_posts.js

Daily.188Bet

Link die rui.Cac ban download ve rui upload len host khac ma xai.

TOBU

Sao trong file fd-Related_posts.js fandung lại chèn quảng cáo thế? :D

Nguyễn Quốc Trung

Cái file đó đâu ùi? Share lại nhé bạn!

»-Heo&Kun-»

Nên download file java Related_posts.js về và up lên host của bạn, để tránh hết bandwidth
Anh lam ho em cai nhe gui cho em gmail: tinhyeuenter2011@gmail.com , em cam on anh nhieu!

Nguyễn Duy Hải

Mình mới lập cái blog, mong mọi người giúp đỡ :)

Thao Trinh

ồ! cái này ko hiển thị kèm ngày tháng năm ?

Quân Lê

Sao mình làm mãi mà không được nhỉ, admin có thể xem dùng mình được không ?



☺ 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