Tiện ích bài viết xem nhiều với hiệu ứng chữ động cho Blogger

Thêm một tiện ích bài viết được xem nhiều là một điều không thể thiếu đối với mỗi người sử dụng Blogger. Tiện ích này được liệt kê tối đa 10 bài viết được xem nhiều nhất theo: mọi thời gian, theo tháng, theo tuần. Và nếu bạn muốn Blog của bạn có 1 tiện ích xem nhiều thì bằng thao tác: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> Bài đăng phổ biến.
Còn ở bài viết này, Lãng Tử Studio chia sẻ với bạn một tuỳ chỉnh của tiện ích vừa thêm, đó là thêm hiệu ứng những dòng mô tả của bài đăng đó trong tiện ích. Bạn sẽ thấy được rõ hơn qua link demo trực tiếp dưới đây. Và nếu bạn thích thì có thể tiếp tục theo dõi để thực hiện làm hiệu ứng đó nhé!

XEM DEMO

Hướng dẫn thêm tiện ích bài viết xem nhiều với hiệu ứng chữ động cho Blogger

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Nhấn phím Ctrl + F tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
/* Tiện ích bài viết xem nhiều với hiệu ứng chữ động cho Blogger - www.itviet360.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%}
Bước 3: Lưu mẫu và xem kết quả!

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360