Chuyển đến nội dung chính

Tạo bài viết liên quan cho Blogger (Blogspot)

Bài viết này mình sẽ hướng dẫn các bạn cách thêm chức năng hiển thị các bài viết liên quan (theo Labels) vào cuối mỗi bài viết.
Đây là thủ thuật hay của bạn Duy Phạm, thủ thuật này đã hạn chế được vài nhược điểm cũng như thêm những chức năng mới mà các bài viết về chủ đề "Related Post for Blogspot" trên mạng chưa có, ví dụ:
- Hiển thị hình ảnh đại diện cho mỗi bài viết liên quan.
- Hoạt động tốt với Labels tiếng Việt.
- Không hiển thị bài viết đang xem trong danh sách bài viết liên quan.
- Hiển thị ngày viết bài và số nhận xét kèm theo.
- ...
Có 2 kiểu hiển thị bài viết liên quan để bạn chọn:
Kiểu 1: Danh sách bài viết liên quan hiển thị theo hàng dọc
Bài viết liên quan cho Blogspot
1. Thêm đoạn mã CSS dưới đây vào phía TRÊN ]]></b:skin>:
#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}
2. Thêm đoạn mã dưới đây vào ngay SAU <div class='post-footer'>:
<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>
Kiểu 2: Danh sách bài viết liên quan hiển thị theo hàng ngang:
Bài viết liên quan cho Blogger
1. Thêm đoạn mã CSS dưới đây vào phía TRÊN ]]></b:skin>:
#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}
2. Thêm đoạn mã dưới đây vào ngay SAU <div class='post-footer'>:
<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='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png';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>
Cuối cùng, bấm Lưu mẫu để hoàn thành.
Vài lưu ý:
- Giá trị số 6 trong code trên là số bài viết liên quan tối đa được hiển thị. Các bạn có thể thay đổi thành giá trị khác.
- Nếu bạn không muốn hiển thị ngày đăng với số nhận xét kèm theo thì tìm và xóa:
<span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span>
Chúc các bạn thành công!

Bài đăng phổ biến từ blog này

Những Status hay và tâm trạng nhất về Tình yêu đơn phương

Tổng hợp những status hay và tâm trạng nhất khi người con trai hay người con gái đang yêu đơn phương.
Yêu đơn phương là một loại tình yêu say đắm hoàn mỹ nhất trên đời này, bởi vì tuyệt đối cũng không bao giờ bị thất tình. Nhưng chỉ có người chân chính từng trải mới biết được: Loại tình yêu không thể nói lên lời này, đó mới là loại tình yêu yếu ớt nhất trên thế giới.

Hình ảnh động đẹp về Hoa Hồng, rực rỡ sắc màu

Dưới đây là tổng hợp ảnh động đẹp về Hoa Hồng với nhiều màu sắc và kiểu dáng khác nhau do chính A4Y sưu tầm và chia sẽ lại.
Hoa Hồng là loài hoa không thể thiếu trong ngày lễ tình nhân 14/2 sắp tới phải không nào?...

Ảnh vui comment facebook khen status hay, người đẹp

Vài tấm ảnh vui, hài hước dùng để nhận xét (bình luận, comment trên facebook) với ý nghĩa khen status viết hay, ảnh đẹp thật là ngưỡng mộ.

Ảnh đẹp mùa Đông với Status hay, tâm trạng và ý nghĩa nhất

Tuyển tập những hình ảnh đẹp nhất về mùa Đông với những dòng Status đầy tâm trạng và ý nghĩa khi những cơn gió mang hơi lạnh của mùa Đông đến.
Ấm áp không phải khi bạn nói "Ấm quá", mà là khi có người thầm thì vào tai bạn "Có lạnh không?". Ấm áp chưa hẳn là khi bạn ôm ai đó thật chặc, mà khi ai đó khoác lên vai bạn thật khẽ. Ấm áp là khi mùa Thu qua, cái lạnh ùa về và có ai đó thầm thì vào tai bạn: "Chúc em một mùa Đông ấm áp".

Hình ảnh đẹp về con đò và bến sông xưa

Tuyển chọn những hình ảnh đẹp về con đò trên bến sông xưa ở Việt Nam. Những hình ảnh này gợi trong ta nỗi nhớ về quê hương, làng quê xưa.

Một số câu niệm Phật và ý nghĩa

Chúng ta khi niệm Phật ít ai thật sự hiểu hết ý nghĩa của lời niệm. Niệm Phật là để ta tưởng nhớ đến Phật, đến công đức mà Ngài vì chúng sanh cứu độ. Khi ta hiểu hết ý nghĩa, tâm ta tự sinh từ bi, tâm ta tự ngộ và ta tự đem sự an lạc, hạnh phúc đến cho tâm ta.

Tùy chỉnh kích thước khổ giấy trong Word 2003

Bạn có thể để khổ giấy văn bản của bạn là một khổ giấy nhất định mỗi khi mở chương trình lên. Thông thường văn bản thường được đặt là khổ giấy A4, đôi khi bạn cần phải thay đổi khổ giấy cho một loại văn bản đòi hỏi có khổ giấy khác.

Hình ảnh đẹp chào đón tháng 12, Hello December!

A4Y xin gửi đến các bạn những hình ảnh đẹp về chủ đề chào mừng tháng 12 đang đến.
Đó là những hình ảnh về tháng mười hai với slogan "Hello December" thật đẹp và ý nghĩa! Xin chúc tất cả chúng ta sẽ gặp nhiều may mắn và thuận lợi trong tháng 12 này nhé!..

Hình ảnh người con trai buồn đầy tâm trạng

Tuyển chọn những hình ảnh đẹp thể hiện tâm trạng buồn về người con trai khi bước vào đường yêu hay khó khăn trong cuộc sống bộn bề.
Xin tặng bộ ảnh này cho các bạn là đàn ông, con trai đang buồn. Chúc các bạn sẽ mau chóng vượt qua nỗi buồn này..