Code thêm bài viết liên quan (Related posts) tự động vào cuối bài đăng Blogspot

Để thêm gợi ý "Bài viết liên quan" (Related posts) tự động vào giữa bài đăng Blogspot. Các bạn thực hiện tuần tự các bước như sau:

Bước 1:

Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML và dán đoạn code dưới đây vào trước thẻ </head>

<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] + '" target="_blank">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}

//]]>

</script>

</b:if>

Bước 2:

Tiếp theo các bạn tìm đến đoạn code hiển thị nội dung bài đăng <data:post.body/> và thay thế nó bằng đoạn code bên dưới.

Lưu ý: Tùy Template mà có 2 hoặc nhiều hơn đoạn <data:post.body/>. Thường sẽ là đoạn thứ 2, nếu không được các bạn hãy thử lần lượt các đoạn tìm được. Và cũng tùy Template mà có thể các bạn cần phải thay đến 2 đoạn <data:post.body/> để bài viết liên quan hiển thị trên mobile. Do tác giả viết 2 giao diện khác nhau giữa PC và mobile.

 

<div expr:id='&quot;post1&quot; + data:post.id'/>

<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>

<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/default/-/&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>Xem thêm:</h4>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

Đến đây, các bạn đã có gợi ý bài viết liên quan được chèn vào giữa bài đăng của mình rồi. 

Bước 3:

Các bạn dán code bên dưới trước thẻ ]]></b:skin>

/* Related posts between posts Style 1 */

.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}

.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}

.related-simplify ul li:nth-child(odd){background:#fefefe}

.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}

.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Xem thêm:

khoảng trắng