Tiện ích Bài viết mới nhất có ảnh đại diện bản full

Tôi đã tạo một số kiểu tiện ích Bài viết mới nhất có ảnh đại diện. Bạn có thể dùng từ khóa Recent Posts tìm trên công cụ tìm kiếm của blog để lựa chọn tiện ích phù hợp cho blog của mình. Từ kiểu tiện ích Bài viết mới có ảnh đại diện bố trí cho các nhãn nằm ngang, tôi có điều chỉnh một vài điểm về code để cho ra lò tiện ích Bài viết mới nhất có ảnh đại diện phiên bản hoàn chỉnh (Recent Posts with Thumbnails Full Version by Huynh Nhat Ha). Phiên bản này hiển thị những bài viết mới nhất có ảnh đại diện, tiêu đề bài viết cùng với phần tóm tắt (snippet) bài viết.

Tiện ích này có thể áp dụng cho toàn bộ blog cũng như cho riêng bất kỳ một nhãn nào đó. Bạn có thể xem Demo dưới đây.

Bài viết mới nhất

Để cài đặt tiện ích, bạn hãy thực hiện như sau. Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt toàn bộ phần code dưới đây vào phần nội dung của tiện ích.

<style type="text/css">
#rcposts_full {}
.rcposts_hafull {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_hafull 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_hafull a.haclass {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>

<script type="text/javascript">
// Recent Posts with Thumbnails Full Version by Huynh Nhat Ha
function removeHtmlTag(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 showrecentpostsfull(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="haclass" href="' + posturl + '">' + removeHtmlTag(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTag(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_hafull">';
output += outputinner;
output += '</div>';
document.write(output);
}
</script>

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://img524.imageshack.us/img524/6449/noimageb.png";
showRandomImg = true;
summaryPost = 50;
summaryTitle = 30;
numposts = 5; // Số bài viết hiển thị
</script>

<div id="rcposts_full">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostsfull'></script>
<div style="clear:both;"></div>

Trong đoạn code CSS chú ý tham số width: 250px;, điều chỉnh chiêu rộng phù hợp với chiều rộng phần sidebar là nơi thường đặt tiện ích này. Bạn có thể điều chỉnh số bài viết hiển thị (numposts = 5) và thay huynh-nhat-ha bằng tên blogspot của bạn. Lưu tiện ích là OK.

Nếu bạn muốn áp dụng tiện ích này cho một nhãn nào đó thì thay đoạn code được đánh dấu màu đỏ ở trên bằng đoạn code sau (và thay Tên nhãn bằng nhãn mà bạn muốn áp dụng tiện ích).

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>