Cách tạo related post với ảnh thumbnail sau mỗi bài post trên blogger

Mục đích của các bài Related Post là tạo những liên kết các bài liên quan cùng chuyên mục lại với nhau để người xem có thêm các thông tin bên lề hay mở rộng kèm theo.

Ngoài việc bổ sung thêm thông tin thì nó cũng mang lại nhiều lợi ích khác như:

• Tăng tỷ lệ tương tác
• Giảm tỷ lệ thoát trang (bounce rate) khá tốt cho seo
• Tăng tỷ lệ click sang các bài hay chuyên mục khác

Có nhiều mẫu Related post khác nhau do đó các bạn phải chọn mẫu thích hợp cho trang của mình.
Có một số template mới nhất có cài sẵn mục related post nên các bạn cũng không cần phải chỉnh gì nhiều cho mất thời gian.

Các mẫu related post dược liệt kê theo cùng label

Mục related post được tạo sẵn theo theme cài vào.

Bài này mình sẽ giới thiệu cách tạo các bài liên quan có kèm theo hình thumbnail như bên trên nhé

1. Các bạn vào phần chỉnh sửa Html và copy/paste cái code bên dưới vào trước thẻ </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto}
#related-posts h2{margin-top:10px;background:none;padding:3px}
#related-posts .related_img{margin:5px;border:4px solid #f2f2f2;width:105px;height:105px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out}
#related-title{color:#222;line-height:16px;padding:0 10px;text-align:center;text-shadow:0 2px 2px #fff;width:100px}
#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
#related-title:hover{text-decoration:underline}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKLeOSozdr2-dnCj4_7nlq4hJHP5wBdiaE-S6YEx-ZOANN5MaVXIJahQKtwag25ydvnR43UxJBZGNosJ1s6s_tQI2zo3QMJHU0tTZzqhxGz2qJn56ZsE3TG_EAJ9qx-brUI4ov3JwpTyK/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKLeOSozdr2-dnCj4_7nlq4hJHP5wBdiaE-S6YEx-ZOANN5MaVXIJahQKtwag25ydvnR43UxJBZGNosJ1s6s_tQI2zo3QMJHU0tTZzqhxGz2qJn56ZsE3TG_EAJ9qx-brUI4ov3JwpTyK/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>

Lưu ý các mục  bôi đỏ bên trên có thể chỉnh sửa lại cho  phù hợp trang blog của các bạn.

2. Tiếp theo các bạn copy/paste cái code bên dưới vào  sau dòng lệnh:

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

<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>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>

Các bạn có thể chỉnh sửa số lượng các bài related post xuất hiện bằng cách thay đổi ở dòng lệnh

var maxresults=6;

Đoạn code được pate vào sẽ như thế này

3. Đến bước này các bạn chỉ việc save lại kiểm chứng thành quả của mình vừa làm được.

Chúc các bạn làm thành công . Và nhớ bấm Like hay G + để chia sẽ nếu các thấy bài hay nhé...