(Thêm bài viết liên quan cùng chủ đề)
- Bài viết liên quan cùng chuyên mục hay sản phẩm liên quan cùng loại đã quá quen thuộc đối với các Website tin tức và Website TMĐT. Tiện ích bài viết liên quan này giúp người xem cảm thấy thân thiện, dễ dàng tìm kiếm và xem thông tin đang quan tâm. Đây chính là một trong những yếu tố thu hút độc giả ở lại Website lâu hơn, ghé thăm Website hàng ngày.
Còn với Blog thì sao? Liệu có thể tích hợp tiện ích này vào được không? Ta hoàn toàn có thể tích hợp tiện ích này vào Blog của mình. Nào chúng ta cùng nhau thực hiện nhé.
- B1: Đăng nhập vào Blog
- B2: Vào Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
- B3: Ấn tổ hợp phím Ctrl + F và tìm thẻ </b:skin>
- B4: Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>
/*****************************************
Related Posts CSS
******************************************/
#related-posts {
float:none;
text-transform:none;
height:100%;
min-height:100%;
padding-top:15px;
padding-left:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvApZHWkD_ZcN9clysXTXCcNYdMfP78WRWcomiCz4Ly4cELVVzTTJ3fKXpKaSryi1gA1z4Bj93o5krsDQ8-BvJyqSfYkrd06s4HuIXkshUonl6Nn6hknNPkjO-yp1fLJKy8VGk687eeTU/s1600/post-bottom-bg.png) repeat-x scroll top left transparent !important;
clear:both;
display:block;
}
#related-posts{float:left}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{
font-size: 12px;
font-weight: bold;
color: black;
margin-bottom: 0.5em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts h4{
font-size: 12px;
font-weight: bold;
color: #004175;
padding-top: 0em;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0 8px;
padding:0px;
text-decoration:none;
font-size:12px;
color:#000000;
}
#related-posts ul li{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvcv0EGhZL5U-CUo54L51MikXQC9yzJ93lT_PaMymwWGPz8H87PjOCphzBM9w1Tdt5Khm_nDEw7cNLGuU8aEqOVasbGu9BhM3lMEPnm_IZKrVBAQpAG3M6klS2VrDDx-HNzMDJZ-cHRVu/s6-no/li-dot.png) no-repeat scroll left center transparent;
display:block;
list-style-type:none;
margin-bottom: 6px;
padding-left: 20px;
padding-top:0px;
font-size:12px;
}
Related Posts CSS
******************************************/
#related-posts {
float:none;
text-transform:none;
height:100%;
min-height:100%;
padding-top:15px;
padding-left:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvApZHWkD_ZcN9clysXTXCcNYdMfP78WRWcomiCz4Ly4cELVVzTTJ3fKXpKaSryi1gA1z4Bj93o5krsDQ8-BvJyqSfYkrd06s4HuIXkshUonl6Nn6hknNPkjO-yp1fLJKy8VGk687eeTU/s1600/post-bottom-bg.png) repeat-x scroll top left transparent !important;
clear:both;
display:block;
}
#related-posts{float:left}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{
font-size: 12px;
font-weight: bold;
color: black;
margin-bottom: 0.5em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts h4{
font-size: 12px;
font-weight: bold;
color: #004175;
padding-top: 0em;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0 8px;
padding:0px;
text-decoration:none;
font-size:12px;
color:#000000;
}
#related-posts ul li{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvcv0EGhZL5U-CUo54L51MikXQC9yzJ93lT_PaMymwWGPz8H87PjOCphzBM9w1Tdt5Khm_nDEw7cNLGuU8aEqOVasbGu9BhM3lMEPnm_IZKrVBAQpAG3M6klS2VrDDx-HNzMDJZ-cHRVu/s6-no/li-dot.png) no-repeat scroll left center transparent;
display:block;
list-style-type:none;
margin-bottom: 6px;
padding-left: 20px;
padding-top:0px;
font-size:12px;
}
- B5: Ấn tổ hợp phím Ctrl + F và tìm thẻ <div class='post-footer'>
Chú ý: Bạn có thể tìm thấy nó hai lần, dừng lại ở thẻ thứ hai
Dán đoạn code bên dưới vào sau thẻ <div class='post-footer'>
<!-- Bat dau bai viet lien quan -->
<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>
var ry='<h4>Bài viết liên quan</h4>';rn='<h4>Không có bài viết liên quan</h4>';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/AVvXsEijqpPfX9zOY_XSeOTOxNmq_g7TsURXQK5NdKfXy9Z-DLr-Hosqk8hN_y8BQSGA5bIdiKwHx99I022UpmGIp-Jf6to2jfkWaoO3WXAOVvK241bCbRq1MtCNz9RkbSShYu8WsV3FlLNoqbm5/'};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="dofollow">'+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=10;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Ket thuc bai viet lien quan -->
<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>
var ry='<h4>Bài viết liên quan</h4>';rn='<h4>Không có bài viết liên quan</h4>';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/AVvXsEijqpPfX9zOY_XSeOTOxNmq_g7TsURXQK5NdKfXy9Z-DLr-Hosqk8hN_y8BQSGA5bIdiKwHx99I022UpmGIp-Jf6to2jfkWaoO3WXAOVvK241bCbRq1MtCNz9RkbSShYu8WsV3FlLNoqbm5/'};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="dofollow">'+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=10;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Ket thuc bai viet lien quan -->
Lưu ý:
- max-results = 5: Số lượng bài viết mà bạn muốn được hiển thị
-B6: Bấm Lưu mẫu để hoàn thành
Tin học văn phòng
0 nhận xét:
Đăng nhận xét