Monday, June 22, 2009

Cách tạo thêm "Các Bài Liên Quan" sau bài viết on blogspot

(danghienIT) - Chắc hẳn các bạn cũng biết, ở các trang tin tức như vnexpress.net, dantri.com.vn,... mỗi khi ta mở xem một tin nào đó, thì ở dưới mỗi bài viết đều có các tin tức liên quan hiện ra. Điều đó là cho người đọc có thể xem nhanh các bài liên quan mà không phải ngồi mài mò, tệ hơn họ có thể không thấy được các bài viết khác có cùng chủ đề trong blog của bạn. Blogspot mặc định không hỗ trợ tính năng này. Tuy nhiên bạn đừng lo, bài viết sau sẽ giúp bạn chèn thêm nó. Đây là một thủ thuật của Hoctro (hoctro.blogspot.com), tôi trình bày lại chi tiết hơn và chỉ biến đổi chút đỉnh cho phù hợp với blogspot của bạn.- Trước tiên, bạn vào Template -> Edit HTML, nhớ sao lưu một bản Full Template trước khi chỉnh sửa.- Click chọn Expand Widget Templates- Bấm Ctrl+F để bật hộp tìm kiếm của trình duyệt, xong gõ từ khóa cần thiết đề tìm dòng
- Trước tiên, bạn vào Template -> Edit HTML, nhớ sao lưu một bản Full Template trước khi chỉnh sửa.
- Click chọn Expand Widget Templates
- Bấm Ctrl+F để bật hộp tìm kiếm của trình duyệt, xong gõ từ khóa cần thiết đề tìm dòng

<p class='post-footer-line post-footer-line-3'/>

- Bạn sẽ thấy 1 đoạn code có dạng như sau:

- Chèn đoạn CODE 1 này ngay dưới thẻ thứ hai và bên trên dòng:


</b:includable>

CODE 1: [Mở CODE]



<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='data2007'/>


<div id='hoctro' style="display:none">Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>
</u></div>
<script type="text/javascript">
homeUrl3 = "vietwebguide.blogspot.com";
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 10;

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;
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 label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/'+ 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>



*** Lưu ý: Trước khi Copy và Paste vào template, các bạn hãy thay các thông số màu đỏ cho phù hợp. Cụ thể:
+ Các bài liên quan: tiêu đề mà bạn thích
+ vietwebguide.blogspot.com : địa chỉ blog của bạn
+ maxNumberOfPostsPerLabel = 10 : số bài tối đa của mỗi label mà bạn muốn hiện
+ maxNumberOfLabels = 5 : số label tối đa mà bạn muốn hiện

- Save template lại. Thế là xong rồi đó.

Anh Võ: http://vietwebguide.blogspot.com

Cách tạo thêm "Các Bài Liên Quan" sau bài viết on blogspotSocialTwist Tell-a-Friend


Đang tải xin vui lòng chờ...

5 comments:

Lý Minh Triết on Monday, July 20, 2009 said...

Tks tuyệt quá :)

ngan ling on Friday, July 31, 2009 said...

anh cố gắng cho cả demo nữa anh nhé

danghienIT on Friday, July 31, 2009 said...

@ngân ling: Cảm ơn em đã ủng hộ! Anh sẽ cố gắng làm LIVEDEMO với những thủ thuật khó!

Thợ cạo on Thursday, August 06, 2009 said...

@Minh Triết - DanghienIT đã giúp mình tìm lại đồ cũ nhưng chạy ngon quá trời. Xài lại code này nhớ đạo sĩ Học trò. Blog mình chơi hàng lạc xoong, có bi nhiêu khoe hết, second hand cần gì ngày tháng. Đáng đời tội nghèo mà thích ăn diện. Cảm ơn các bạn nhiều!
Lâu ngày qua nhà Danghien thấy nhà sang quá, các đồ chơi hại điện đặt trên nền đen bí hiểm thật ấn tượng, bạn xử lý màu sắc rất đạt!

danghienIT on Thursday, August 06, 2009 said...

@tranhung09: Cảm ơn anh đã quá khen :D!

Post a Comment

[▼/▲] Chèn biểu tượng vui danghienIT
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

/

Chuyên mục

Tool box

Liên kết

Trao đổi Liên kết
Loading Logos...
Bookmark and Share
 

Copyright 2009 All Rights Reserved iupro theme by Dang Quang Hien