Chèn Tiện Ích Bài Viết Liên Quan (Related posts) Vào Giữa Bài Viết

Tiện ích bài viết liên quan (Related posts) là tiện ích hiển thị những bài viết có cùng chủ đề (label), tiện ích này khá hữu ích trong việc tăng lượt xem (views) cho bài viết của bạn. Khi đọc một bài viết hữu ích, độc giả thường có xu hướng tìm kiếm những bài viết có cùng chủ đề để tìm hiểu thêm. Related posts là tiện ích có thể làm tốt công việc đó. Demo live nằm ngay trong bài viết này.

Hướng dẫn thực hiện

Bước 1: Để không ảnh hưởng tốc độ load nên mình đã "dồn" code lại thành một và sử dụng câu lệch

if

để hạn chế code dư thừa ở trang chủ nên các bạn chỉ cần thêm đoạn code bên dưới vào trước thẻ

</head>

là được.

<b:if cond='data:view.isPost'>
<style>
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}.related-simplify h4{text-transform: uppercase;background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:500;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:&#39;\f0c8&#39;;font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:&#39;\f0c8&#39;;font-family:fontawesome;color:#2FA1B3;} .related-simplify a{color:#333!important;font-size:16px;margin:0 0 0 30px;font-weight:400!important} .related-simplify a:hover{color:#2FA1B3;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:16x;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
</b:if>

Bước 2: Dùng

Ctrl + F

để tìm thẻ

 <data:post.body/>

và thay bằng đoạn code sau

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Bài viết cùng chuyên mục</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Lưu mẫu lại để xem kết quả nhé.

lời kết

Mình đã responsive nên các bạn cứ yên tâm. Code này mình tham khảo ở dxoan.blogspot.com và edit lại css. Chúc các bạn thành công.