Hiệu ứng hover chuột Recent Post Widget cho blogger


Hiệu ứng hover chuột cho recent post

Hiệu ứng hover chuột Recent Post Widget cho blogger


Đây là một thủ thuật tạo recent post mà khi hover chuột qua sẽ tạo nên hiệu ứng hiện bài viết đang ở chế độ ẩn sang nhìn thấy, và hình ảnh xoay một góc lệch vị trí ban đầu, dưới nền sáng lên. Hãy xem đoạn code hiệu ứng hover chuột Recent Post Widget cho blogger để biết rõ hơn về code này nhé!

Hướng dẫn tạo Hiệu ứng hover chuột Recent Post Widget cho blogger

Bước 1: Đăng nhập Blogger → (Layout) → Add Widget → HTML/JavaScript


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  
margin:2px;  padding:0px 0px;  background: 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3OblFUUaSstWGAggDTOnMzxivNxeqGijCnTdV8aE-ECDO3FyIbXHhGPWuYoEMxT8-rDug0dWwOzfYI88JX0M2q8loQ4V72n1grW5s7TipdSOua44dBY7FiR7A3j6nE0YJQqevkBO8Qur/s1600/LOAD+(66).gif')
no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none 
!important;  margin:0px 0px !important;  padding:0px 0px !important;  
background:transparent !important;  display:none;}
#post-gallery .rp-item 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);}
#post-gallery .rp-item .rp-child {  position:relative;  
top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  
background-color:white;  border-bottom:5px solid #1BA1E2;  
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px
 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 
0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  
display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Số bài viết được hiển thị    numchar     = 200,      // Số kí tự được nhìn thấy
    rcFadeSpeed = 600,      // Tốc độ của hiệu ứng
    blogURL     = "http://1thuthuat.blogspot.com/";       // Your Blog URL
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>

Lưu lại và kiểm tra xem hiệu ứng hover chuột Recent Post Widget với hiển thị ảnh cho blogger đã được chưa nhé!
Đi lên