(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
5 comments:
Tks tuyệt quá :)
anh cố gắng cho cả demo nữa anh nhé
@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ó!
@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!
@tranhung09: Cảm ơn anh đã quá khen :D!
Post a Comment