Hướng dẫn chèn Related posts vào giữa bài viết Blogspot

Cũng vài ngày rồi mình chưa viết bài nào cho blog cả và cho Thủ thuật Blogspot lại càng lâu hơn. Hôm nay có chút thời gian rảnh lên Facebook thì thấy có bạn hỏi cách chèn bài viết liên (Related posts) quan vào giữa bài viết ừ thì cũng viết một bài viết để hướng dẫn cho các bạn luôn thể. Bài viết này thì thực ra cũng không có gì là khó cả. Nếu như các bạn chịu khó tìm hiểu thì cũng sẽ ra thôi. Các bạn chỉ cần nghĩ thế này thôi nhé!

Nội dung bài viết được quy định bởi <data:post.body/>. Vậy thì chúng ta làm sao mà có thể tách nó ra để chèn vào giữa được? Mới nghe thì có vẻ khó và có khi có những bạn sẽ nghĩ tới những cái sâu xa và cao siêu nào đó. Nhưng nếu các bạn hãy đơn giản hóa nó đi, nghĩ nó một cách thật đơn giản thôi thì kết quả sẽ khác ngay. Trong bài viết “Chèn quảng cáo vào giữa bài viết cho Blogspot” chúng ta đã có thể chèn quảng cáo vào giữa bài viết rồi. Vậy thì có gì mà không chèn bài viết liên quan vào giữa được đúng không nhỉ? Đúng vậy, chúng ta chỉ cần thay đoạn code quảng cáo bằng đoạn code bài viết liên quan là được thôi mà. Chúng ta cùng nhau thực hiện xem sao nhé!

Bước 1: Bước này thì không có gì để nói nữa rồi, các bạn đăng nhập vào blogger.com và chuyển tới menu Mẫu và chọn Chỉnh sửa HTML nhé!

Bước 2: Ở bước này, chúng ta sẽ thay đổi code quảng cáo bằng code của bài viết liên quan. Dưới đây là đoạn code chèn quảng cáo vào giữa bài viết.

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:5px ;">
Code quảng cáo của bạn ở đây
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/x3C!-- ads --x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Còn đây là đoạn code để hiển thị các bài viết liên quan theo Lable của chúng ta.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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'>varmaxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>

OK, sau khi đã có được hai đoạn code này rồi thì cũng không có gì là khó khăn nữa. Chúng ta chỉ cần ghép chúng lại với nhau thôi. Như vậy chúng ta sẽ được một đoạn code hoàn chỉnh như sau:

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:5px ;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/x3C!-- ads --x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Các bạn để ý đoạn này varmaxresults=6 các bạn thay số 6 thành số bài viết bạn muốn hiển thị nha.

Bước 3: OK, bây giờ chúng ta sẽ tìm đến dòng <data:post.body/>, các bạn thay thế dòng này bằng đoạn code trên nhé! Bước này chỉ có vậy thôi, không có gì khó khăn cả.

Bước 4: Bước này thì các bạn không làm cũng được, vì đây chỉ là bước CSS lại cho nó đẹp hơn thôi, các bạn có thể CSS theo ý thích nhé! Các bạn tìm đến thẻ  ]]></b:skin>. Sau đó dán toàn bộ đoạn CSS dưới đây vào trước thẻ đó là được.

#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}

Bước 5: Các bạn lưu Mẫu lại và quay ra xem bài viết nhé! Nếu các bạn không chèn đoạn <!–– ads ––> vào trong bài viết thì nó sẽ tự động chèn vào dưới tiêu đề bài viết đấy!

Được rồi đấy, từ giờ mỗi khi viết bài, các bạn chỉ cần chuyển sang tab HTML và chèn dòng code sau vào nơi muốn hiển thị bài viết liên quan là được nhé!

<!-- ads -->

Chúc các bạn thành công! Các bạn có thể xem DEMO tại:

http://testblogdgm.blogspot.com/2015/06/huong-dan-tao-trang-bao-loi-404-ep-cho.html

Nếu không thực hiện được thì hãy để lại comment nhé!

Update ngày 18/5/2016

Do có nhiều bạn thực hiện cách trên nhưng không thành công. Nay mình bổ sung thêm 1 cách khác mong giúp được các bạn.

Đầu tiên, các bạn hãy copy đoạn code sau và chèn vào trên thẻ </body> trong Template của các bạn.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='display: none; float:center;'>
        <div id='qcbydoiguocmoc'>
            // Code bài viết liên quan 
        </div>
    </div>
    <script>
        $(document).ready(function() {
            jQuery('#qcbydoiguocmoc').appendTo(jQuery('a[name=&quot;more&quot;]')); 
        });
    </script>
</b:if>

Tiếp đến, các bạn hãy khi viết bài thì hãy thêm dấu ngắt dòng vào vị trí bạn muốn hiển thị bài viết liên quan nhé!

Hướng dẫn chi tiết cách dùng thẻ Readmore mời bạn xem qua bài viết: Cách chèn quảng cáo vào bài viết cho Blogspot.

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

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!