Cách hiển thị bài viết liên quan vào giữa bài viết Blogspot

 Xin chào, các bạn muốn tăng tỉ lệ giữ chân người dùng trên blogspot của bạn thì chắc sẽ không thể bỏ qua bài viết này rồi. Trong bài viết này,  Nguyen Ha xin chia sẻ cách hiển thị viết liên quan vào giữa bài viết, tiện ích này khá hữu ích trong việc tăng lượt xem 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 theo đó khả năng giữ chân người dùng ở Blog bạn cũng cao hơn.

Cách hiển thị bài viết liên quan vào giữa bài viết Blogspot

Hiển thị bài viết liên quan vào giữa bài viết Blogspot

Đầu tiên, bạn vào Blogger => Chủ đề => chỉnh sửa HTML và tìm đến thẻ </head> thêm đoạn code sau lên trước thẻ </head>

<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:'\f0c8';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:'\f0c8';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 == "item"'><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>

Sau đó, sử dụng Ctrl +F tìm đến thẻ  <data:post.body/>  thay <data:post.body/> bằng đoạn code dưới đây:
<div expr:id=’"post1" + 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 == "item"’><script expr:src=’"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"’ 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=’"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>
Lưu ý: Có những Template nhiều thẻ  <data:post.body/>  vì vậy, bạn thay đoạn code lần lượt vào từng thẻ để tìm nhé

Như vây, bạn cần lưu lại và vào từng bài viết xem thành quả.

Kết luận: 

Như vậy tôi vừa hướng dẫn các bạn cách hiển thị bài viết liên quan vào giữa bài viết trên Blogspot, điều này sẽ tăng lượt view và giữ chân người dùng lâu hơn. Hi vọng bài viết tôi vừa chia sẻ mang lại hữu ích cho bạn nếu có thắc mắc, ý  kiến, góp ý vui lòng comment xuống dưới.
 Chúc bạn thành công!

1 Nhận xét

Mới hơn Cũ hơn

Nhận xét Mới