Thứ Hai, 4 tháng 6, 2012

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

Đây là một tiện ích được phát triển bởi Huỳnh Nhật Hà. Khá đẹp và đang được thuthuat-mya5class.blogspot sử dụng.Bạn có thể xem qua hình ảnh sau hoặc Demo ở trang chủ của blog.
Cách làm Đăng nhập Blogger, vào Design >> Thêm tiện ích. 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 Hafunction 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;} elseif ("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://thuthuat-mya5class.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://thuthuat-mya5class.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>

Chuyên mục:

Không có nhận xét nào:

Đăng nhận xét

 
LÊN ĐẦU TRANG