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é!