Box bài viết liên quan dưới tiêu đề bài viết

Box bài viết liên quan dưới tiêu đề bài viết cho blogger

Bài viết liên quan ở sau bài viết quá quyên thuộc với chúng ta rồi. Bài viết này sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc nằm ngày bên cạnh tiêu đề bài viết. Thủ thuật này hiển thị tốt với các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.

Xem Demo:

XEM DEMO

Ảnh minh họa:

☼ Bắt đầu thực hiện thủ thuật:

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/AVvXsEgiTnjHQFEgxvoqvWNdA8_1dpyPF1m9l_Qd9ilX_AMXeCgZNITBCoK6njQ2e289s-Fc_SMoHl2iHTg_epL1uFnssk-WG8374RDhIEERLWjeR7woU92_F1LByxHBWARIgUdphEW-xq4so20/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ả.

Cập nhật

Nếu blog bạn có tiện ích Auto read more thì thêm ngay trước đoạn sau:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

Box bài viết liên quan dưới tiêu đề bài viết