Để cho độc giả tiện theo dõi những bài viết liên quan đến entry hiện tại đang đọc, tôi nghĩ nên thiết lập widget để hiển thị "Các bài đăng liên quan".
Tôi đã tìm được 2 phương pháp để hiển thị tiện ích này, được viết bởi Blogger người Việt là Hoctro và Blogger PurpleMoggy. Tôi đã thử áp dụng 2 phương pháp này trên 2 Blog mà tôi đang sở hữu: Blog này, và Blog tiếng Anh http://easyadsensevn.blogspot.com/. Các Widget này hoạt động tương đối tốt. Vì vậy, tôi nghĩ nên giới thiệu lại cho những ai chưa bao giờ sử dụng, giống như tôi.
Đầu tiên là phương pháp của Hoctro:
Trước khi cài đặt phương pháp này cần lưu ý:
Để đảm bảo cho phương pháp này hoạt động, bạn cần phải bật "feeds" lên. Một cách mặc định, Blog của bạn tự động bật "feeds".
Phải đảm bảo rằng feed của bạn được đặt ở chế độ như sau (có thể là "Full" hoặc "Short"):
chứ không phải như sau:
Cũng phải đảm bảo rằng, trong " Settings -> Archiving", "Enable Post Pages?"được đặt ở chế độ "Yes"
Để cài đặt tiện ích này, đầu tiên phải làm theo hướng dẫn của bài viết Hacking Technique: How To Modify and add Widget to the Template, đặc biệt là mục B.4 (bài viết này chỉ cách add code vào các vị trí thích hợp!)
Sau đó, cắt và dán đoạn code dưới đây giữa hai thẻ "b:widget" bất kỳ, lưu template lại, và kết thúc!
<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Sep,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Three******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>
<h3>Các bài đăng liên quan</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>
</u></div>
<script type='text/javascript'>
// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl3 = "<data:blog.homepageUrl />";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
// Adding an if statement to exclude current post. Addition from Jackbook.com. Thank you
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var div1 = document.createElement('div');
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ encodeURIComponent(label) +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<!--</b:if>-->
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
</b:widget>
Các điểm đặc biệt quan trọng cần chú ý:
1. Để cài đặt số lượng tối đa của các tít (headline) cho mỗi nhãn (label), cần đổi số trên dòng sau (hiện thời maximum là 4):
var maxNumberOfPostsPerLabel = 4;
2. Để đặt số lượng tối đa các nhãn, đổi số trên dòng sau đây (hiện thời là 10):
var maxNumberOfLabels = 10;
Kinh nghiệm của tôi cho thấy, cố gắng hạn chế mỗi bài đăng chỉ khoảng 2 nhãn, khi đó liên kết với maxNumberOfPostsPerLabel, bạn sẽ nhận được một danh sách các bài đăng liên quan chính xác hơn.
3. Hiển thị widget chỉ ở từng bài viết
Nếu bạn không muốn hiển thị widget này trên trang chính, bởi vì có thể trang chính của bạn có quá nhiều bài viết, bạn đổi dòng in đậm sau đây:
<!-- *****************http://hoctro.blogspot.com*****Sep,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Three******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
thành:
<b:if cond='data:blog.pageType == "item"'>
và cũng đổi dòng in đậm sau (nằm ở vị trí khoảng 2/3 của code)
<!--</b:if>-->
thành
</b:if>
4. Để giới hạn không gian của Widget
Thỉnh thoảng, mỗi nhãn có rất nhiều bài viết, chúng lấy rất nhiều không gian, tuy nhiên bạn lại muốn liên kết hết những bài viết liên quan nhiều nhất có thể. Tôi giới thiệu bạn cách đặt widget trong một cái hộp, 1 CSS đặc trưng mà tôi đã dùng gần đây trong "TOC Widget".
Để làm được như thế, tìm dòng sau đây:
<div id='data2007'/><br/><br/>
sau đó add kiểu CSS cho nó:
<div id='data2007' style='height:200px;overflow:auto;border:1px solid brown'/><br/><br/>
Ở đây tôi dùng kiểu CSS với chiều cao của Widget là 200px, đồng thời tôi cũng tạo khung màu xám với đường kẻ nhỏ. Các bạn có thể thử và cho ý kiến!
Bây giờ tôi sẽ giới thiệu với các bạn Phương pháp của PurpleMoggy:
Đầu tiên, vào Template -> Edit HTML và dán đoạn code sau vào <head>... </head>
để đổi nó thành:
Lưu lại và vào Layout -> Edit HTML trở lại. Dán đoạn code sau ngay dưới đoạn code vừa rồi:
Tôi mong là bài viết này có thể giúp ích cho bạn.
(Bản tiếng Anh: http://easyadsensevn.blogspot.com/2008/09/2-methods-to-display-related-posts.html)
Tôi đã tìm được 2 phương pháp để hiển thị tiện ích này, được viết bởi Blogger người Việt là Hoctro và Blogger PurpleMoggy. Tôi đã thử áp dụng 2 phương pháp này trên 2 Blog mà tôi đang sở hữu: Blog này, và Blog tiếng Anh http://easyadsensevn.blogspot.com/. Các Widget này hoạt động tương đối tốt. Vì vậy, tôi nghĩ nên giới thiệu lại cho những ai chưa bao giờ sử dụng, giống như tôi.
Đầu tiên là phương pháp của Hoctro:
Trước khi cài đặt phương pháp này cần lưu ý:
Để đảm bảo cho phương pháp này hoạt động, bạn cần phải bật "feeds" lên. Một cách mặc định, Blog của bạn tự động bật "feeds".
Phải đảm bảo rằng feed của bạn được đặt ở chế độ như sau (có thể là "Full" hoặc "Short"):
chứ không phải như sau:
Cũng phải đảm bảo rằng, trong " Settings -> Archiving", "Enable Post Pages?"được đặt ở chế độ "Yes"
Để cài đặt tiện ích này, đầu tiên phải làm theo hướng dẫn của bài viết Hacking Technique: How To Modify and add Widget to the Template, đặc biệt là mục B.4 (bài viết này chỉ cách add code vào các vị trí thích hợp!)
Sau đó, cắt và dán đoạn code dưới đây giữa hai thẻ "b:widget" bất kỳ, lưu template lại, và kết thúc!
<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Sep,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Three******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>
<h3>Các bài đăng liên quan</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>
</u></div>
<script type='text/javascript'>
// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl3 = "<data:blog.homepageUrl />";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
// Adding an if statement to exclude current post. Addition from Jackbook.com. Thank you
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var div1 = document.createElement('div');
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ encodeURIComponent(label) +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<!--</b:if>-->
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
</b:widget>
Các điểm đặc biệt quan trọng cần chú ý:
1. Để cài đặt số lượng tối đa của các tít (headline) cho mỗi nhãn (label), cần đổi số trên dòng sau (hiện thời maximum là 4):
var maxNumberOfPostsPerLabel = 4;
2. Để đặt số lượng tối đa các nhãn, đổi số trên dòng sau đây (hiện thời là 10):
var maxNumberOfLabels = 10;
Kinh nghiệm của tôi cho thấy, cố gắng hạn chế mỗi bài đăng chỉ khoảng 2 nhãn, khi đó liên kết với maxNumberOfPostsPerLabel, bạn sẽ nhận được một danh sách các bài đăng liên quan chính xác hơn.
3. Hiển thị widget chỉ ở từng bài viết
Nếu bạn không muốn hiển thị widget này trên trang chính, bởi vì có thể trang chính của bạn có quá nhiều bài viết, bạn đổi dòng in đậm sau đây:
<!-- *****************http://hoctro.blogspot.com*****Sep,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Three******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
thành:
<b:if cond='data:blog.pageType == "item"'>
và cũng đổi dòng in đậm sau (nằm ở vị trí khoảng 2/3 của code)
<!--</b:if>-->
thành
</b:if>
4. Để giới hạn không gian của Widget
Thỉnh thoảng, mỗi nhãn có rất nhiều bài viết, chúng lấy rất nhiều không gian, tuy nhiên bạn lại muốn liên kết hết những bài viết liên quan nhiều nhất có thể. Tôi giới thiệu bạn cách đặt widget trong một cái hộp, 1 CSS đặc trưng mà tôi đã dùng gần đây trong "TOC Widget".
Để làm được như thế, tìm dòng sau đây:
<div id='data2007'/><br/><br/>
sau đó add kiểu CSS cho nó:
<div id='data2007' style='height:200px;overflow:auto;border:1px solid brown'/><br/><br/>
Ở đây tôi dùng kiểu CSS với chiều cao của Widget là 200px, đồng thời tôi cũng tạo khung màu xám với đường kẻ nhỏ. Các bạn có thể thử và cho ý kiến!
Bây giờ tôi sẽ giới thiệu với các bạn Phương pháp của PurpleMoggy:
Đầu tiên, vào Template -> Edit HTML và dán đoạn code sau vào <head>... </head>
<script type="text/javascript">Lưu nó lại, sau đó tick vào hộp Expand Widget Template. Trong code HTML, tìm đoạn sau:
//<![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++;
}
document.write('</ul>');
}
//]]>
</script>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
để đổi nó thành:
<b:if cond='data:post.labels'>Chú ý rằng 3 dòng in đậm là 3 dòng ta cần thêm vào.
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Lưu lại và vào Layout -> Edit HTML trở lại. Dán đoạn code sau ngay dưới đoạn code vừa rồi:
<script type="text/javascript">Sau đó, copy và dán đoạn mã sau vào giữa bất kỳ 2 thẻ "b:widget" nào:
removeRelatedDuplicates();
printRelatedLabels();
</script>
<b:widget id='HTML13' locked='false' title='Các bài đăng liên quan' type='HTML'>Có một vái số liệu mà bạn có thể cải tiến để bớt đi hay thêm vào số bài đăng. Trong hộp code đầu tiên, có đoạn i < 20 và trong hộp code thứ 3 có đoạn max-results=10. Bạn có thể thay thế những con số này bởi số lượng mà bạn muốn.
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Tôi mong là bài viết này có thể giúp ích cho bạn.
(Bản tiếng Anh: http://easyadsensevn.blogspot.com/2008/09/2-methods-to-display-related-posts.html)
