Tạo khung bài viết liên quan cho blogger/ blogspot

Bài viết liên quan theo cùng chủ đề là một tiện ích rất hữu dụng đối với một blog có số lượng bài viết lớn được đánh dấu trong một nhãn bài viết. Tức là tiện ích này sẽ liên kê các bài viết cũ và mới hơn so với bài viết đang được xem trong một danh sách ở cuối bài viết như thế này:

Khung bài viết liên quan

Cách thực hiện như sau:


1. Truy cập vào phần chỉnh sửa mẫu > chỉnh sửa HTML (nhớ sao lưu mẫu trước khi tiên hành phòng trường hợp bị lỗi)
2. Tìm thẻ:

]]></b:skin>:

3.  Thêm đoạn code sau trước thẻ vừa tìm được:

#related-posts-block ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmJmr7qMnGJ6vK_NONF7src5ALaTYUiuQJ4-NPjVwFenAd_9ed0jfhsi1qw_pH1pYCpmEHpdqzv5mp9wGDFWuVf51uDPqHThCd9UJXBLIGq5JZPGuc33RI4z_OzJlQPxV8K_PrBn3hUdm/s1600/bg_other_namkna-blogpot.jpg) repeat-x;margin:0px 0 0 0;padding:6px 0 0 0;list-style:none}#related-posts-block li{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeaLe4QEH3LPTLCjprukJ02veJKE2MBuvEioOnchRvyuJGnt_ClsAH9mY0mrAsrK-jAHw7N8VRN4neirfSx8tTmdlm6b36WMuHAhRmRFQP_vOodxWdUHLOFeQp45LLjTg_nWBfqiNdmbw/s1600/li_namkna-blogspot-com.png) 0 5px no-repeat;padding-left:15px}#related-posts-block{line-height:1.5;margin:0 0;font-size:11px;color:#7c7b7b}#related-posts-loading-text{font-size:12px;text-align:center;color:#002c28}#related-newest-href{margin:10px 0 2px}#related-newest-title{font-size:12px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-newest-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-newest-href a:hover{color:#00f}#related-older-href{margin:10px 0 2px}#related-older-title{font-size:12px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-older-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-older-href a:hover{color:#00f}#related-posts-block > div {float: left;width: 48%;}

4. Tìm một trong các thẻ sau:

Thẻ 1:

<div class='post-footer'>

Thẻ 2:

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

Thẻ 3:

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

Thẻ 4:

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

Lưu ý: - Chỉ một trong 4 thẻ nhé không phải là tất cả 

           - Trong trường hợp bạn sử dụng Thẻ 1 thì sẽ có 2 thẻ giống thẻ 1 vì thế sử dụng thẻ thứ hai nhé (không phải thẻ 2)

5. Thêm vào sau một trong các thẻ trên đoạn code sau:

<script type='text/javascript'>//<![CDATA[var showdate = true;var max_post = 8;//]]></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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 != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></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...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCMzZ_7n3imXOGzKsg4aSOqsV_fHfO7MX6Qx1B69bqDI7Xv3CuJnpR3GEoJMsYj7aKbhqC-aXDMc_VUc5-62ugHXozcM4itnu8hn0TTSZZIjG-HSSXt8PPb5UCPNHmOEnxuj2DVXWcEZp/'/></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>
<script type="text/javascript">    //<![CDATA[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>Các bài viết mới cùng chủ đề</b> ";                                   }  } } else {  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết mới nào cùng chủ đề</b>"; }}
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 = "<b>Các bài viết cũ cùng chủ đề </b>";   }  } } else {  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết cũ nào cùng chủ đề</b>"; }        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ạn có thể thay phần màu xanh, trong đó:
- var showdate = true; Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
- var max_post = 8; Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích

OK, xong mở một bài lên kiểm tra nhé.

Thủ thuật này được bác Nam Tạ chia sẻ, mình chỉ thêm phần lưu ý thôi.