Bài viết ngẫu nhiên dạng thumbnail đẹp cho blogger

Random Posts with thumbnail effect blogspot
Ramdon posts là thủ thuật gọi ngẫu nhiên một số bài viết từ nguồn cấp feedburner của blog bạn. Hôm nay namkna sẽ giới thiệu cho các bạn tiện ích bài viết ngẫu nhiên dạng hình ảnh thumbnail và hiệu ứng hover tên bài viết cùng với mô tả của bài viết (Random Posts with thumbnail effect) dành cho blogger.
Các bạn có thể xem ảnh minh họa hoặc demo:

VIEW DEMO

» Cách thêm Random Posts với hình ảnh thumbnail cho blogspot!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Bố cục (Layout)
3. Chọn Thêm tiện ích (add widget)
4. Tạo một widget HTML/Javascript và thêm đoạn mã bên dưới vào đó:
<style type="text/css">
#random-posts li{width:90px;height:90px;margin-right:12px;float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:90px;height:90px}
#random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#35BBCB;color:#fff;padding:5px;font-size:90%;transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .isinyako{right:0}
#random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible}
.isinyako span{font-size:90%;color:#B30B0B}
.isinyako p{font-size:90%;}
</style>
<span class="glap">
<ul id="random-posts">
<script type="text/javaScript">
var rdp_numposts = 6;
var rdp_snippet_length = 50;
var rdp_info = 'yes';
var rdp_comment = 'Nhận xét';
var rdp_disable = 'Tắt nhận xét';
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);

function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>

<script type="text/javaScript">
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h2>'+m+"</h2>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
</script>
</ul></span>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120);
//]]></script>
5. Lưu tiện ích lại:

» Tùy chỉnh:

  • width:90px; là chiều rộng của ảnh thumbnail.
  • height:90px; là chiều cao của ảnh thumbnail.
  • top:-40px khoảng cách của khung hover tooltip so với lề trên của hình ảnh.
  • var rdp_numposts = 6; số ảnh thu nhỏ sẽ hiển thị trong tiện ích.
  • var rdp_snippet_length = 50; số ký tự mô tả
5- Lưu tiện ích lại và quay trở lại blog của bạn để xem kết quả nha.

Nếu gặp bất cứ khó khăn nào khi áp dụng hãy để lại comment của bạn ở bên dưới mình sẽ hướng dẫn và giải đáp cụ thể cho các bạn :) Và cuối cùng đừng quyên chia sẻ bài viết này đến bạn bè của bạn nha.
Plus

Giới thiệu Namkna

Chào mừng bạn đến với Terocket, nơi chia sẻ và bàn luận về các vấn đề công nghệ, viễn thông, tin học, máy tính, phần mềm, internet và các thủ thuật công nghệ phổ biến nhất.
    Website Comment
    Facebook Comment

18 nhận xét:

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. Thế tớ muốn widget này không hiện ở trang chủ, mà chỉ hiện ở bài đăng thôi thì làm thế nào namkna:-?

    Trả lờiXóa
  3. A namkna cho mình hỏi, Blog của mình hiện qua nhiều biết viết ngoài trang chủ, mình đã thay đổi một số bước cơ bản theo hướng dẫn của Template đó những vẫn không được, a có cách nào khắc phục việc này không ạ, tới giờ đã hiện hơn 40 bài zồi khiến blog quá zài zòng... mong a zúp đỡ!

    Trả lờiXóa
    Trả lời
    1. Vào phần Cài đặt của blog. Và thay đổi số bài ngoài trang chủ rồi luu lại nha.

      Xóa
  4. sao mình bỏ code vào là blog treo luôn vậy, ko làm đc j nữa hết, nó cứ load thôi

    Trả lờiXóa
    Trả lời
    1. Bạn hãy áp dụng để mình kiểm tra nha, Đoạn code này mình test trên blog demo nó vẫn chạy rất oke.

      Xóa
  5. Thế mình muốn load het các bài viết tuần tự từ mới tới cũ chứ ko pải random mà dữ liệc được lọc theo các label thì làm sao hả bạn ? cám ơn bạn

    Trả lờiXóa
    Trả lời
    1. Bạn có thể sử dụng tiện ích Recent post nha bạn. hãy chọn một loại bạn thích tại đây: RECENT POST ĐẸP

      Xóa
  6. N ơi cho mình hỏi xíu. Mình add một vài code vào Template> Edit HTML nhưng bây giờ mình click vào phần Template thì không thể chính sửa HTML được nữa cái trang nó cứ ở chỗ độ load xoay vòng hoài. N biết cách nào khắc phục sự cố này không ? Cám ơn N

    Trả lờiXóa
  7. sao mình bỏ code vào là blog treo luôn vậy, ko làm đc j nữa hết, nó cứ load thôi...hi vọng sớm được giair đáp thank bạn

    Trả lờiXóa
    Trả lời
    1. Âp dụng và để lại địa chỉ trang của bạn để được hỗ trợ nha.

      Xóa
  8. Còn cái code CÓ THỂ BẠN THÍCH! cuối bài giống trên trang web này thì sao bạn

    Trả lờiXóa
  9. Còn mình muốn hiện bài viết ngẫu nhiên ở cuối mỗi mỗi bài viết giống như terock.com thì sao.

    Trả lờiXóa
  10. Bạn ơi, làm sao để thêm hiệu ứng như vậy cho trang nhãn (khi mình rê chuột lên ảnh sẽ hiên ra bài viết tóm tắt) giống như trang này: http://duocminhanh.com.vn/duoc-lieu-can-mua-b604080.html. Mình lấy code của trang đó cắt ghép đủ thứ cũng không được. Bạn có template nào tương tự như vậy không cho mình xin với. email của mình: nvsieu@gmail.com. Cảm ơn bạn nha.

    Trả lờiXóa
  11. m ko biết tại sao cái tamplate của m cứ thêm chức năng ''bài viết ngẩu nhiên'' vào là đơ 1 loạt trang....toàn phải tắt đi,xóa code xong ms vào lại dk...b giúp mình vơi

    Trả lờiXóa