Hướng Dẫn Tùy Biến Giao Diện Nhãn (Label) CSS Đẹp cho Blogger Blogspot

Nhãn (Label) có thể được xem là chuyên mục cũng có thể được xem là Tag từ khóa của 1 bài viết. Thường thì người dùng blogspot sẽ dùng Label làm chuyên mục trong website. Và bài viết này sẽhướng dẫn các bạn tùy biến giao diện label từ widget gốc có sẵn của blogger

Bài viết này sử dụng tư liệu của kenhcs.com
#1 Tùy biến kiểu 1

CÁC BƯỚC CÀI ĐẶT

- Vào bố bục tạo tiện ích Label và cài đặt như sau:

- Vào Mẫu > Chỉnh sửa HTML

- Thêm đoạn CSS sau vào trước thẻ ]]>

.widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
  padding: .25em 0;
  margin: 0;
  text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}

- Lưu mẫu và kiểm tra kết quả.

#2 Tùy biến kiểu 2

THÊM CSS CHO LABEL #2

- Thêm đoạn css sau trên ]]>
 

.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

CHỈNH SỬA WIDGET LABEL #2

- Thêm widget Label cho Blog
- Vào Mẫu > Chỉnh sửa HTML
- Tìm đến tiện ích Label* (* là số thứ tự của widget label, nếu blog chỉ có 1 widget label thì * là 1)
- Tìm đoạn code sau trong widget 

 values='data:labels' var='label'>
  


     cond='data:blog.url == data:label.url'>
       expr:dir='data:blog.languageDirection'>.name/>
    
       expr:dir='data:blog.languageDirection' expr:href='data:label.url'>.name/>
    
     cond='data:showFreqNumbers'>
       dir='ltr'>(.count/>)
    
  

- Thay thế đoạn code vừa tìm thành đoạn code dưới đây 

 index='i' values='data:labels' var='label'>
   cond='data:i < 5'>
    
 expr:href='data:label.url' rel='tag'>.name/> cond='data:showFreqNumbers'>.count/>

  

- Thay 5 bằng số label muốn hiển thị
- Lưu mẫu
- Vào bố cục và chỉnh tiện ích widget như sau:

ẨN DẤU CHẤM Ở LABEL TRONG BLOGSPOT

Dấu chấm ở trước, sau hay giữa label ở một số template khi bạn tiến hành chỉnh sửa và không may gặp phải và bạn không tìm được cách khắc phục? Không sao với thủ thuật "Ẩn dấu chấm ở label trong blogspot" bạn sẽ dễ dàng khắc phục được vấn đề này chỉ với vài bước đơn giản.

Ẩn dấu chấm ở label trong blogspot

Các dấu chấm này thường nằm trong các thẻ

,
• hoặc các thuộc tính ul, il của các class. Để ẩn dấu chấm đi các bạn thực hiện như sau:

-Vào Mẫu > Chỉnh sửa HTML

- Tìm đoạn code tương tự như đoạn code sau:

.Label li {
overflow: hidden;
width: 50%;
float: left;
padding: 0;
box-shadow: 0 -1px rgba(0,0,0,0.15);
}

- Thêm thuộc tính list-style: none; vào đoạn code đó, code sẽ trở thành như sau:

.Label li {
overflow: hidden;
width: 50%;
float: left;
padding: 0;
box-shadow: 0 -1px rgba(0,0,0,0.15);
list-style: none;
}

- Tùy thuộc vào chỗ hiện dấu chấm mà class .Label có thể thay đổi.
- Lưu mẫu và kiểm tra
P/s: Nếu không áp dụng được các bạn có thể để lại comments, mình sẽ trả lời trong thời gian ngắn nhất.