• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Thủ thuật yêu cầu: Tiện ích Bài viết liên quan mới nhất cho nhãn trên sidebar

28
09/09/2011

Ý tưởng khi xem một bài viết trong nhãn bất kỳ thì tiện ích Bài viết mới nhất xuất hiện gồm những bài mới đăng trong nhãn đó, là một ý tưởng khá thú vị. Thực ra ý tưởng này mình đã nghĩ đến khá lâu và đã từng bước tạo code và thử nghiệm. Gần đây quá trình thử nghiệm đã tới giai đoạn cuối cùng với những dấu hiệu thành công như ý muốn, cũng đúng vào lúc tác giả Lee Peace đã nhắc đến ý tưởng này và yêu cầu mình hiện thực hóa xem có được không. Tiện ích này mình gọi tên là tiện ích Bài viết liên quan mới nhất cho nhãn trên Sidebar (Recent and Related Posts for Label on Sidebar). Trên tiện ích này, mình tạo thêm phân trang có bản (Prev, Next) để có thể xem tất cả các bài viết trong nhãn một cách dễ dàng.

Trước khi nghiên cứu và cài đặt, bạn có thể xem qua Demo.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Page Elements. Thêm một tiện ích HTML/Javascript, đặt tên tiện ích là Bài viết liên quan mới nhất rồi dán vào phần nội dung tiện ích bằng đoạn code sau đây (Lưu ý mình đã chú ý script để các bạn có thể hiểu tường tận hơn, có thể tùy biến CSS theo ý thích của bạn).

<script type="text/javascript">
// Recent and Related Posts for Label on Sidebar widget by www.thuthuatblogger.info
var post_per_page = 5; // thiết lập số bài viết hiển thị mỗi trang
var post_snippet = 70; // thiết lập số ký tự tóm tắt bài viết
var homepage = "http://huynh-nhat-ha.blogspot.com"; // đặt địa chỉ trang chủ của bạn
var img_default = "http://4.bp.blogspot.com/_LOcbjkeprcw/TUN5QBbkIuI/AAAAAAAAADw/eMJglYXy-ZA/s1600/recentpostnothumb.png"; // thiết lập URL hình mặc định

var pr_flagfirst = 0;
var url_prev, url_next;

// chức năng tạo tóm tắt bài viết
function removeHtmlTag(strx,chop){
var summary = strx.split("<");
for(var i=0;i<summary.length;i++){
if(summary[i].indexOf(">")!=-1){
summary[i] = summary[i].substring(summary[i].indexOf(">")+1,summary[i].length);
}
}
summary = summary.join("");
summary = summary.substring(0,chop-1);
return summary;
}

// chức năng tạo biến
function showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent;
var str_out = "";

// tìm URL phân trang
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
// đây là trang trước
url_prev = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
// đây là trang sau
url_next = json.feed.link[k].href;
}
}

// đọc và xác định bài viết
for (var i = 0; i < post_per_page; i++) {

// nếu không có thì kết thúc lệnh
if (i == json.feed.entry.length) { break; }

entry = json.feed.entry[i];

// đây là tiêu đề bài viết
posttitle = entry.title.$t;

// tìm URL bài viết
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
// lưu trữ nó
posturl = entry.link[k].href;
break;
}
}

// tìm nội dung bài viết và lưu trữ nó
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}

// tìm ảnh đại diện hoặc sử dụng ảnh mặc định
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = img_default;
}

// kết thúc đọc, tạo code HTML
str_out += "<div class='pagi_label'>";
str_out += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
str_out += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
str_out += "<p>" + removeHtmlTag(postcontent,post_snippet) + " ...</p>";
str_out += "</div>";
}

// kết thúc lệnh và viết kết quả
document.getElementById("Sidebar_Label").innerHTML = str_out;

// tạo phần phân trang
str_out = "";

