Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Bài viết này được lấy từ 1 số nguồn trên internet trong khi lang thang .
Dưới đây là hình minh họa, bạn cũng có thể xem ngay trong Blog của mình ngay cuối mỗi bài viết
Dưới đây là hình minh họa, bạn cũng có thể xem ngay trong Blog của mình ngay cuối mỗi bài viết
Cách tiến hành:
- Đăng nhập vào blog
- Chọn Thiết kế
- Chọn Chỉnh sửa HTML
- Chọn mở rộng tiện ích mẫu
- Dán đoạn code bên dưới vào trước thẻ </head> .
<!--Related Posts with thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://dl.dropbox.com/u/66256041/lien-quan/namkna-blogspot/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails-->
- Bạn nên Downloaf file Js bên trên về sau đó upload lên host riêng để sử dụng lâu dai. nếu chưa có host thì bạn tham khảo bài viết đó Tại đây.
6. Tiếp theo: Tìm đến đoạn code tương tự sau:
6. Tiếp theo: Tìm đến đoạn code tương tự sau:
<div class='post-footer-line post-footer-line-1'>
Thêm vào sau nó đoạn code dưới :
<!-- Start Related Posts with Thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" +
data:label.name +
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'
type='text/javascript'/></b:if></b:loop><a
href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'
style='display:none;'>Related Posts with thumbnails for
blogger</a><a href='http://www.bloggerplugins.org/'
style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts with Thumbnails-->
Trong đó:
- var maxresults=5; số 5 là giá trị max số bài viết hiển thị
- var relatedpoststitle="Related Posts"; Bạn có thể thay thế chữ Related Posts thành chữ bạn muốn như: "Bạn cũng có thể xem thêm"
- Save (Lưu mẫu) lại ---> kiểm tra kết quả thế nào nhé !
Mẫu này hiển thị không tốt với nhãn tiếng việt, nếu muốn sử dụng các nhãn tiếng việt bạn có thể tham khảo bài viết khác Tại đây.
Chúc thành công !!!
Nhận xét
ban oi!
Trả lờiXóacua minh hok co: div class='post-footer-line post-footer-line-1'
thi sao day
Amim Trả lời Xtung: bạn vào Bố cục -> chỉnh sửa HTML -> mở rộng tiện ích mẫu
Trả lờiXóaSau đó bạn tìm đoạ code sau:
div class='post-footer-line post-footer-line
bên dưới code này có code
div class='post-footer-line post-footer-line-2'
bạn chỉ cân thay thế code
div class='post-footer-line post-footer-line
bằng code như mình hướng dẫn là Ok
(vì một số blog phía sau div class='post-footer-line post-footer-line không có -1!>
:))
Trả lờiXóatks nhiu` :D
Trả lờiXóa@ bố tướng: bạn nên Download File Js về và upload lên hosting riêng. :D không có hết Banwith thì xẽ không xem được đâu: @-)
Trả lờiXóaCách Up File Js:
http://namkna.blogspot.com/2011/08/huong-dan-su-dung-google-code-e-chua.html
hoặc xem cách mới nhất tại đây:
http://namkna.blogspot.com/2011/08/bai-viet-lien-quan-co-hinh-anh-cho.html
húc thành công!
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaMình Làm Mãi mà không được. Blog mình làhttp://hocdethi.blogspot.com/ nếu có thời gian mong bạn giúp đở. cảm ơn trước
Trả lờiXóa