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, 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é!
Tiện ích bài viết xem nhiều với hiệu ứng chữ động cho Blogger

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ả! Chuyên mục: , , ,

2 comments:

  1. Bạn cho mình hỏi cách để ghi số tiền lên hình ảnh sản phầm như vậy phải làm sao ạ
    Rồi khi vào xem chi tiết sản phẩm thì mới hiển thị nội dung về sản phẩm đó
    Demo: http://bloggerstore-javatemplates.blogspot.in/

    Thanks

    ReplyDelete
    Replies
    1. Temp này chắc có hướng dẫn sử dụng hoặc bạn có thể view source để xem nhé. Theo mình nhìn thấy thì bạn thêm vào bài viết sản phẩm đó: (Mở ngoặc)span class="item_price"(đóng ngoặc)$22.50(Mở ngoặc)/span(Đóng ngoặc)

      Delete