Popular post với hiệu ứng hiệu ứng tooltips mô tả

Phần mô tả cho bài viết trên tiện ích popular post là một phần chiếm khá nhiều diện tích và làm cho bố cục tiện ích trỏe nên bj xấu đi, để giải quyết tình trạng đó thì các blogger thường sử dụng hiệu ứng tooltips để ẩn hiện phần mô tả- khi dê chuột vào liên kết bài đăng thì một đoạn văn bản sẽ hiện ra. Hôm nay mình sẽ hướng dẫn các bạn tạo một tiện ích popular như thế.

DEMO

#Thêm tiện ích Popular post

Nếu đã có một tiện ích này rồi thì bạn không cần thực hiện bươcs này

1. Đăng nhập Blogger

2. Bố cục > Thêm tiện ích

3. Bài viết phổ biến (popular post)

Chúng ta nên chọn hiện thị hình ảnh thu nhỏ và đoạn trích

4. Lưu lại

#Thêm CSS

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trên thẻ vừa tìm

/* http://khanh98.blogspot.com/2015/01/popular-post-voi-hieu-ung-hieu-ung-mo-ta.html*/
.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%}
/* http://khanh98.blogspot.com/2015/01/popular-post-voi-hieu-ung-hieu-ung-mo-ta.html*/

5. Lưu mẫu lại

ABT