Thursday, October 14, 2010

Tiện ích Bài viết liên quan trên Blogger

Thật tuyệt khi dưới mỗi bài viết trên blogger của bạn có link hiển thị các đường dẫn đến các bài viết có cùng chủ đề liên quan. Các bài viết có cùng chủ đề được chọn từ các bài viết khác trong cùng chủ đề, nhãn, cú pháp. Nhờ thủ thuật này thì độc giả trên blog của bạn không còn phải tốn thời gian nhiều khi tìm kiếm các bài viết liên quan.

Sau đây là hướng dẫn thao tác thủ thuật.

Bước 1: Đăng nhập vào Blogger của bạn. Đến Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML). Nên back up Template hiện thời của bạn trước khi thay đổi. Chọn Mở rộng Mẫu tiện ích (Expand Widget Template).

Bước 2: Thêm đoạn mã bên dưới vào trước thẻ mở </head>.

<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Georgia,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
#related-posts a{color:blue}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block; background : url("http://bit.ly/hqynkc") no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Bài viết liên quan&quot;;
</script>
<script src='http://hacodeproject.googlecode.com/files/relatedposts.js' type='text/javascript'/>

Chú ý: Bạn nên tải file hình rss.png và file relatedposts.js được đánh dấu màu xanh về rồi upload lên webhost của bạn để tránh hạn chế băng thông.

Bước 3: Tìm đoạn mã <div class='post-footer-line post-footer-line-3'>. Sau đó thêm đoạn mã sau đây vào dưới đoạn mã vừa tìm.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Để thay đổi số bài viết tối đa được hiển thị trong mỗi nhãn, chủ đề, hãy thay đổi số theo ý muốn trong đoạn mã var max-results=7.

Lưu Template và bạn sẽ có kết quả như ý.

No comments:

Post a Comment