Hôm nay tôi sẽ chia sẻ thủ thuật blogger với cách làm một widget nhãn cloud đẹp với hiệu ứng hover cho blogger. Hiệu ứng này chỉ phát huy đặc biệt với Blogger. Blogger Tag Clouds hiển thị tất cả các loại nhãn hoặc có mặt trong blog. Trên blogger mặc định chỉ được thiết kế đơn giản nên nó nhìn không được đẹp cho lắm. Chính vì thế mình chia sẻ cách thêm hiệu ứng cho nhãn trên blogger chỉ bằng CSS, những nhìn sẽ hấp dẫn hơn các blogger mặc định phong cách nhãn điện toán đám mây mới. bạn có thể nhìn thấy hình ảnh xem trước trong ảnh chụp màn hình của tôi để biết làm thế nào là đây là. Tôi hy vọng bạn sẽ thích nó.
 |
| Thêm hiệu ứng cho nhãn trên blogger |
Xin lưu ý: - Trước khi áp dụng phụ tùng nhãn này, bạn phải thiết lập phong cách nhãn hiệu của bạn để đám mây và sao lưu mẫu của bạn cho an toàn .
Làm thế nào để Thêm Nhãn Tuỳ chỉnh đẹp như vậy?
Để thêm Widgets này trong Blog của bạn theo bạn thực hiện các bước đơn giản một cách cẩn thận.
1. Đăng nhập vào Blogger Bảng điều khiển sau đó đi đến Layout & nhấp vào Thêm một tiện ích tùy chọn và chọn Label.
2. Bây giờ thiết lập các cài đặt được hiển thị trong hình dưới đây.
 |
| thiết lập các cài đặt được hiển thị widgets |
3. Bạn phải Chọn tùy chọn đám mây từ các thiết lập hiển thị.
4. Bây giờ bấm Save & nút đi cho CSS .
5. Bây giờ hãy nhấp Template tùy chọn và sau đó nhấp vào Edit HTML nút.
6. Bây giờ bấm
7. Bây giờ Sao chép mã dưới đây và dán nó ở trên ]]> </ b: skin> tag.
.label-size{
padding: 3px; text-transform: uppercase; margin:0 2px 6px 0; border: solid 2px
#061ED5; border-radius: 3px; float:left; text-decoration:none; font-size:14px;
color:#000000; background: #000000 ; } .label-size:hover {background: #0faefd ;
border:5px solid #000000; text-decoration: none; -o-transition: all 0.5s
ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s
ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
-o-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform:
rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); filter:
progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,
M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455,
sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform:
uppercase; float:left; text-decoration: none; color:#0FAEFD; } .label-size
a:hover { text-decoration: none; color:#000000;} 8. Bây giờ bấm Save template nút và xem blog của bạn.
Nếu bạn thấy bài viết này là hữu ích thì vui lòng chia sẻ bài viết này trên mạng của bạn hoặc các trang web mạng xã hội. Cảm ơn đã ghé thăm trang của tôi.
Bài đọc thêm:
Thủ thuật chèn bàn phím vào trong blogger
0 nhận xét:
Đăng nhận xét