HomeBài đăng ngẫu nhiên với hiệu ứng thumbnail xoay tròn
Chủ Nhật, 26 tháng 4, 2015
Ảnh nhỏ đại diện sẽ xoay tròn khi rê chuột vào ảnh tạo ra một hiệu ứng cũng khá đẹp mắt.
<style type="text/css" media="screen">
#helperblogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
font-family:calibri;
}
#helperblogger-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#helperblogger-widget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdIxasFBH__wtIDXD575K9eKZd5uohl1_QI_OWn9b5mouKggo8_kSSA7da3M30osrgIqkrb7Rj3iTUfWT9sfFItRF1gifQSn4QRfiJi1uNOaq5hBUh_j1to-qWfrGPFAwYsuxzoW5dpY/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#helperblogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#helperblogger-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
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: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-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);
}
#helperblogger-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-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);
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VIT5N0brbBGVNsoMD-hlqvC9REtJ3_t8jNMHt-LOgvRQyNf2BwGuovg1kfkEAVNs92BRMF5yRMmv1PCOgDr63cJ53Tfy4DRI96W6Jse-LCpMcxKsfU7t-CLWrtTESPydF8lvVMsabZM/s1600/no-thumbnail.png.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VIT5N0brbBGVNsoMD-hlqvC9REtJ3_t8jNMHt-LOgvRQyNf2BwGuovg1kfkEAVNs92BRMF5yRMmv1PCOgDr63cJ53Tfy4DRI96W6Jse-LCpMcxKsfU7t-CLWrtTESPydF8lvVMsabZM/s1600/no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VIT5N0brbBGVNsoMD-hlqvC9REtJ3_t8jNMHt-LOgvRQyNf2BwGuovg1kfkEAVNs92BRMF5yRMmv1PCOgDr63cJ53Tfy4DRI96W6Jse-LCpMcxKsfU7t-CLWrtTESPydF8lvVMsabZM/s1600/no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VIT5N0brbBGVNsoMD-hlqvC9REtJ3_t8jNMHt-LOgvRQyNf2BwGuovg1kfkEAVNs92BRMF5yRMmv1PCOgDr63cJ53Tfy4DRI96W6Jse-LCpMcxKsfU7t-CLWrtTESPydF8lvVMsabZM/s1600/no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VIT5N0brbBGVNsoMD-hlqvC9REtJ3_t8jNMHt-LOgvRQyNf2BwGuovg1kfkEAVNs92BRMF5yRMmv1PCOgDr63cJ53Tfy4DRI96W6Jse-LCpMcxKsfU7t-CLWrtTESPydF8lvVMsabZM/s1600/no-thumbnail.png.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://donaldtrang.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<center><div id="helperblogger-widget">
<script type='text/javascript'>
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}
).bind("mouseleave",function(){jQuery(this).trigger("start")}
)}
);(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")}
);o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f}
);l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}
).bind("start",function(){k=true}
);function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}
).prependTo(l);l.find("> li:last").animate({opacity:0}
,1000,function(){p.animate({height:h}
,1000).animate({opacity:1}
,1000);e(this).remove()}
);m++;if(m>=o){m=0}}
setTimeout(n,g)}
n()}
)}}
)(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}
for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}
for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}
if("content" in w){var r=w.content.$t}
else{if("summary" in w){var r=w.summary.$t}
else{var r=""}}
postdate=w.published.$t;if(j>imgr.length-1){j=0}
img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}
cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}
var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}
document.write("</ul>")}
document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
</script></center>
</div>
Thay http://donaldtrang.blogspot.com/ bằng link blog của bạn.
Thay các thông số và kích thước theo ý muốn !
Bài liên quan
Comments[ 0 ]
Đăng nhận xét