Hầu hết các Template đều có thiết kế "Bài viết liên quan" hay còn gọi là "Related posts" ở cuối bài đăng 👇. Tuy nhiên để tăng hiệu suất giữ chân người dùng, chúng ta thường sẽ chèn gợi ý bài viết có liên quan đến nội dung hoặc chủ đề mà người dùng đang xem vào giữ bài viết.
Ví dụ chèn thủ công khi soạn bài như hình dưới:
Bài này mình chia sẻ với các bạn cách để thêm gợi ý "Bài viết liên quan" (Related posts) tự động vào giữa bài đăng Blogspot
Đối với một số bạn không hiểu nhiều về code vui lòng lưu lại Template trước khi chỉnh sửa bất cứ gì trong HTML nhé.
Để 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 ==
"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] + '" target="_blank">' + relatedSimply[r] +
'</a></li>'); if (r < relatedSimply.length - 1) { r++; } else {
r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
Bước 2:
<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='"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/default/-/" + 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);}
Đế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. Tiếp tục chọn phong cách (style) hiển thị ở bước 3 nhé.
Bước 3:
]]></b:skin>Phong cách 1:
/* 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)}}
Phong cách 2:
/* Related posts between posts Style 2 */
.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{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;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:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0
30px;}
.related-simplify a:hover{color:#0383d9;}
.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:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
Phong cách 3:
/* Related posts between posts Style 3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px
auto;width:100%;border:6px double #fff;}
.related-simplify
ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.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(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all
.3s}
.related-simplify ul
li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0
30px;}
.related-simplify
a:hover{color:#fff;text-decoration:underline}
.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:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
Thủ thuật này rất hữu ích cho những Blog như Báo điện tử, Chia sẻ thông tin, Tin tức... Tuy nhiên nó cũng có hạn chế như là sẽ làm ảnh hưởng đến bố cục bài viết, hoặc gợi ý bài viết liên quan chen ngang làm hỏng bảng table của các bạn.
Facebook