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

Lấy cảm hứng từ tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnail widget) đặt ở cuối bài viết, tôi điều chỉnh một chút về code để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện đặt trên sibebar hoặc lowerbar. Tiện ích này hiển thị những bài viết mới nhất cho toàn blog hoặc cho một nhãn nào đó gồm ảnh đại diện và tiêu đề bài viết với hiệu ứng đổi màu khi rê chuột vào liên kết bài viết.

Xem Demo.

Để cài đặt tiện ích này, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là OK.

<script type="text/javascript">
// Recent Posts with Thumbnails widget by Huynh Nhat Ha
function eliminatetags(cual,longitud){
var summary = cual.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,longitud-1);
return summary;
}

function showrecentposts(json) {
var numposts = 12;
var entry, posttitle,posturl,postimg,postcontent,postcategory,postdate;
var output;
for (var i = 0; i < numposts; i++) {
entry = json.feed.entry[i];
posttitle = entry.title.$t;
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 ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWSch7vADcVltn1eMhnGMnRDty5JgHfaLuKM-zRhWo6pwaDzks6_jWIshqcimXXCWMas_7oXv_iG3P79sa1ms10vLsvnAZwFwdyHZdKbcfsc2Dqku0IJe8y-DmnI82Ulw9_i8_5SC296h3/s1600/sumpostsnoimage.png";
}
output = "<div class='recent_summary3'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "</div>";
document.write(output);
}
document.write('');
}
</script>
<style type="text/css">
.recent_summary3 {border:1px solid #555;float:left;height:55px;margin:1px;padding:5px;width:250px;}
.recent_summary3 a {color:#a52a2a !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3 img {height:46px;width:46px;float:left;}
.recent_summary3 h6 {float:right;height:45px;margin:0;width:180px;}
.recent_summary3 a:hover {color:#ffffff !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #338, #33F);background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');border:1px solid #33F;}
</style>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
<div style="clear:both;"></div>

Chú ý đoạn CSS ở trên sử dụng cho sidebar có bề rộng lớn hơn 250px, bạn cần chỉnh các tham số width:250px và width:180px cho phù hợp với bề rộng sidebar trong blogspot của bạn. Điều chỉnh số trong dòng max-results=7 để hiển thị số bài viết được hiển thị trong tiện ích. Nếu muốn sử dụng tiện ích cho một nhãn nào đó thì sử dụng code:

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Label Name?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Thay Label Name bằng tên nhãn và đừng quên thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé.