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

Anh Trai Nắng
5
Hướng dẫn chèn Related Post giữa bài viết blogspot giúp người đọc truy cập tới các bài viết khác cùng chuyên mục trên Blogger của bạn.

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
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!

Lưu ý

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.

(getButton) #text=(Kết Quả) #icon=(link)

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

5 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập 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.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu