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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQdc1qnWZo_4P4VyvmGbmTRQSsvq2fhO1ByISXjBit4ZqyKzs3HUmOtyhGvHDP6T20HVzWvJOp2OdiLut66PmyrqCxM3UYX99r6l4cIURcueBA2ZG6pMPjcsEzxJUqTZgBbedKBgssob/"}}}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.