Thêm tính năng "Xem bài liên quan" vào cuối mỗi bài viết trên Blogger

(Updated: 2011-07-05)
Sau mỗi bài viết trên Blogger, dựa vào "Label" sẽ hiển thị phần "Xem bài liên quan" (related post). Cách thực hiện như sau:

Vào Blogger Dashboard - Design - Edit HTML - Chọn box Expand Widget Templates:

Cách 1: Liệt kê các bài viết liên quan theo từng Label
(Cách này có 1 hạn chế là không hiển thị Lable ghi chữ tiếng Việt )

Tìm đoạn:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


3. Dán đoạn mã này ngay sau đó:

<!-- Begin Related Post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<DIV class='similiar'>

<DIV class='widget-content'>
<BR/>
<H3>Related Posts (Bai lien quan):</H3>
<DIV id='data2007'/><BR/><BR/><BR/>
<SCRIPT type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>

</DIV>
</b:if>

<!-- End Related Post --> 

Cách 2: Liệt kê các bài viết mới hơn và cũ hơn trong cùng 1 Label và thêm ngày Post bài
(Tác giả: AnhVo)
Tìm:

<div class='post-footer-line post-footer-line-1'>

hoặc

<div class='post-footer-line post-footer-line-2'>

Dán đoạn code sau bên dưới:

<!-- Related post 2A start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'>
<div id='related-posts-loading-text'>Loading related posts... </div>
<div id='related-newest-href'><div id='related-newest-title'/></div>
<div id='related-older-href'><div id='related-older-title'/></div>
</div>
</b:if>
<!-- Related post 2A end -->

Tìm:

</body>

Dán đoạn code sau bên trên.

<!-- Related post 2B start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var showdate = true;
var max_post = 12;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Related posts script for Blogger
// version 2.0
// (C) Anhvo
// Homepage: vietwebguide.com
// Please dont remove this copyright when using or redistributing this code
function format(ptime){
    return ptime.substr(0,19);
}
function formatdate(d){
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var m = parseInt(d.substring(5,7),10);
    for(var j=0; j<month.length;j++){
        if(m==month[j]){
            m = month2[j]; break;
        }
    }
    return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);
}
function getRelatedNewestLinks(json){
    var entry = json.feed.entry;
    if(entry){
        for(var k=0;k<entry.length;k++){
            var li = document.createElement("li");
            if(showdate){
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) +'</i>';
            }
            else {
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
            }
            if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){
                document.getElementById("related-newest-href-ul1").appendChild(li);
                document.getElementById("related-newest-title").innerHTML = "<B>TIN M�I</B>"
            }
        }
    } else {
        document.getElementById("related-older-title").innerHTML = "Không có bài nào m�i hơn cùng chủ ��";
    }
}
function getRelatedOlderLinks(json){
    var entry = json.feed.entry;
    if(entry){
        for(var k=0;k<entry.length;k++){
            var li = document.createElement("li");
            if(showdate){
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) + '</i>';
            }
            else {
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
            }
            if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){
                document.getElementById("related-older-href-ul2").appendChild(li);
                document.getElementById("related-older-title").innerHTML = "</BR><B>C�C TIN KH�C</B>"
            }
        }
    } else {
        document.getElementById("related-older-title").innerHTML = "Không có bài nào cũ hơn cùng chủ ��";
    }
        document.getElementById("related-posts-loading-text").style.display = "none";
}
function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){
    var script = document.createElement("script");
    script.src = "/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}
function checkRelaxLinks(cid,clink){
    var check = false;
    var u = document.getElementById(cid);
    var a = u.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
        if(a[i].href==clink){
            check = true;
            break;
        }
    }
    var url = location.href.split(".html")[0]+".html";
    if(clink==url) check = true;
    return check;
}
function createRP(){
    var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');
    var max_ = Math.round(max_post/postLabel.length);
    var ul1 = document.createElement('ul');
    ul1.id = 'related-newest-href-ul1';
    document.getElementById('related-newest-href').appendChild(ul1);
    for(var i=0; i<postLabel.length;i++){
         createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);
    }
    var ul2 = document.createElement('ul');
    ul2.id = 'related-older-href-ul2';
    document.getElementById('related-older-href').appendChild(ul2);
    for(var j=0; j<postLabel.length;j++){
         createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);
    }
}
createRP();
//]]>
</script>
</b:if>
<!-- Related post 2B End -->