Thứ Sáu, 21 tháng 11, 2014

Blogger Labels mặc định chỉ là một widget, không quá nhiều hấp dẫn và người dùng được chán với nhãn xấu xí với widget đó. Hãy xem xét rằng trang web của bạn có sạch sẽ, phong cách và cái nhìn đẹp nhưng label đó làm mất đi sự chuyên nghiệp, vì vậy một ấn tượng xấu của nó đối với độc giả của bạn / khách. Mặc định blogger nhãn phụ tùng điện toán đám mây không phải là quá hấp dẫn, vì vậy hôm nay chúng tôi sẽ chia sẻ một kỹ thuật đơn giản để tùy biến blogger Labels cloud widget Blogger.Dưới đây là một thủ thuật nhỏ giúp chỉnh sửa Labels cloud widget Blogger.Hãy tìm hiểu cách tùy chỉnh Labels cloud widget Blogger.
Labels cloud widget Blogger

Cách thực hiện Labels cloud widget Blogger

Bước 1 :

 Chỉnh sửa widget label của bạn như hình dưới và nhấn save


Bước 2 :

Đăng nhập vào Template Blog và chỉnh sửa HTML

Bước 3 :

Bấm Ctrl + F và tìm thẻ ]]> </ b: skin> và thêm đoạn code sau đây trước nó
.sidebar .label-size {  position:relative;  text-transform: uppercase;  text-decoration:none;  font-size:12px;  font-family:Open Sans;  color:#fff!important;  }.sidebar .label-size a {  color:#fff!important;  font-weight:bold;  padding:8px 10px;  margin:0 6px 6px 0;  float:left;  display:block;  -moz-transition: all 0.4s ;  -o-transition: all 0.4s;  -webkit-transition: all 0.4s ;  -ms-transition: all 0.4s ;  transition: all 0.4s ;}.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

Bước 4 : 

Nhấn lưu template và kiểm tra thành quả.

0 nhận xét:

Đăng nhận xét