Recent posts hiệu ứng rơi với ảnh thumbnail xoay tròn.

Tiện ích bài viết gần đây với hiệu ứng rơi hay up thì đã có nhiều.Ở bài này xin góp thêm một hiệu ứng đó là ảnh thumbnail xoay tròn khi rê chuột vào ảnh.
Để tạo tiện ích này công việc phải làm là tạo thêm 1 tiện ích cho blog và dán đoạn code sau vào rồi lưu lại.Còn bố trí nó ở chỗ nào là tùy yêu cầu của bạn.
 <style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By Dautocrazy.Blog ======== */

#dautocrazy-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#dautocrazy-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#dautocrazy-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://lh3.googleusercontent.com/-vntZ_UAB4FQ/UY2ZiSooP7I/AAAAAAAAZj4/b1KEQNLCWQs/s211/Dautocrazy.Blog-post.jpg) repeat-x;
border: 1px solid #ddd;
}

#dautocrazy-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#dautocrazy-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#dautocrazy-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);
}

#dautocrazy-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;
}

/* ========== Scrolling Recent Posts Widget By DautoCrazy.Blog ======== */

-->
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-Ex80XmUZTiM/UNS5L73VJZI/AAAAAAAAD78/UmtrsE3pYHs/s72/123.gif";
imgr[1] = "https://lh5.googleusercontent.com/-Ex80XmUZTiM/UNS5L73VJZI/AAAAAAAAD78/UmtrsE3pYHs/s72/123.gif";
imgr[2] = "https://lh5.googleusercontent.com/-Ex80XmUZTiM/UNS5L73VJZI/AAAAAAAAD78/UmtrsE3pYHs/s72/123.gif";
imgr[3] = "https://lh5.googleusercontent.com/-Ex80XmUZTiM/UNS5L73VJZI/AAAAAAAAD78/UmtrsE3pYHs/s72/123.gif";
imgr[4] = "https://lh5.googleusercontent.com/-Ex80XmUZTiM/UNS5L73VJZI/AAAAAAAAD78/UmtrsE3pYHs/s72/123.gif";
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;//Số bài cần trình chiếu
home_page = " Thay URL Blog của bạn vào đây ";
limitspy=4;//Số bài có trên tiện ích cùng một thời điểm
intervalspy=4000;//Tốc độ rơi
</script>

<div id="dautocrazy-widget">
<script src='http://blogdautocrazy.googlecode.com/files/recent-posts-spy.js' type='text/javascript'></script>
</div>