Thảo Luận

×Close

Chèn Related Post giữa bài viết blogspot

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.

Chèn Related Post giữa bài viết blogspot

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 == &quot;item&quot;'> 
<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='&quot;post1&quot; + 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 == &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> 
<div id='bspostRelatedIn_title'>Liên quan</div>
<script type='text/javascript'> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</div> 
<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>

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!

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

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

5 nhận xét
Hiển thị
  1. Chào bạn,

    Hiện mình đã thay lại tên miền
    Tên Blog Cũ: Quang Linh Chia Sẻ
    Tên Blog mới: Quang Linh Pro
    Bạn giúp mình thay tên miền của quanglinhchiase.com thành quanglinhpro.com nhá
    Mình cảm ơn bạn rất nhiều ❤

    Tên Blog: Quang Linh Pro
    Link: https://www.quanglinhpro.com/
    Mô tả: Thủ Thuật Công Nghệ, Blogger, Thủ Thuật Facebook

    Trả lờiXóa
Mới hơn Cũ hơn