[21]
Thủ thuật: Tạo bài viết liên quan (Related Posts)
Nguồn: [FD's BlOg]


Giới thiệu: Tiện ích 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. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxjY-r8MTlBCOY8hMG22lktYh6kiJ629RbomS8HRFNJWvcqgTuAMdB8v8sbDxlL-7iywGAmxVkH4kc1AaX1zcmL33KH0ene0eAu4LjLIy9-TmM5stJrbX-ht8R9AkzCQLnwxxH3Siu2cr/) 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: Tìm dòng <data:post.body/>

- Thêm vào sau nó đoạn code sau:

<!-- 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='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'> 
<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=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

max-results=8 // Số bài viết liên quan hiển thị

Lưu ý: Đối với những blog có tiện ích đọc thêm (Read more...) thì việc bạn đặt code trên trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>


Bước 3: Save template. (Lưu mẫu)

THE END.