Random post thumbnail hiệu ứng xoay

Thủ thuật tạo tiện ích random post thumbnail hiệu ứng xoay 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ể sử dụng css để chỉnh sửa lại theo ý thích của mình.
Random Post Thumbnail Hiệu Ứng Xoay

cài đặt Random post thumbnail hiệu ứng xoay

Phần cài đặt Random post thumbnail hiệu ứng xoay 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 và dán code bên dưới vào rồi lưu lại.
Code:
<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTNkf4FicQntbH23rLKV0t2ws8E8yNWVHZljcmCh88yX8Qrr_IMO4p7zS0-UUzLprVjuJdsJMcbzeDfxlHQsFDaop9DAYIIyo7WaC3xjfkt26N2UzURGbBsS4rk2UMDhM4GKjTRzFiHzM/"}}};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!
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji