Thêm Bài Viết Liên Quan Vào Giữa Bài Viết Blogger
Blogger là một nền tảng tốt cho các blogger mới bắt đầu. Tuy nhiên, Blogger thiếu nhiều tính năng cần thiết trong các nền tảng blog hiến nay. Một trong những tính năng bị thiếu được quan tâm nhiều nhất đó là bài viết liên quan. Bài viết liên quan rất hữu ích để hiển thị các bài đăng liên quan khác cho người đọc của bạn và giảm tị lệ thoát.
Trong bài viết này, mình sẽ hướng dẫn cho các bạn thêm tính năng bài viết liên quan vào blog của bạn. Tính năng này rất nhẹ nên sẽ không gây ảnh hưởng gì đến tốc độ tải trang của bạn.
Trước khi hướng dẫn thì chúng ta cùng lướt qua các tính năng của nó đã nhé.
Các Tính Năng
- Tự động: Khi bạn thêm bài viết liên quan vào blogger, nó sẽ bắt đầu tự động hiển thị các bài đăng có liên quan trên trang web của bạn và đưa vào giữa bài viết. Không cần phải chỉnh sửa gì nữa.
- Có thể tùy biến: Tính năng này sử dụng CSS nên bạn có thể chỉnh sửa theo phong cách của bạn.
- Kiểm soát tỷ lệ thoát: Nó sẽ giảm tỷ lệ thoát, điều này sẽ làm cho điểm SEO của bạn tốt hơn trong công cụ tìm kiếm của Google.
- Bán đáp ứng: Nếu bạn đang sử dụng chủ đề blogger đáp ứng, thì tiện ích con cũng sẽ áp dụng kích thước theo chiều rộng bài đăng trên blog của bạn. Nhưng trong chủ đề không đáp ứng sẽ không thể điều chỉnh theo chiều rộng trang web.
Tính năng này sẽ có một số template không hỗ trợ, nếu không làm được thì các bạn hãy đợi thêm các bài hướng dẫn khác nhé.
Thêm Bài Viết Liên Quan Vào Giữa Bài Viết Blogger
Để thêm bài viết liên quan vào Blogger, các bạn hãy làm theo các bước sau đây.
Để tránh các sai sót khi thêm, các bạn nên sao lưu template lại.
1. Hãy truy cập trang tổng quan Blogger. Và đi tới tùy chọn Chủ đề → Chỉnh sửa HTML để mở trình chỉnh sửa chủ đề.
2. Sao chép toàn bộ CSS bên dưới và dán nó trên thẻ ]]></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;}Các bạn có thể tùy chọn các kiểu hiển thị danh sách, hãy thay CSS như bên dưới thành các CSS mình sẽ cấp.
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
} Các CSS bạn có thể thay thế:
Kiểu 1:
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: circle;
}Kiểu 2:
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: decimal;
}Kiểu 3:
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: decimal-leading-zero;
}3. Sau khi thêm và lựa chọn CSS mà mình thích xong, các bạn thãy thêm JavaScript này vào trên thẻ </head> nhé.
<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ị.
4. Bước này là quan trọng nhất nè, thêm HTML và JavaScript vào nơi cần hiển thị. Các bạn hãy tìm đến <data:post.body/> xóa và thay bằng JavaScript bên dưới.
<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'>Also Read</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.
5. Đến đó là xong rồi, các bạn hãy ấn vào lưu chủ đề và qua blog của bạn xem kết quả nhé.
Theo mặc định, số lượng bài viết tối đa trong phân đoạn này là 3. Nhưng giá trị này có thể được tăng hoặc giảm để phù hợp với nhu cầu của bạn.
Kết luận
Vậy là mình đã hướng dẫn cho các bạn thêm bài viết liên qua vào blogger rồi. Nếu bạn gặp bất kỳ vấn đề nào hoặc có bất kỳ đề xuất nào về tiện ích bài đăng liên quan ở trên thì hãy bình luận cho mình và mọi người biết nhé. Cảm ơn các bạn đã đọc.