Related Post (bài viết liên quan) thường xuất hiện ở cuối mỗi bài viết, giúp người đọc truy cập tới các bài viết khác cùng chuyên mục. Bài viết này sẽ hướng dẫn các bạn thêm tiện ích bài viết liên quan vào Blogspot, tuy nhiên vị trí xuất hiện sẽ là ở giữa bài viết.
Vì đây là mặc định nằm giữa bài viết nên các bạn cần canh chỉnh các phần tử cho hợp lý trong bài viết.
Chèn Related Post giữa bài viết blogspot
Đăng nhập trang quản trị Blogger > Chủ đề > Chỉnh sửa HTML.
Chèn đoạn code sau vào trước thẻ </head>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 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]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; 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] = bspostRelatedIn[i];}} bspostRelatedIn = 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((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.bloggerspice.com/';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]>
</script>
</b:if>
Ở bspostRelatedIn.length && i < 3 Thay thế số 3 thành số bài bạn muốn hiển thị.
Tiếp theo. Tìm và thay thế <data:post.body/> (Lưu ý trong template có thể có nhiều đoạn này, bạn phải tìm hiểu và chọn cho đúng, thường thì nó sẽ là đoạn thứ 2 hoặc 3) bằng đoạn:
<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Liên quan</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Ở max-results=3 Thay số 3 giống với số bài bạn muốn hiển thị ở trên.
Cuối cùng. Thêm CSS trước ]]></b:skin>:
/* Related Posts */
.bspostRelatedIn{text-align: left;
padding: 15px;
margin: 30px 0;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 15px;
position: relative;}
#bspostRelatedIn_title{font-size: 16px;
margin: 0;
display: inline-block;
padding: 0 10px;
position: absolute;
top: -14px;
left: 10px;
background-color: #fefefe;
color: #7d7d7d;}
.bspostRelatedIn ul {
list-style: none;
padding: 3px 22px 0;
}
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
}
.bspostRelatedIn li:hover {text-decoration: underline;}
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
}
Các bạn có thể tùy chọn các kiểu hiển thị danh sách, hãy sử dụng CSS như bên dưới:
Kiểu 1: chấm đầu dòng
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: circle;
}
Kiểu 2: số đầu dòng
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: decimal;
}
Lưu Template và xem kết quả. Có thể canh chỉnh một số CSS cho phù hợp với blog của ban!