[Tips] Làm sao để thêm bài viết liên quan cho blogspot

Bài viết liên quan là gì?

Bài viết liên quan hay còn gọi là Related Posts là những bài viết cùng chủ đề (cùng label) nằm dưới bài viết chi tiết nhằm giúp người đọc đỡ tốn công tìm kiếm những bài viết mà họ quan tâm trên blogspot.

Bài viết liên quan để làm gì?

Nếu trước đây khi một ai đó vào blog của bạn đọc 1 bài rồi out thì này họ sẽ tìm thấy những bài viết liên quan mà họ quan tâm, họ sẽ ở lại blog của bạn lâu hơn và giúp blogspot của bạn có sức thu hút hơn.

Cách thêm bài viết liên quan cho blogspot

Để thêm bài viết liên quan này vào blogspot thì bạn hãy làm theo những bước sau
Bước 1: bạn chèn đoạn CSS sau vào trước ]]></b:skin>

#related-posts{float:left;width:auto;font:16px Arial;padding:3px solid #000;}
#related-posts h2{background:none;color:#be591c;font:18px Arial;margin-bottom:10px;padding:3px solid #ccc;}
#related-posts .maskolis_img{width:170px;height:139px;padding:5px 5px 0;}
#related-posts .maskolis_img:hover{opacity:.6;filter:alpha(opacity=60);-moz-opacity:.6;-khtml-opacity:.6;}
.postmeta{font-size:12px;font-weight:400;padding:2px 0;}

Bước 2: Chèn đoạn javacript sau vào trước </head>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLm0-uXayZb5QoHOoUscNHPn7cD8UnaymGYcfEqnrQD26Ak946MoECuGWA3Kzpx9nVMfaxAThd1ISY3rm6sHtZ6GuKO2EevKQtjVeHHEm2WYkx2OgHEck3hyHsxOYlJtVQRklzhJdT2HI/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 8px 10px 5px;float:left;;border:0px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><div class="play-button"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/></div><div style="width:162px;color:#333;height:35px;text-align:center;margin:0px 5px; font:bold 12px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Bước 3 Chèn đoạn code sau vào vị trí dưới bài viết thường là dưới <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>

Thế là xong lưu mẫu lại và kiểm tra thành quả thôi nhé. Quá trời đẹp :v

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề