Thêm Flat tag Colorful cực đẹp cho blogspot

Tag mặc định trong blogspot khá đơn điệu nên bài viết này mình muốn chia sẻ các bạn một số đoạn css để tinh chỉnh tag cloud dạng flat khá thân thiện và đẹp mắt.

Thêm tag cloud flat màu sắc cho blogspot

Đầu tiên các bạn vào bố cục (Layout) > Chọn “Labels” Widget và chọn như hình bên dưới

Tiếp đó thêm đoạn mã css sau vào sau: ]]></b:skin>

/* Flat Labels Cloud By thuthuatvip.com —————- */ 

.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}

Sau khi thêm áp dụng cho blog bạn sẻ nhìn thấy style nó như thế này

Hy vọng bạn sẻ thích style này!