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

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.


Để 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/AVvXsEhjRrCuGoz6ochzpjfkHDsFBWct5vBMLxvyp9Hqq1c2ZKpRvHdJKOEp8bV30pDLf2U_A7tG4jbDebsZ5pN4Hkxg7I5U3zmmVD1ZNMW20WPlXwQFQMDTzTUQ8tHmHasim2jkw4T4tQdXgvah/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://duckienit.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://duckienit.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 duckienit thành tên blogspot của bạn nữa nhé.


Nếu khoảng cách giữa các dòng quá nhỏ thì các bạn thêm thuộc tính line-height:


.recent_summary3 a {color:#a52a2a !important;display:block;font-size:11px !important;font-weight:normal; line-height: 15px !important;}

Nếu muốn thay đổi màu của text, các bạn thay đổi giá trị sau 'color:' của 'summary3 a' và 'summary3 a:hover'. Để tìm mã màu, các bạn vào trang wed sau: Color Hex, gõ mã màu vào và search để biết màu đang tìm là màu gì.