Random Post Thumbnail Hiệu Ứng Xoay

Random Post Thumbnail Hiệu Ứng Xoay
Thủ thuật này phát triển dựa trên nền tảng Bài viết ngẫu nhiên tốc độ cao của DuyPham,ở đây chỉ thêm thắt chút xíu CSS cho phần thumbnail thêm sinh động.Về màu khung viền của ảnh tại bài này để ở dạng đơn giản các bạn có thể phối lại màu theo ý thích của mình

áp dụng vào blogspot
Phần cài đặt rất đơn giản ta chỉ tiến hành thêm 1 tiện ích,đặt chỗ nào là tùy thuộc yêu cầu của bạn.Còn cách thêm tiện ích như thế nào thì bạn chỉ cần gõ(thêm tiện ích) trên google là sẽ có hàng loạt bài hướng dẫn ^^.
Code như sau:
<!--Random Post Start-->
<style type="text/css">
#random-posts img{float:left;margin-right:10px;border:1px solid #999;width:50px;height:50px;padding:4px;-webkit-transition:all 0.8s ease;-moz-transition:all 0.8s ease;transition:all 0.8s ease;background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);}
#random-posts img:hover{-moz-transform:scale(1.2) rotate(360deg);-webkit-transform:scale(1.2) rotate(360deg);-o-transform:scale(1.2) rotate(360deg);-ms-transform:scale(1.2) rotate(360deg);transform:scale(1.2) rotate(360deg);-webkit-box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,0,0,.4),inset 0 0 20px rgba(255,255,255,1)}
#random-posts li {border-bottom:1px dotted #666}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;//Số bài hiển thị trên tiện ích
var rdp_snippet_length=150;
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(json){rdp_total_posts=json.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 i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}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>
<!--Random Post End-->

Chúc thành công!
Nhận xét

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