Vuông Bài viết phổ biến Widget với quay Effect
Phổ biến bài viết là một tiện ích mà tất cả các blogger sử dụng tốt. Từ các blog nhỏ để tất cả các blog lớn, bạn có thể nhìn thấy bài viết phụ tùng ưa thích. Nó giúp làm giảm tỷ lệ trả lại của blog của bạn.
Điều này là một chút khác nhau và trông thanh lịch hơn. Nó có tác dụng luân phiên khi bay lượn trên bất kỳ hình thu nhỏ.
Để thêm tiện ích này trong blog của blogger của bạn làm theo các bước dưới đây đưa ra.
Thêm CSS trong Edit HTML
Trước hết đi vào Blog Tiêu đề → Giao diện → Thêm Widget → Bài viết phổ biến. Thêm các widget và không quên kiểm tra tùy chọn Hiển thị hình thu nhỏ.
Thứ hai đi vào Blog Tiêu đề → Template → Edit HTML. Mở rộng <b:skin> .... </ b: skin> nếu nó không được mở rộng. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. [Theo trình biên tập HTML mới]
Thêm mã dưới đây đưa ra chỉ trên ]]></b:skin>
.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}
Một khi bạn đã thêm mã lưu mẫu. Bạn đang thực hiện bây giờ. Bây giờ bạn và truy cập của bạn có thể nhìn thấy bài viết widget này được ưa thích tuyệt vời với xoay hiệu ứng di chuột trong blog của blogger của bạn.