// nếu có trang trước, tạo link nhưng chỉ có text
if(url_prev) {
str_out += "<a href='javascript:navi_pagi_label(-1);' class='previous'>Prev</a>";
} else {
str_out += "<span class='disabled previous'>Prev</span>";
}

// nếu có trang sau, tạo link nhưng chỉ có text
if(url_next) {
str_out += "<a href='javascript:navi_pagi_label(1);' class='next'>Next</a>";
} else {
str_out += "<span class='disabled next'>Next</span>";
}

// tạo link cho trang đầu
str_out += "<a href='javascript:navi_pagi_label(0);' class='first'>First</a>";

// viết code
document.getElementById("PR_Label_Sidebar").innerHTML = str_out;
}

// chức năng tạo địa chỉ feed sẽ đọc
function navi_pagi_label(direction){
var p, parameters;
if(direction==-1) {
// trang trước
p = url_prev.indexOf("?");
parameters = url_prev.substring(p);
} else if (direction==1) {
// trang sau
p = url_next.indexOf("?");
parameters = url_next.substring(p);
} else {
// trang đầu
parameters = "?start-index=1&max-results=" + post_per_page + "&orderby=published&alt=json-in-script"
}
parameters += "&callback=showpagelabel";

include_script(parameters);
}

// đây là chức năng load script động
function include_script(parameters) {
// nếu không phải lần đầu tiên thì loại script trên
if(pr_flagfirst==1) {remover_script();}
// xóa mọi thứ và đặt một dòng text hoặc ảnh load
document.getElementById("Sidebar_Label").innerHTML = "<div id='loading_script'></div>";
document.getElementById("PR_Label_Sidebar").innerHTML = "";
// đây là lưu trữ feed
var archive_feeds = homepage + "/feeds/posts/default/-/" + label_Related + parameters;
// load và cho chạy
var nouvo = document.createElement('script');
nouvo.setAttribute('type', 'text/javascript');
nouvo.setAttribute('src', archive_feeds);
nouvo.setAttribute('id', 'LABELTEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nouvo);
pr_flagfirst = 1;
}

// đây là chức năng loại bỏ script đã được load trước
function remover_script() {
var that = document.getElementById("LABELTEMPORAL");
var father = that.parentNode;
father.removeChild(that);
}

// khi load trang thì bắt đầu chức năng
onload=function() { navi_pagi_label(0); }
</script>
<style type="text/css">
#Sidebar_Label {margin: 0 auto;width:100%}
.pagi_label {background-color: #ffffff;border-bottom: 1px dashed #101921;height: 72px;margin: 5px 0;padding: 5px;width: 300px;}
.pagi_label img {float: left;height: 70px;padding:1px;margin: 0 5px 3px;width: 70px;}
.pagi_label h6, .pagi_label h6 a {margin:0;font-size:12px !important;font-weight:normal !important;color:#069}
.pagi_label:hover {-moz-box-shadow: 0px 0px 60px #505961 inset;}
.pagi_label p {font-size:12px;padding:0 3px 3px}
#loading_script {color:#888;font-family:Century Gothic;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444; background: #ffffff url(http://lh4.ggpht.com/_hljKDuw-cxQ/TMCSkoGBUTI/AAAAAAAAQkw/b05xzg2KkDk/loading.gif) no-repeat 50% 50%; height:489px; width:100%}
#PR_Label_Sidebar {background-color: #ffffff;color: #BBB;font-family: Tahoma;font-size: 18px;text-align: center;margin:0 auto;width:100%}
#PR_Label_Sidebar a {color: #BBB !important;font-family: Tahoma !important;font-size: 18px !important;font-weight: normal !important;padding: 5px 10px;display:block;}
#PR_Label_Sidebar a:hover {color: #069 !important;}
#PR_Label_Sidebar span {padding: 5px 10px;}
#PR_Label_Sidebar span.disabled {color: #666 !important;}
#PR_Label_Sidebar .next {float:right;}
#PR_Label_Sidebar .previous {float:left;}
#PR_Label_Sidebar .first {text-align:center;}
</style>
<div id="Sidebar_Label"></div>
<div id="PR_Label_Sidebar"></div>

Bước 2. Vào Edit HTML, chọn Expand Wiget Templates. Dùng từ khóa Bài viết liên quan mới nhất tìm đến đoạn code XML của tiện ích rồi thay nó thành như sau (phần đánh dấu màu đỏ là phần thêm vào):

<b:widget id='HTML1' locked='false' title='Bài viết liên quan mới nhất' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:else/>
<style>#HTML1 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

Bước 3. Dùng các từ khóa như: <div class='post-footer'>, <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'> tìm đến đoạn code XML liên quan đến nhãn rồi thay nó bằng đoạn code bên dưới (phần đánh dấu màu đỏ là phần được thêm vào):

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<script>var label_Related=&quot;<data:label.name/>&quot;;</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Lưu Template là hoàn thành bạn nhé.

{28 bình luậnAdd yours ?}

14:14:00, 9 thg 9, 2011

Đọc bài viết học hỏi được thêm nhiều điều anh Hà ạ, mặc dù chưa hiểu nhiều về các script nhưng thời gian tới em cũng phải nghiên cứu qua tý xem sao? hì hì. Còn về thủ thuật này, mình có thể đặt cả đoạn code đầu tiên dưới <div class='post-footer'> để tạo bài viết liên quan theo nhãn dưới bài viết không anh Hà, đặt như vậy có khác gì so với đặt trong 1 tiện ích HTML/Javascript.

Reply
14:19:00, 9 thg 9, 2011

Tất nhiên là đặt ngay tại post footer được chứ LD, ở đây đặt trên sidebar cho nó lạ tí, với lại nó list bài viết mới nhất của một nhãn chứ k lộn xộn như các kiểu bài viết liên quan thông thường. Bố trí như thế này cho phù hợp với ý tưởng khi xem một bài viết trong nhãn bất kỳ thì tiện ích Bài viết mới nhất xuất hiện gồm những bài mới đăng trong nhãn đó

Reply
14:27:00, 9 thg 9, 2011

Em hiểu vấn đề này :63). Hy vọng sắp tới sẽ có nhiều ý tưởng mới lạ để anh nghiên cứu và phát triển cho cộng đồng Blogspot.

Reply
15:23:00, 9 thg 9, 2011

Bác Hà hướng dẫn code thật tỉ mỉ ko biết nói gì hơn :55) Blogspot VN mà ko có những người tâm huyết như bác thì không thể phát triển mạnh như ngày hôm nay.

Đang test thử thủ thuật này :65)

Reply
15:30:00, 9 thg 9, 2011

Emo sao ko hiện Bác Hà? :62)

