Bài viết liên quan trong blogspot với ảnh thumnail

Để blog của bạn trở nên sinh động và dễ dàng giới thiệu những bài viết hay đến cho nhiều người thì tin liên quan là thứ không thể thiếu cho blog của bạn, có rất nhiều cách để làm điều đó, hôm nay mình xin giới thiệu  lại cách tạo bài viết liên quan với hình ảnh thumnail của bài viết hiện tại, các tin liên quan này sẽ hiển thị ở dưới cùng bài viết và được chọn cùng danh mục , label và tag của bài viết đó. Như hình mình họa dưới đây:

Các bạn chỉ cần làm theo các bước sau đây :
Bước 1 : Đăng nhập vào Blogger : Dashboard >>Design >>Edit HTML;
Bước 2 : Click chọn ” Expand widgets template “.
Bước 3 : Tìm đoạn code

</head>

Sau đó copy và paste đoạn code sau ngay trên thẻ </head>:

<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiVbG4fYTcdE4fXaOowxE9gJWPvf9a9NXzh37ZZhpYy73WLcxN0ycxBczMUCiCnj_aloFzusY0RU0RkaDlyl3TZhvwdR2f4hZ-r_6u18Sxym0YM_49z8SrKKBLTXghAoBvKzKeOuKnFjoq/s1600/noimage.png";


var maxresults=5:;


var splittercolor="#d4eaf2"; 

var relatedpoststitle="Related Posts"; 

</script> 

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' 

type='text/javascript'/> 

<!-- remove --></b:if> 

<!--Related Posts with thumbnails Scripts and Styles End-->

Trong đó:

 var maxresults=5: số lượng tin hiển thị

Bước 5 : Bây giờ các bạn nhấn Ctrl + F và  tìm đoạn code sau :

<div class='post-footer-line post-footer-line-1'> 

Nếu các bạn không tìm thấy thì tìm đoạn này :

<p class='post-footer-line post-footer-line-1'> 

Hoặc :

<data:post.body/>

Bước 6 : Copy và paste đoạn code bên dưới ngay dưới những đoạn code mà chúng ta tìm thấy ở bước

<!-- 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=5&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://viettin24h.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVeDF2bP9OB0GGjlTnxmGqF342b0jojWRmYO27Oye4jauWrTwb40PjhVojNAeJtuEt35u_zOB2fmQI8Sseb3mNE7F_OSSUKc4fRxPJoJ5dfq_4BhppU42OqPfULPfQ7ipdJO-uA2nrN31/s1600/best






+blogger+tips.png'/></a>


</b:if></b:if>


<!-- Related Posts with Thumbnails Code End-->

Chú ý :  Thay đổi giá trị 5 từ max-results=5 với số bài viết mà bạn muốn hiển thị

Bước 7  : Lưu lại và xem kết quả

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