Hướng dẫn Tạo bài viết liên quan cho Blogger

Hướng dẫn Tạo bài viết liên quan cho Blogger 1
– 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.
– Thực hiện các bước sau đây :


1. vào blogger dashboard.
2. chọn template.
3. click vào Customize -> chọn Advanced -> Add CSS

Hướng dẫn Tạo bài viết liên quan cho Blogger 2

4Thêm đoạn mã CSS dưới đây vào ô “Add Custom CSS


———————————————————————————————————
#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}
———————————————————————————————————


5. vào lại template –> chon edit html.

Hướng dẫn Tạo bài viết liên quan cho Blogger 3

6. chon vào text html rồi nhấn ctrl + F, tìm dòng <div class=’post-footer’>


7. copy đoạn code sau đây vào sau dòng <div class=’post-footer’>

+ Chú ý : khi ta tìm dòng code <div class=’post-footer’> sẽ cho ra kết quả có 2 dòng code giống như vậy, bỏ qua dòng code thứ 1, chép đoạn code dưới vào sau dòng code thứ 2.

———————————————————————————————————

<b:if cond=’data:blog.pageType == “item”‘>
<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='”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels”‘ 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>
———————————————————————————————————


– Nếu muốn thay đổi số lượng bài viết liên quan thì điều chỉnh giá trị: var maxresults=6; thường để 3 cho đến 6.

8. Cuối cùng nhấn Save để lưu template.

Đánh giá 5 sao bài viết:
[LN: 0 SS: 0]

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *