Cách tạo danh sách bài liên quan trong Blogspot

Để tăng lượng tiếp cận tới các bài viết trên blogspot của bạn, thì có rất nhiều cách như chèn link trực tiếp vào key hoặc tạo danh sách các bài liên quan theo lable. Vậy hôm nay mình xin chia sẽ cách tạo danh sách các bài liên quan trong Blogspot theo nhãn của bài viết.

Bài viết liên quan theo nhãn

Hình trên là một ví dụ và mình họa, minh lấy blog của mình làm ví dụ minh họa :


Bước 1 : Bạn vào Mẫu - Tùy chỉnh HTML- Bạn tìm tới dòng

để thao tác nhanh hơn bạn copy mẫu ra một công cụ soạn thảo như : NOTEPAD, Subline text2. Bạn chèn trước thẻ đó với nội dung sau :

<!-- Widget 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: 30px 5px 30px 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;

padding: 0 0 1px 16px;

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>

Bước 2 : Bạn tìm đến đoạn code sau :

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Sau đó bạn chèn đoạn code dưới sau đoạn code trên.

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

<b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">

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

<font face='Arial' size='16'><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'>

<data:label.name/> <!--Dòng code hiện label kế bên bài viết liên quan-->

<b:if cond='data:label.isLast != "true"'>

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

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>

</b:if>

</b:loop>

</font>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

</b:if>

Với  max-results=5 là số bài liên quan bạn có thể tùy chọn số lượng  bài viết theo ý mình

Sau đó bạn lưu mẫu và xem kết quả, nếu bạn nào muốn mầu mè thì có thể chỉnh CSS để có một Template đẹp.
Chúc các bạn thành công!