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, ITViet360 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é!
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ả!
Read more: http://www.itviet360.com/2015/03/tien-ich-bai-viet-xem-nhieu-voi-hieu-ung-chu-blogger.html#ixzz3yStTFieF
EmoticonEmoticon