10/1/10

Thủ Thuật tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails đã từng được chúng ta biết đến qua sự hỗ trợ của linkwithin.com .Tuy nhiên nếu sử dụng như vậy sẽ khiến blog của bạn phần nào mất đi tính chuyên nghiệp. hôm nay mình sẽ hướng dẫn các bạn 1 cách khác.được là chuyên nghiệp hơn


ảnh minh họa của thủ thuật bài viết liên quan kèm ảnh Thumbnails

Trước tiên hãy đăng nhập vào blog --> vào bố cục --> chỉnh sửa HTML -> Mở rộng Mẫu Tiện ích  ( nhớ save kẻo thất bại nhé:D )


Sau đó tìm đến thẻ   </head>


và chèn trước nó đoạn code dưới đây



<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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://lethuan.110mb.com/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Sau đó hãy tìm đến đoạn code tương tự sau đây

<div class='post-footer-line post-footer-line-1'>
và thay thế nó bằng đoạn code dưới đây


<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&amp;max-results=6&quot;' 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=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Hãy chú ý phần mình tô màu đỏ nhé  var maxresults=5; các bạn có thể thay 5 bằng 1 giá trị khác.. đây là max só bài viết hiển thị
 ngoài ra có thể thay thế Related Posts bằng cụm từ khác như bài viết liên quan chẳng hạn


và bây giờ hãy save template lại và xem kết quả thui
Disqus Comments