Tạo bài viết liên quan cho blog theo label (nhãn)

Bài viết liên quan là loại bài có cùng label (nhãn) với nhau, khi các bạn xem một bài viết bất kỳ trên blog thì sẽ có các bài viết liên quan đến bài mà các bạn đang xem.

Bước 1: Tìm thẻ ]]></b;skin> này và sau đó dán đoạn css lên trên nó.

.post-ads{padding-top:0}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px}
p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}

[post_ad]

Khi sao chép bài viết vui lòng ghi nguồn Phước An Blog.

Bước 2: Thêm đoạn Javascript bên dưới trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var titles = new Array();var titlesNum = 0;var urls = new Array();var time = 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 (d.link[a].rel == "alternate"){urls[titlesNum] = d.link[a].href;time[titlesNum] = d.published.$t;titlesNum++;break;}}
;}}
function removeRelatedDuplicates(){var b = new Array(0);var c = new Array(0);e = 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];}}
titles = c;urls = b;time = e;}
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);}}
var c = Math.floor((titles.length - 1) * Math.random());var b = 0;document.write("<ul>");if (titles.length == 0){document.write("<li>Không có bài viết liên quan → </li>");}
else{while (b < titles.length && b < 20 && b < maxresults){if (y != -1){urls[c] = urls[c] + '?m=0';}
document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8,10) + "/" + time[c].substring(5,7) + "/" + time[c].substring(0,4) + '">' + titles[c] + "</a></li>");if (c < titles.length - 1){c++;}
else{c = 0;}
b++;}}
document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length);}
;//]]>
</script>

Bước 3: Tiếp theo tìm thẻ <data:post.body/> này rồi sau đó dán đoạn code sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='qc-header-post'>
<div class='post-ads'>
Dán quảng cáo của bạn ở đây
</div>
<div class='post-right'>
<p class='post-excerpt'>
<data:post.snippet/>
</p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts1'>
<h4>
<i class='fa fa-bullhorn'/>
Bài viết liên quan:</h4>
<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=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startruongit.net/" style="position:absolute;visibility:hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>

**Lưu ý: trong bước 3 có đoạn code dòng là var maxresults=5 đó là số bài viết mà muốn hiện thị, nếu các bạn muốn hiện 3 bài viết liên quan chỉ cần đổi số 5 thàn số 3.

CHÚC CÁC BẠN THÀNH CÔNG!.