Label widget cho Blogger
Label widget là widget hiển thị các thẻ được gắn cho bài viết trên blog. Nhưng có nhiều cách để bạn có thể tùy biến widget của mình cho đẹp hơn, khác lạ hơn. Bài viết này mình sẽ chia sẻ một style của Label widget, các bạn có thể xem hình bên !
Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích Nhãn (Label). Trong hộp thoại cài đặt có 2 chế độ hiển thị là Danh sách và Cloud, các bạn chọn Cloud. Sau đó lưu lại.
Bước 2: Vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:
Chúc các bạn thành công !
Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích Nhãn (Label). Trong hộp thoại cài đặt có 2 chế độ hiển thị là Danh sách và Cloud, các bạn chọn Cloud. Sau đó lưu lại.
Bước 2: Vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:
/* Label widget by kjmagic.blogspot.com */
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: normal; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-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: normal; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
Chúc các bạn thành công !
Không có nhận xét nào: