Bài viết liên Quan gồm danh sách ảnh và bài viết

Trước đây mình có giới thiệu bài Tạo Bài viết liên quan tuy nhiên thủ thuật này có nhược điểm là chỉ hiện hình hoặc danh sách tiêu đề. Thủ thuật Namkna giới thiệu sau đây sẽ khắc phục 2 nhược điểm đó. Thủ thuật này sẽ xuất hiện 2 phần 1 là danh sách bài liên quan có hình ảnh và một đoạn trích và 1 phần nữa là danh sách bài đăng ở dưới. ngoài ra hiện ngày tháng đăng bài khi chỉ chuột vào bài đăng.

Ảnh minh họa: .

Cách thực hiện như sau:

1. Đăng nhập Blogger

2.Chọn mẫu => Chỉnh sửa HTML sau đó dán đoạn Code bên dưới lên trên thẻ </head>

<!-- Start Related posts by Viettin24h.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://script-viettin24h.googlecode.com/svn/wiki/related post.js' type='text/javascript'/>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0px;margin:10px 0 5px 0}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiKDlbOGmYakydMHKemsH_BbirH8enU6hxpkWT9gczH9r4vDfKbwDR4vsm7qrQdMoQ3vzLjp9X1xkZxa-iZTDCW-9duwr8gdn6-p53oCan5OxSyrgdDfuCGVh0Vp2xkA7ghmxK7_hZAdRf/s1600/anigif.gif) no-repeat scroll left 0 transparent;height: 22px;}
#related-posts a:hover {background-color:#d4eaf2} 
.lienquan {background: #fff;height:57px;float: left;padding-left: 1px;width: 220px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin-bottom:10x; 0;padding: 0;font-size:14px;font-weight:bold;}
.related-posts ul {margin: 0;padding-top: 5px} 
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQ8vxG0o5rN8mMfIByDH0EWQzk7Imd2A2Sq92B0eSfdeLpI3hR0XNdRIV4N5ndv0dkwLdRm0TxY4leLRiGOCU538RorNKirLM17y2J-BByf8A3E8jo0in63xN4VKh4Gs7QB8fSZvS1r0e/s19/icon.jpg) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>
<!-- End Related posts by Viettin24h.com -->

- Điều trỉnh height và width mình tô màu đỏ ở trên cho phù hợp với Blog của bạn nha:D


3. Tìm đến 1 trong các code : <div class='post-footer'>  
  <div class='post-footer-line post-footer-line-1'> 
  <div class='post-footer-line post-footer-line-2'>
 <div class='post-footer-line post-footer-line-3'>

và dán code bên dưới vào sau :

<!-- Related posts by Viettin24h.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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=12&quot;' type='text/javascript'/>

</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=15;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 
  <span style='background-color: white; color: #000; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 20px; text-indent: 10px;'>Các tin khác:</span>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related posts by Viettin24h.com -->

Trong đó các bạn chú ý:

- max-results=15&quot là số bài ở dạng thumbnail

- var maxresults=12 là số bài ở dạng list.

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