Style Popular Posts đẹp với hiệu ứng khi rê chuột

Bài viết này mình tiếp tục chia sẻ một style cực chất nữa của tiện ích Popular Posts cho Blogger (xem hình trên). Trước khi thực hiện thủ thuật, blog của bạn phải có tiện ích Popular Posts. Nếu chưa có các bạn vào Bố cục, tạo một tiện ích Popular Posts (bài đăng phổ biến), cài đặt các thông số và lưu lại.

Để có một style Popular Posts cho blog như hình trên, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* Popular Posts Widget Edited by kjmagic.blogspot.com */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Posts Widget Edited by kjmagic.blogspot.com */

Nếu hiểu biết về code, các bạn có thể tùy chỉnh màu sắc, font chữ... cho tiện ích trong code CSS.

Chúc các bạn thành công !