Hiển thị bài viết liên quan theo nhãn

1. Vào Mẫu
2. Vào Chỉnh sửa HTML
3. Chọn Mở rộng tiện ích mẫu
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script>
    //<![CDATA[
function getRandomPosts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    indexPosts.sort(function() {return 0.5 - Math.random()});
    if (maxEntries > numPosts) {
        maxEntries = numPosts;
    }
    var container = document.getElementById('rp-posts');
    var ul = document.createElement('ul');
    for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == 'alternate') {
                a.href = entry.link[j].href;
                break;
            }
        }
        a.appendChild(document.createTextNode(entry.title.$t));
        li.appendChild(a);
        ul.appendChild(li);
    }
    container.appendChild(ul);
}

    //]]>
</script>

<script type='text/javascript'>
var maxEntries = 4;
</script>

Trong đó: var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
5- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>:

#rp-pre {
float:right;
width:150px;
padding-left:10px;
}
#rp-content {
border:1px solid #bbb;
background:#eee;
}
#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}
#rp-posts {
position:relative;
left:-20px;
}
#rp-posts a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgx_XQ3jQ58uJFtZB6_XIYdmYIA4MWE59qYcV6TP9A46Fo-lAummiB33k126-LcSYfM4YudZQqk3ghppUcFKm_yqLMKjTksHnVHU_U7KDl4ZSBv7x7wy8odDehDH5uWG9SSikiRDb3Yjo/s1600/icon-related-post-namkna-blogspot-com.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}

Tùy chỉnh! 

• width:150px; là độ rộng của box bài viết liên quan.
• background:#bbb;  màu nền chữ bài viết liên quan.
• color:#F95107; Màu chũ tiêu đề bài viết liên quan.
• box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right;thành float:left;

6. Tìm đoạn code bên dưới: 

<data:post.body/>

7. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rp-pre'>
<div id='rp-content'><div id='rp-title'>Bài liên quan</div>
<div id='rp-posts'/></div></div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
</b:loop>
</b:if>

8. Lưu mẫu lại và xem kết quả.

Read More »