Hướng dẫn tạo 'bài viết cùng chủ đề' có ảnh thu nhỏ

Hôm nay tranh thủ chỉ thêm cho các bạn cách tạo liên kết các bài viết cùng chủ để ở dưới bài viết !
Kết quả sau khi làm :



1.Đầu tiên các bạn login vào Blogger dashboard > Layout > Edit HTML rồi nhấn tích vào "Expand Widget Templates" check box !
Lưu ý: Trước khi thực hiện mọi thao tác sữa đổi thì nên back-up để sau này có sự cố còn khôi phục !
2.Các bạn tìm dòng sau đây :
</head>
Và thay thế bằng đoạn code bên dưới :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3.Tìm dòng sau :
<div class='post-footer-line post-footer-line-1'>
Rồi thay thế bằng đoạn code bên dưới :
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
4.Bạn có thể tùy chỉnh số bài hiển thị bằng cách thay đổi giá trị ở dòng dưới :
var maxresults=5;
5.Để thay đổi tiêu đề mục liên kết bài viết thì thay đổi dòng sau :
var relatedpoststitle="Related Posts";
6.Để thay đổi hình ảnh mặc định , bạn chỉ cần thay đổi dòng sau bằng 1 link ảnh với kích thước 72x72
http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png
Ngoài ra bạn nào thạo CSS thì có thể tự Edit thêm bằng tay ^^!
Chúc các bạn thành công !
Previous Post Next Post