الصفحة الرئيسية
Tiện ích

Bài liên quan- Related posts với hình ảnh cho blogspot

Đây là thủ thuật tạo bài viết liên quan- Related Posts với hình ảnh cho blogspot không hiện thị bài đang xem.

Tiện ích các bài viết liên quan giúp cho khách truy cập blogspot có thể tìm được các bài viết khác cùng chủ với bài đang đọc một cách nhanh chóng nếu họ có nhu cầu.

Thủ thuật gồm 3 kiểu bài viết liên quan- Related Posts bao gồm hình ảnh, tiêu đề bài viết, ngày tháng đăng bài và số lượng nhận xét.

Hiển thị theo:

- Hàng dọc
- Hàng ngang - Ở kiểu nằm ngang khi rê chuột vào ảnh sẽ có hiệu ứng tooltip hiển thị tiêu đề, ngày đăng và số lượng nhận xét.
- Chia làm 2 cột - Kết hợp của 2 kiểu hiện thị trên.

1. Hiển thị Related Posts theo hàng dọc.

Bài Liên Quan- Related Posts Với Hình Ảnh Cho Blogspot

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn. 
#related-posts{float:left;width:100%}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts img{float:left;border:1px solid #eee;margin-right:10px;width:72px;height:50px;opacity:1}
#related-posts img :hover {opacity:0.8}
#related-posts h3{margin:0;font-size:16px}
@media screen and (max-width:800px){#related-posts{max-width:100%;width:100%;float:none}}
Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'>
Hoặc là:

<div class='post-footer-line post-footer-line-1'>
Hay
<div class='post-footer-line post-footer-line-2'>
trong template của bạn. 
<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/AVvXsEjiTNkf4FicQntbH23rLKV0t2ws8E8yNWVHZljcmCh88yX8Qrr_IMO4p7zS0-UUzLprVjuJdsJMcbzeDfxlHQsFDaop9DAYIIyo7WaC3xjfkt26N2UzURGbBsS4rk2UMDhM4GKjTRzFiHzM/'};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>
2. Hiển thị Related Posts theo hàng ngang.
Bài Liên Quan- Related Posts Với Hình Ảnh Cho Blogspot

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn. 
#related-posts{float:left}
#related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}
#related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px}
#related-posts ul li:hover{z-index:98}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}
#related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}
Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'>
Hoặc là:

<div class='post-footer-line post-footer-line-1'>
Hay
<div class='post-footer-line post-footer-line-2'>
trong template của bạn. 
<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 nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTNkf4FicQntbH23rLKV0t2ws8E8yNWVHZljcmCh88yX8Qrr_IMO4p7zS0-UUzLprVjuJdsJMcbzeDfxlHQsFDaop9DAYIIyo7WaC3xjfkt26N2UzURGbBsS4rk2UMDhM4GKjTRzFiHzM/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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);time.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><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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>
3. Hiển thị Related Posts theo hàng ngang và hàng dọc.
Ta có thể kết hợp code của Duy Pham để tạo một bài viết liên quan bố trí theo cả hàng ngang và dọc và tiện thể tích hợp luôn đáp ứng kích thước khi xem trên thiết bị di động(responsive)
với việc thay đổi một chút css và hoán đổi javascript.
Ảnh demo:
Bài Liên Quan- Related Posts Với Hình Ảnh Cho Blogspot

Cách thức cài đặt hoàn toàn giống như 2 loại trên và dưới đây là code:
CSS
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn. 
#related-posts{float:left}
#related-posts span{font-size:11px}
#related-posts li a{padding:0;font-size:14px;border-bottom :none}
#related-posts ul li{margin:5px 0;padding:0}
#related-posts ul li:hover img{opacity:.8}
#related-posts img{float:left;border:1px solid #bbb;margin-right:10px;width:90px;height:65px;background:#fff;padding:3px}
#related-posts h3{margin:0;font-size:14px}
#related-posts li{width:50%;float:left;height:auto;list-style:none outside none;position:relative;overflow:hidden}
#related-posts ul{width:100%;padding:0;margin:0;background:#fff;overflow:hidden;list-style-type:none}
@media screen and (max-width:800px){#related-posts{max-width:100%;width:100%;float:none}
}
@media screen and (max-width:360px){#related-posts ul li{max-width:100% !important;width:100% !important;float:none;}
#related-posts img{float:left;}
}
Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'>
Hoặc là:
<div class='post-footer-line post-footer-line-1'>
Hay
<div class='post-footer-line post-footer-line-2'>
trong template của bạn. 
<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 nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTNkf4FicQntbH23rLKV0t2ws8E8yNWVHZljcmCh88yX8Qrr_IMO4p7zS0-UUzLprVjuJdsJMcbzeDfxlHQsFDaop9DAYIIyo7WaC3xjfkt26N2UzURGbBsS4rk2UMDhM4GKjTRzFiHzM/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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);time.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><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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>
maxresults là số bài viết liên quan được hiển thị, mình đặt là 6. Mặc định số lượng comments sẽ được hiển thị, nếu bạn không muốn hãy thay ký tự yes màu tím thành ký tự khác, no chẳng hạn.
Chúc thành công!
Nguồn:blog.duypham.info.
Publis: 

7 تعليقات

  1. Mình đã làm theo hướng dẫn cách 3 của bạn, nhưng trên điện thoại màn hình 5 inch, nó vẫn hiện ra 2 cột do o đủ chỗ nên tiêu đề và hình nhảy lung tung,nhờ bạn hướng dẫn làm sao trên điện thoại 5 inch nó resposive chỉ hiện ra 1 cột thôi. Cám ơn bạn!
    1. Làm như bạn yêu cầu cũng đơn giản thôi nhưng vì code này lấy ảnh mặc định từ blogger là 72x72 nên kéo to ra thì nó sẽ bị mờ.
      Bạn thêm đoạn code sau vào cuối phần css

      @media screen and (max-width:360px){#related-posts li{max-width:100% !important;width:100% !important;float:none;margin:5px 0;text-align:center !important}
      #related-posts img{float:none;max-width:100% !important;width:100% !important;max-height:100% !important;height:150px !important;margin:0}
      }
    2. Cám ơn bạn đã giúp đỡ, nhưng ý mình muốn vẫn giữ nguyên định dạng hình thumnail bên trái và tiêu đề bên tay phải như hiển thị trên desktop khi qua mobile thay vì 2 cột thì biến thành 1 cột với 6 dòng. Mình có trang blog cuongcad.tk nó làm giống ý mình, nhưng do không rành code nên o biết cách copy sao cho đúng. Bạn có mail thì mình sẽ gửi template gốc của trang web trên cho bạn do Arlina design thiết kế tên template là Minima Colored 2.1 Responsive Blogger Template.
    3. Quy cach kich thuoc
      أزال المؤلف هذا التعليق.
    4. Cám ơn bạn! nhưng ý mình muốn là trên mobile nó thể hiện như cách 1 của bài này, mong bạn hướng dẫn thêm.
    5. Thay cái dòng responsive 360 bằng dòng này
      @media screen and (max-width:360px){#related-posts ul li{max-width:100% !important;width:100% !important;float:none;}
      #related-posts img{float:left;}
      }
      Bạn còn muốn kiểu nào nữa không?
      :))
    6. Thanks bạn ! Mình làm được rồi! còn hỏi nữa nhưng ngại, để tìm chủ đề trên blog của bạn đúng với cái mình hỏi như author box, thẻ H1...Nói chung còn hỏi dài dài o biết bạn có thời gian trả lời o nữa.
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji
noel