Chèn Bài viết liên quan vào giữa bài viết

Cũng giống như cách chèn mã quảng cáo vào giữa bài viết, cách chèn bài viết liên (Related posts) quan vào giữa bài viết cũng rất đơn giản và rất dễ thực hiện.

Nội dung bài viết được quy định bởi <data:post.body/>. 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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYyM_AG4tqgI-Fm5faBebqzvnwZwsrK0q9dZwmTpBU82KsLC-Uq3T3SGTZ_HEESJ6NKokwAuZ_qnrREgJqvxFIA6c3hucJW0Z6mt6xef2dWt6ySSVgN9VXzLLe_I39WSZdHyygBNgkJFQ/'};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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYyM_AG4tqgI-Fm5faBebqzvnwZwsrK0q9dZwmTpBU82KsLC-Uq3T3SGTZ_HEESJ6NKokwAuZ_qnrREgJqvxFIA6c3hucJW0Z6mt6xef2dWt6ySSVgN9VXzLLe_I39WSZdHyygBNgkJFQ/'};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é!

Nguồn: doiguocmoc.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..