Ý 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-gcli-PWhYTZQxlZJY1ZK8qA959JlLxMcLBalHpT9a4k5Emee3t4ts-05kWzBvFnCqoc54x8DsEgch_L05fY7HWBNsHcxpvBjBrjnPOjPmxF5iNKu_tqaIcE3myEVTukKLIl6Vcyr9g/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ếtfunction 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ếnfunction showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent;
var str_out = "";// tìm URL phân trangfor (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {// đây là trang trướcurl_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ếtfor (var i = 0; i < post_per_page; i++) {// nếu không có thì kết thúc lệnhif (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];// đây là tiêu đề bài viếtposttitle = entry.title.$t;// tìm URL bài viếtfor (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 địnhif ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = img_default;
}// kết thúc đọc, tạo code HTMLstr_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 trangstr_out = "";// nếu có trang trước, tạo link nhưng chỉ có textif(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ó textif(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 đầustr_out += "<a href='javascript:navi_pagi_label(0);' class='first'>First</a>";// viết codedocument.getElementById("PR_Label_Sidebar").innerHTML = str_out;
}// chức năng tạo địa chỉ feed sẽ đọcfunction navi_pagi_label(direction){
var p, parameters;
if(direction==-1) {// trang trướcp = url_prev.indexOf("?");
parameters = url_prev.substring(p);
} else if (direction==1) {// trang saup = url_next.indexOf("?");
parameters = url_next.substring(p);
} else {// trang đầuparameters = "?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 độngfunction include_script(parameters) {// nếu không phải lần đầu tiên thì loại script trênif(pr_flagfirst==1) {remover_script();}// xóa mọi thứ và đặt một dòng text hoặc ảnh loaddocument.getElementById("Sidebar_Label").innerHTML = "<div id='loading_script'></div>";
document.getElementById("PR_Label_Sidebar").innerHTML = "";// đây là lưu trữ feedvar archive_feeds = homepage + "/feeds/posts/default/-/" + label_Related + parameters;// load và cho chạyvar 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ướcfunction remover_script() {
var that = document.getElementById("LABELTEMPORAL");
var father = that.parentNode;
father.removeChild(that);
}// khi load trang thì bắt đầu chức năngonload=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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOtVeY1_L85zxgVWqqHboR6lY-vyQWUgu-Zow0GCg_IkvvB_jmVeDPxkhpDQlvoupp6-S1Nww-GicSD45MV4vMA_mGWH_DOS5F6-LQJ7vcdbzjmccn1pBwy8gDvmtGQcCT8lQZe0l3kxQ/) 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 == "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: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="<data:label.name/>";</script><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>
</span>
Lưu Template là hoàn thành bạn nhé.
