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/AVvXsEhHN8pWQkkSGe4OpeZPhs0dBgu_q1_Qod48CLW_mETERGVcrgFthI509ltWsHM_vEpje8my0SgEkhnbeTKVJ45Vaduman04wje4Tcw3DstL-VKYEWy9VAVUePJ0OR6GVHlI3_CmYm4rIApy/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://chipkool.blogspot.com/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
<div style="clear:both;"></div>
