» » » Tiện ích Labels Cloud nhiều màu sắc đẹp cho blogspot

Tiện ích Labels Cloud nhiều màu sắc đẹp cho blogspot

Để cải thiện blogger trở nên chuyên nghiệp hơn là tốt nhất. Bởi vì có rất nhiều lý do cho việc này giống như nhận được sự chấp thuận của các công ty quảng cáo lớn như Google Adsense và BuySellAds. Có một số mẫu chuyên nghiệp trên mạng Internet mà chúng ta có thể sử dụng, nhưng nó có thể không có tính độc đáo, vì họ đang làm cho tất cả mọi người sủ dụng. Sau template, vài thứ cũng quan trọng như các widget chuyên nghiệp Labels hoặc Tags widget, Popular Posts widget, Sharing xã hội, bài viết liên quan vv Nếu bạn đủ thông minh trong việc thiết kế web bạn có thể dễ dàng mang lại tính chuyên nghiệp cho blog của bạn, nhưng nếu không thì đã có những widget tuyệt vời cho bạn trên internet. Hôm nay, trong bài viết này, chúng ta sẽ làm một tinh chỉnh với các blog sẽ làm đẹp chủ đề blog của chúng ta một chút.

Labels Cloud Widget

Colorful Flat UI Labels Cloud Widget


Bước 1: thêm Labels Cloud Widget
  • Go To Blogger => Layout => Thêm một Gadget
  • Chọn "Labels" Widget.
  • Hãy Cài đặt như hình dưới đây và "Save"


 Bước 2:
  • Go To Blogger => Template => Sao lưu mẫu của bạn
  • Nhấp vào Chỉnh sửa HTML và Tìm thẻ ]]> </ b: skin>
  • Sao chép và dán đoạn mã sau phía trên ]]> </ b: skin>


.sidebar .label-size {

  position:relative;

  text-transform: uppercase;

  text-decoration:none;

  font-size:13px;

  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-bottom:3px solid #127F69;}

.sidebar .label-size-1 a:hover {background:#16a085;}

.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}

.sidebar .label-size-2 a:hover {background:#2980b9;}

.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}

.sidebar .label-size-3 a:hover {background:#27ae60}

.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}

.sidebar .label-size-4 a:hover {background:#8e44ad}

.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}

.sidebar .label-size-5 a:hover {background:#c0392b}

Chúc mừng bạn đã tạo xong colorful Flat UI labels cloud widget. Chúc bạn thành công!
Đi lên