Custom Search
Ads by VADpay advertising

Bài mới nhất ở Easyadsensevn

Thứ Năm, ngày 25 tháng 9 năm 2008

2 cách để hiển thị "Các bài đăng liên quan" ("Related Posts")

Cảm ơn bạn đã ghé thăm Blog của mình! Xin vui lòng góp ý về bài viết. Nếu bạn có nguyện vọng đọc những bài viết mới của mình qua email, bạn có thể Bookmark trang này, hoặc có thể đăng ký email của bạn ở đây. Để biết thêm thông tin, các bạn có thể xem ở các link sau:

Để 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 &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 == '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 &lt; 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&amp;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 &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>
<!--</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">
//<![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>

Lưu nó lại, sau đó tick vào hộp Expand Widget Template. Trong code HTML, tìm đoạn sau:
        <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'>
<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&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>
Chú ý rằng 3 dòng in đậm là 3 dòng ta cần thêm vào.

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">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Sau đó, copy và dán đoạn mã sau vào giữa bất kỳ 2 thẻ "b:widget" nào:
<b:widget id='HTML13' locked='false' title='Các bài đăng liên quan' type='HTML'>
<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>
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.

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)
Add to Technorati Favorites

3 nhận xét:

Dosonbeach nói...

Minh chưa hiểu lắm, nhat là ở phương pháp PurpleMoggy ở 2 đoạn code cuối cùng mình không hiêu ý bạn noi cần dán nó vào đâu, bạn co thể nói cụ thể hơn được không, mình làm không được,

EasyAdsenseVn nói...

Chao Dosonbeach,
xin loi ban khi khong go tieng Viet co dau, vi minh dang o cho lam viec, khong dung laptop duoc.
Doi voi doan code o hop thu 4, ban chi viec copy va dan ngay duoi doan code o hop thu 3 (tuc la ngay duoi </b:if>). Con doan code o hop thu 5, ban copy va dan vao giua hai the </b:widget>...<b:widget> bat ky. Co the doc them huong dan o Blog cua hoc tro (link o tren) de xem lam the nao de chen giua hai the widget. (ban nen bam Ctrl-F de tim b:widget cho nhanh).
Luu y them, khi chen de xuat hien viec bao loi ve ma XML. Ban xem them mot bai dang cua minh trong Blog nay lam the nao de convert mot ma HTML thanh XML(copy va dan vao chuong trinh cua Eblogtemplates).
Minh da lam nhu the va no hoat dong tot.
Chuc ban thanh cong.

Frequent Reader nói...

Hello all,
While I surf blog , i found a all new trick in http://pic-memory.blogspot.com/

Vistor can comment and EMBED VIDEO YOUTUBE , IMAGE .
EX : View Source.
http://pic-memory.blogspot.com/2009/02/photos-women-latin-asian-pictu...

Written very smart!
I wonder how they do it ? Anyone know about this , please tell me :D
(sr for my bad english ^_^)

email: ya76oo@ya76oo.com
thanks.

Watch the latest videos on YouTube.com
Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):