Reply
15:34:00, 9 thg 9, 2011

To DPMNET: Vn blogspot k có những người tâm huyết cũng chả sao, nhưng những người tâm huyết thì lại bị những người nặc danh phá hoại, thế mới thật đáng buồn thay cho cộng đồng blogspot Việt chúng ta đó.

Reply
15:35:00, 9 thg 9, 2011

Cái emo đang chỉnh nên k hiện, khi nào sửa xong OK trở lại. Thanks.

Reply
15:38:00, 9 thg 9, 2011

Em nghĩ bác chỉ nên để comment bằng blogger id thôi

Reply
19:10:00, 9 thg 9, 2011

Nó load hoài ko chạy luôn anh hà ơi

Reply
19:24:00, 9 thg 9, 2011

E k thay địa chỉ homepage thành trang của e thì nó load hoài chứ còn gì nữa nào.

Reply
19:55:00, 9 thg 9, 2011

Em thay rồi mà anh

Reply
19:57:00, 9 thg 9, 2011

E xem trang Demo nhé, chạy OK mà.

Reply
20:26:00, 9 thg 9, 2011

Có cần phải thay đoạn code <b:else/>
<style>#HTML1 {display: none;}</style>
</b:if> có HTML1 thành ID của tiện ích tiện ích HTML/Javascript mà mình chèn code ở đoạn 1 vào không anh Hà!

