Thứ Sáu, 7 tháng 6, 2013

Hiệu ứng ẩn hiển avatar cho Comment Blogger

 Code này chỉ là trang trí thêm cho Blogger thêm sinh động, cảm giác mới hơn khi Comments.
Mới dùng thử mấy ngày mà thấy có người đã chia sẻ nên cũng Share cho anh em.
Chế lại và sử dụng code của CSS3 Minimalistic Navigation Menu
 ẩn hiển avatar cho Comment Blogger
Chèn Code dưới đầy vào phía trên thẻ ]]></b:skin>

Code:
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container { visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container {visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}

 Comments để xem kết quả

 ẩn hiển avatar cho Comment Blogger 

 Hiệu ứng ẩn hiển avatar blogspot

 Comment Blogger 




Không có nhận xét nào:

Đăng nhận xét