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. :44)Bạn có thể xem Demo dưới đây.
Thủ thuật Blogger
Tiện ích Bài viết mới nhất dành cho…
Trong quá trình phát triển chương trình cộng tác viên, mình ...
Theo dõi bài viết mới nhất từ blog…
Có một số cách để bạn theo dõi bài viết mới nhất từ các blog ...
Bài viết mới nhất cho nhãn không dùng…
Dạo này do bận viết bài phân tích tiền tệ nên mình không còn ...
Bài viết mới nhất có ảnh đại diện…
Trên blog này, bạn có thể tìm thấy nhiều kiểu tiện ích Bài viết ...
Tiện ích Phim mới nhất cho blogspot…
Đối với các blogspot chuyên về phim, sau khi sử dụng thủ thuật ...
Thư viện jQuery
Tiện ích Nhận xét mới nhất có Ava…
Tiện ích Nhận xét mới nhất có Avatar (Recent Comments with Avatar ...
Tiện ích Nhận xét mới nhất không dùng…
Để một blogspot có tốc độ load trang nhanh nhất trong một chừng ...
Tiện ích Nhận xét mới nhất sử dụng…
Mới đấy mà đã qua một tuần đi công tác, không có thời gian cũng ...
Tiện ích Nhận xét mới nhất kiểu Author…
Còn nhớ khi tôi viết bài viết về tiện ích Nhận xét mới nhất ...
Tiện ích Nhận xét mới nhất có i…
Tiện ích Nhận xét mới nhất có icon (Recent Comments with Icons) ...
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>
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>
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>
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>
26/11/2013 - 0 Nhận xét
09/12/2013 - 0 Nhận xét
26/11/2013 - 0 Nhận xét
08/12/2013 - 0 Nhận xét
03/12/2013 - 0 Nhận xét
Thống Kê :
Comments[ 0 ]
Đăng nhận xét