Tiện ích bài viết mới có hình ảnh cho Blogger

By Hoàng Luật → Tuesday, July 03, 2012
Tiện ích Recent Posts với hình ảnh thu nhỏ - Hiện tại thì mình cũng đang dùng trên blog này. Tiện ích này có một số tính năng như: nhận biết bài viết nào đã tắt Nhận xét, hình ảnh hỗ trợ cho cả video trên Youtube và gần đây mình thấy ảnh ở Photobucket cũng được lưu trữ, số lượng bài viết được tải về từ feed lấy đủ cho số bài viết bạn muốn hiển thị để tránh dư thừa. Những tính năng này đều đã có trong các tiện ích Related PostsRandom Posts.



Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
Nếu đã áp dụng tiện ích Bài viết ngẫu nhiên tốc độ cao cho Blogger thì bạn bỏ qua bước này và thay #random-posts img{ thành #random-posts img,#recent-posts img{ cho đồng bộ khi muốn chỉnh sửa.

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Posts. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Thay 5 bằng số bài viết bạn muốn hiển thị, 150 là số ký tự của đoạn trích dẫn nội dung bài đăng. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.
Nguồn Duypham
Hoàng Luật

Học 14TCLC1 tại Đại học Bách Khoa Đà Nẵng

18 comments to ''Tiện ích bài viết mới có hình ảnh cho Blogger"

ADD COMMENT
  1. sao anh tạo cái này mà ko có hình ảnh giống cái random post nhỉ?

    ReplyDelete
    Replies
    1. Không có luôn hả anh?:-o
      Lạ nhỉ? :).

      Delete
    2. To võ Duy: do csss là sao hả bạn? bạn có thể giải thích kĩ hơn được ko? tại mình gà lắm :))

      Delete
    3. Uhm ko có luôn em à. nên anh xóa rồi :-)

      Delete
    4. Anh để đó đi. Xóa rồi thì em chịu :-?

      Delete
    5. Anh lười rùi, mà thấy bài mới là trên trang chủ rồi mà. x->

      Delete
    6. Ờ =D
      Vậy nên em cũng đâu có dùng :)

      Delete
    7. em chỉ cho anh tạo mấy cái emotion này vào blog đi, anh chèn bên thuthuatblogger và namkna mà không thành công.

      Delete
    8. Anh làm theo bài này nhé:
      http://blog.duypham.info/2012/02/emoticons-mutilmedia-cho-thread-comment.html

      Delete
  2. Anh làm rồi nhưng nó không hiển thị các kí tự tương ứng như của em để người đọc cóp thể xem và tạo biểu tượng cảm xúc được.

    ReplyDelete
    Replies
    1. À. Bài đó là DuyPham nâng cấp lên nên bác phải làm thêm Bước 2 và 3 của bài này nữa nè: http://blog.duypham.info/2010/11/emoticons-for-blogspot-work-in-ie.html :)

      Delete
  3. Luật ơi. Comment của em đẹp thế. Em có thể share riêng code comment được không....?

    ReplyDelete
    Replies
    1. Cái này là em sửa template của bác Tiến mà code bác ấy mã hóa hết chắc không share được rồi. Bác không cho comment vào bài đăng à??

      Delete
  4. a làm giúp e vs, e làm mãi nhưng k dc

    ReplyDelete
    Replies
    1. Bạn làm không được chỗ nào nói rõ hơn để mình giúp. Có tài khoản gì ib cho dễ

      Delete

- Không nói chuyện thô tục thiếu văn hóa,...
- Không spam. Còn lại thì chém gió thoải mái hết! :D
@ Có thể chèn ẢnhVideo Youtube bằng cách paste link trực tiếp