Thủ thuật tạo bài viết liên quan (Related posts) cho blogger

Tiện ích "Bài viết liên quan" cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết, giúp tăng tỷ lệ Bounce rate cho blog.Các Seoer chắc chắn sẽ rất quan tâm vấn đề này!

Hướng dẫn:

Thêm đoạn đoạn code bên dưới vào trước thẻ </head>

<!-- Bài viết liên quan (1) -->

<style>

/*Khung chính của bài viết liên quan*/

#related-posts {

    float:left;

    min-width: 100%;

    margin: 10px 5px 10px 0;

    font: 11px Tahoma;

}

#related-posts .widget { 

    List-style-type: none;

    margin: 5px 0 5px 0;

    padding: 0;

}

#related-posts .widget h2, #related-posts h2 {

    color: #940f04; 

    font-size: 20px;

    font-weight: normal;

    margin: 5px 7px 0;

    padding: 0 0 5px;

}

/*Màu link của bài viết liên quan*/

#related-posts a {

    color: #318686;

    font-size: 13px;

    text-decoration: none;

}

/*Màu link khi rê chuột vào*/

#related-posts a:hover {

    color: #C4436A;

    text-decoration: underline;

}

#related-posts ul {

    border: medium none;

    margin: 10px;

    padding: 0;

}

#related-posts ul li {

    display: block;

    background: url(https://lh5.googleusercontent.com/-zKhXxJUpROA/Tmr926k_EBI/AAAAAAAACks/1LrFz96DwAI/List_1.png) no-repeat 0 0;

    margin: 0 0 5px;

    padding: 0 0 1px 21px;

    margin-bottom: 5px;

    line-height: 2em;

    border-bottom:1px dotted #cccccc; /*Gạch đích dưới mỗi link bài viết liên quan*/

}

</style>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 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];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

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] = relatedTitles[i];

}

}

relatedTitles = 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((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

i++;

}

}

//]]>

</script>

Sau đó thêm đoạn code sau: 

<!-- Bài viết liên quan (2) -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

  <div style='border-top:#AAAE95 0px dashed; margin: 0 50px 0 50px; padding-top:5px;'/>

<font face='Arial' size='3'><b>Bài viết liên quan: </b></font>

<font color='#FF0000'> <!-- Màu chữ label -->

<b:loop values='data:post.labels' var='label'> 

<b:if cond='data:label.isLast != &quot;true&quot;'>

, <!--Dấu phẩy ngăn cách các label -->

</b:if>

<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=8&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</font>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

</b:if>

vào sau đoạn  <data:post.body/>

Kết quả:

Like nếu thấy bài viết có ích!

Chúc các bạn thành công!