Tạo mục bài viết liên quan cùng chủ đề

Lâu nay dùng cái tiện ích bài viết liên quan có Jquery khá hay và bắt mắt nhưng tự nhiên bị vô hiệu hóa, chắc do file .js trên host bị ăn bánh tiêu. Giờ thấy cái này cũng khá đẹp và đỡ cái là chỉ dùng css...

Nguồn: sưu tầm...

Thực hiện:

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sửa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
4. Chèn scrip...

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/AVvXsEjwVbL1aOk2T5qFvOAi9YOI52sqVT-ucw2FPRo_Vufs1DVQa48X2G4i3e4xfFrTzdNom5zYGDUS_EXZz_4E_KVLDigwKCLQTEndztVtQ_7B6pXS2iLPkSd0ItoXps_Yf5371kPObn8eGEUY/s16/032.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: 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>  

Bước 3: Save template.