Popular Posts Widget là một Widget cung cấp bởi Blogger và chúng ta có thể thêm nó vào blog của chúng tôi. Widget này sẽ hiển thị các bài viết được xem nhiều nhất của blog của bạn, đó có thể là các tháng hoặc trong tuần hoặc tất cả các thời gian. Bạn có thể chọn cách viết phổ biến là để được hiện thị. Bởi mặc nó cho thấy một hình ảnh (nếu có bài) và Tiêu đề của bài viết tiếp theo là nội dung của bài viết bao bọc bởi 20-25 Words. Bài viết này là một hướng dẫn để Phong cách mà bài viết được ưa thích Widget cho một tuyệt vời nhiều - màu được ưa thích bài Widget. Thủ thuật blogspot này được thực hiện bằng cách sử dụng CSS3 đơn giản hơn là sử dụng JavaScript phức tạp. Một tính năng tuyệt vời của thủ thuật này là mỗi bài viết được hiển thị trong mỗi màu UI Flat, do đó, những màu sắc bắt mắt Blog của khách truy cập của bạn và họ có xu hướng đi mà thậm chí nếu các bài viết không phải là quá tốt.
 |
| Thủ thuật tạo hiệu ứng popular posts nhiều màu sắc cho blogger |
Đặc điểm của Widget này
- UI Flat màu sắc được sử dụng rất đẹp(nó sẽ thu hút sự chú ý người sử dụng)
- Tự động đánh số bài
- CSS3 Hiệu ứng di chuyển chuột
- Đăng nhập vào tài khoản Blogger của bạn và Active Popular Posts Widget
- Đầu tiên Add Popular bài Widget cho Blogger
- Tới Layout -> Chọn "Add a Gadget" và Tìm chọn Popular Posts Widget trong danh sách Widget xuất hiện.
- Hãy cho Tiêu đề của widget, chọn cách viết phổ biến nên được xuất hiện (trong tháng, hoặc tuần hoặc Tất cả thời gian) và nhấn Save
- Tới Template -> Edit HTML , Tìm
Sao chép đoạn mã sau và dán ngay trên nó:
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
- Nhấn vào Preview Template (Bạn có thể thấy các mẫu mà không lưu)
- Lưu Template. Xem blog của bạn đã sẵn sàng để thu hút người dùng.
Tôi nghĩ rằng bài viết này sẽ giúp bạn nếu như vậy xin vui lòng chia sẻ và Like chúng tôi để lây lan Blog của chúng tôi. Nếu có bất kỳ vấn đề với trick này không ngần ngại hỏi, làm bình luận ở đây ...
Tham khảo thêm:
Thêm hiệu ứng cho nhãn trên blogger
0 nhận xét:
Đăng nhận xét