Related Posts - Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger

Trước đây chúng ta 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 blogger giới thiệu sau đây sẽ khắc phục 2 nhược điểm đó. Thủ thuật blogger 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.

>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh cho Blogger

>>Navbar - Thủ thuật làm trong suốt thanh Navbar trong Blogger
>>Label / Archive - Thủ thuật hiện tiêu đề trong Label / Archive của BLogger
>>Chữ nhấp nháy - Thủ thuật tạo chữ nhấp nháy trong Blogger
>>Slide JQuery - Thủ thuật tạo Slide JQuery cho Blogger
>>Comments - Thủ thuật đánh số cho bình luận trong Blogger
>>Comments - Thủ thuật đánh số cho nhiều hơn 200 bình luận trong Blogger
>>Popular Posts - Bài viết phổ biến cho Blogger - Version 1
>>Chèn quảng cáo Google Adsense...vào bài viết trong Blogger
>>Related Posts - Tạo bài viết liên quan cho Blogger

 

Để hiểu rõ hơn các bạn có thể xem hình minh họa bên dưới.

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

Bước 1: Các bạn vào Thiết Kế => 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 thietkeblogger.net -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://thietkewebplus.googlecode.com/files/related-thiet-ke-blogger-net.js' type='text/javascript'/>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNY3d3lVrw1NAHoUd_3VzKQEC8h6nEAGsP7b-1BwkourxSZvRti3x9JWz8Pcy8icroWi3bTwEHw9TeVg4525ANz6cu0QpjAFLDS6f_uCH5qvD62g-phwohd5gP2gcDl5ddI55SD13JAk/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2} 
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px} 
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCicDRdqsILmc13HfI06p1GZxd5njQ54RPV9w9lXeW4lfuQ_EkBypiXPmSZPlOXzQhHzt0YO-8FcBNYD182C-_7c0Glat5qLueOCfYGqKj0Ex3C8Ul3mNvnibszzj_EbfsBrcvxF5g_kF/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</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 namkna.blogspot.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.
Lưu Template lại.

Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

<div class='post-footer-line post-footer-line-2'/>

hoặc

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

Code:

<!-- Related posts by thietkeblogger.net -->
<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=9&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOuWX9B8P6Y8tdRWOKyJWNVIQzffZ1sdbj6qp519nsenlzfOAwP3WBGcqLhiCNuGEfEDXq8LBd3V-FKfo854F0bIiX6mIm5F2uFtWxmXisn94QlfqLAEhCjZDVWrTMAUGYsD3L2fgTCA/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<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 thietkeblogger.net -->

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

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

- var maxresults=12 là số bài ở dạng list.
Ngoài ra các bạn có thể xem thêm các thủ thuật blogger dành cho bài viết liên quan tại đây.