Reply
21:09:00, 9 thg 9, 2011

Đúng rồi, cái ID đó phải trùng nhau mới được nha.

Reply
21:13:00, 9 thg 9, 2011

Sau 1 thời gian test thì mình đã áp dụng thành công! Lúc đầu mình cũng bị mắc lỗi giống trường hợp của bạn [ND]o[SKT] sau đó thì mình có thêm đoạn code:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<script>var label_Related=&quot;<data:label.name/>&quot;;</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
vào trước 1 trong 3 thẻ:
<div class='post-footer'>, <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'>
là ok, sau đó các bạn có thể tùy biến theo ý mình, các bạn có thể xem demo của mình tại đây nhé!

Reply
22:08:00, 9 thg 9, 2011

Cảm ơn linh dung

Reply
22:15:00, 9 thg 9, 2011

bài này anh Hà hướng dẫn luôn cả js, rất công phu và hợp lí nữa

Reply
22:18:00, 9 thg 9, 2011

Đúng thế Pika Rock à, chú thích để ace hiểu tỉ mỉ hơn, cũng là để các bạn mới học tập thêm ý mà.

Reply
06:14:00, 10 thg 9, 2011

Thanks anh Hà nhiều, code viết rất kỹ, em đọc xong cũng đã hiểu được vài phần, hy vọng từ đó sẽ có thể tự mình tạo thêm vài thủ thuật nho nhỏ khác :55)

Reply
06:22:00, 10 thg 9, 2011

Góp ý nho nhỏ cho ai xài tiện ích này: Nếu xài tiện ích này thì các bạn nên tháo phần Related posts sau bài đăng để cho trang nó load nhanh hơn và không bị trùng lặp. Hì hì, như trang của LinhDung chẳng hạn :51)

Reply
10:10:00, 10 thg 9, 2011

Em nghĩ anh nên thêm code mô vào để bỏ đi bài đang xem ở trên widget ổn ko nhỉ

Reply
10:19:00, 10 thg 9, 2011

Đang chờ bài mới của Đức đây nà, lâu rồi k thấy Đức chấp bút :51)

Reply
12:09:00, 10 thg 9, 2011

SAO NÓ KHÔNG HIỂN THỊ HÌNH ẢNH NGOÀI LINK CỦA GOOGLE RA NHỈ :) BẠN CÓ CÁCH KHẮC PHỤC KHÔNG ?

Reply
12:10:00, 10 thg 9, 2011

@Lee Peace Cũng là 1 ý hay đấy chứ, thanks anh Lee Peace nhiều nha!

Reply
23:57:00, 18 thg 9, 2011

Thanks anh Hà, đã áp dụng cho blog :55)

Reply
00:09:00, 19 thg 9, 2011

Anh Hà xem giùm: nếu em bỏ dòng này: var post_snippet = 70; // thiết lập số ký tự tóm tắt bài viết thì tiện ích không load, nhưng nếu đổi 70 thành 0 thì nó vẫn còn hiện ký tự, có cách nào khắc phục không anh?

Reply
11:00:00, 8 thg 12, 2011

Bạn xem lại giúp mình sao mình làm không được.
Bạn có thể nói rõ "Dùng các từ khóa như: <div class='post-footer'>, <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'> tìm đến đoạn code XML liên quan đến nhãn rồi thay nó bằng đoạn code bên dưới (phần đánh dấu màu đỏ là phần được thêm vào):" Thay từ đâu đến đâu mình chưa rõ chỗ này nên không được.
Nó không hiển thị nội dung các tiêu đề bài đăng mới. Nó chỉ hiển thị wedget thôi.
Mong bạn sớm hồi âm, cám ơn bạn.

Reply
17:43:00, 23 thg 4, 2012

Anh chỉ em cách xóa dấu phân cách ( ----------- ) dưới chân mỗi bài trong tiện ích đó được không anh.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn