xem nguồn
Bất kỳ blogger nào làm quen với blogspot một thời gian hẳn biết qua tiện ích Bài viết mới nhất có ảnh đại diện khá phổ biến và cần thiết cho bất kỳ một blogspot nào. Tôi cũng đã tạo một số code tùy biến cho tiện ích này với những đặc trưng khác biệt. Thông thường tiện ích Bài viết mới nhất có ảnh đại diện chỉ dành cho toàn bộ bài viết trên blog hoặc chỉ dành cho 1 nhãn nào đó mà thôi. Tôi từng có ý tưởng bố trí tiện ích này gồm nhiều cột theo chiều ngang ở bài viết này.
Tôi tiếp tục nảy ra ý tưởng bố trí tiện ích này cho nhiều nhãn khác nhau xếp theo chiều nằm ngang (Recent posts with Thumbnails for Horizontal Labels), ý tưởng mà bạn chưa từng thấy trong cộng đồng Blogger.
Bạn có thể xem Demo dưới đây.
Tiện ích này thích hợp khi đặt ở cuối bài viết hoặc ở trên phần Footer của Template.
Để làm được điều này, bạn hãy thực hiện theo các bước sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
Đặt đoạn code dưới đây vào trước thẻ </head>.
Lưu Template.
Trong đoạn code trên bạn cần thay đổi tên nhãn (ví dụ: Thủ thuật Blog, Thủ thuật Blogger, …) tại các dòng
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
Bạn có thể thay đổi số bài viết hiển thị ở dòng numposts = 5.
Tiện ích này mặc định hiển thị cho 2 nhãn với bề rộng không gian hiển thị tiện ích tốt nhất là 600px, bạn cần điều chỉnh tham số width: 250px cho phù hợp với vùng không gian mà bạn muốn hiển thị tiện ích. Nếu muốn thêm nhãn thì điều chỉnh ở 2 dòng js ở trên.
Bước 2. Đặt đoạn code dưới đây vào một tiện ích HTML/JavaScript tại nơi muốn hiển thị tiện ích Bài viết mới nhất có ảnh đại diện.
Nếu bạn muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa Template, chọn Mở rộng mẫu tiện ích (Expand Widget Templates) và đặt đoạn code dưới đây vào sau dòng <div class='post-footer'> hoặc vào trước dòng <div class='post-footer-line post-footer-line-1'> hoặc dòng <div class='post-footer-line post-footer-line-3'> hoặc dòng <div class='post-footer-line post-footer-line-3'>.
Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay tên nhãn tương ứng với phần javascript ở Bước 1.
Chú ý: Nếu bạn đặt tiện ích này vào một tiện ích HTML/JavaScript thì bạn có thể đặt chung code ở Bước 1 vào trước code ở Bước 2 để dễ quản lý. Nếu bạn đặt code ở Bước 1 vào trước thẻ </head> mà gặp lỗi trong Template thì bạn đặt toàn bộ phần code giữa 2 thẻ <script type="text/javascript">, </script> (ở Bước 1) vào Notepad rồi lưu file với tên rcplabel.js, sau đó upload lên host rồi đặt code theo kiểu như sau vào trước thẻ </head> trong Template.
<script src="http://diachiwebhost.com/rcplabel.js" type="text/javascript"></script>
Tôi tiếp tục nảy ra ý tưởng bố trí tiện ích này cho nhiều nhãn khác nhau xếp theo chiều nằm ngang (Recent posts with Thumbnails for Horizontal Labels), ý tưởng mà bạn chưa từng thấy trong cộng đồng Blogger.
Bạn có thể xem Demo dưới đây.
Tiện ích này thích hợp khi đặt ở cuối bài viết hoặc ở trên phần Footer của Template.
Để làm được điều này, bạn hãy thực hiện theo các bước sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
Đặt đoạn code dưới đây vào trước thẻ </head>.
<script type="text/javascript">
// Recent Posts with Thumbnails for Horizontal Labels Widget by Huynh Nhat Ha
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
summaryPost = 60;
summaryTitle = 34;
numposts = 5;
var getlabels = 0;
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
function removeHtmlTagLabels(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
function showrecentpostslabels(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagLabels(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTagLabels(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_horizontal">';
output += '<h3>' + labeltitle[getlabels] + '</h3>';
output += outputinner;
output += '</div>';
document.write(output);
getlabels ++;
}
</script>
<style>
#rcposts_label {}
.rcposts_horizontal {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_horizontal h3 {background-color: #555;border-bottom: 1px solid #888;color: #BBB;font-family: Arial;font-size: 13px;font-weight: bold;margin: 0 0 10px;padding: 5px 0;text-align: center;text-case: sentence;}
.rcposts_horizontal img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_horizontal a.tlabel { font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>
// Recent Posts with Thumbnails for Horizontal Labels Widget by Huynh Nhat Ha
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
summaryPost = 60;
summaryTitle = 34;
numposts = 5;
var getlabels = 0;
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
function removeHtmlTagLabels(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
function showrecentpostslabels(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagLabels(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTagLabels(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_horizontal">';
output += '<h3>' + labeltitle[getlabels] + '</h3>';
output += outputinner;
output += '</div>';
document.write(output);
getlabels ++;
}
</script>
<style>
#rcposts_label {}
.rcposts_horizontal {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_horizontal h3 {background-color: #555;border-bottom: 1px solid #888;color: #BBB;font-family: Arial;font-size: 13px;font-weight: bold;margin: 0 0 10px;padding: 5px 0;text-align: center;text-case: sentence;}
.rcposts_horizontal img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_horizontal a.tlabel { font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>
Lưu Template.
Trong đoạn code trên bạn cần thay đổi tên nhãn (ví dụ: Thủ thuật Blog, Thủ thuật Blogger, …) tại các dòng
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
Bạn có thể thay đổi số bài viết hiển thị ở dòng numposts = 5.
Tiện ích này mặc định hiển thị cho 2 nhãn với bề rộng không gian hiển thị tiện ích tốt nhất là 600px, bạn cần điều chỉnh tham số width: 250px cho phù hợp với vùng không gian mà bạn muốn hiển thị tiện ích. Nếu muốn thêm nhãn thì điều chỉnh ở 2 dòng js ở trên.
Bước 2. Đặt đoạn code dưới đây vào một tiện ích HTML/JavaScript tại nơi muốn hiển thị tiện ích Bài viết mới nhất có ảnh đại diện.
<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>
Nếu bạn muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa Template, chọn Mở rộng mẫu tiện ích (Expand Widget Templates) và đặt đoạn code dưới đây vào sau dòng <div class='post-footer'> hoặc vào trước dòng <div class='post-footer-line post-footer-line-1'> hoặc dòng <div class='post-footer-line post-footer-line-3'> hoặc dòng <div class='post-footer-line post-footer-line-3'>.
<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>
Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay tên nhãn tương ứng với phần javascript ở Bước 1.
Chú ý: Nếu bạn đặt tiện ích này vào một tiện ích HTML/JavaScript thì bạn có thể đặt chung code ở Bước 1 vào trước code ở Bước 2 để dễ quản lý. Nếu bạn đặt code ở Bước 1 vào trước thẻ </head> mà gặp lỗi trong Template thì bạn đặt toàn bộ phần code giữa 2 thẻ <script type="text/javascript">, </script> (ở Bước 1) vào Notepad rồi lưu file với tên rcplabel.js, sau đó upload lên host rồi đặt code theo kiểu như sau vào trước thẻ </head> trong Template.
<script src="http://diachiwebhost.com/rcplabel.js" type="text/javascript"></script>
Không có nhận xét nào:
Đăng nhận xét