Tùy chỉnh nhãn (Labels) cho blogspot V2 - Thủ thuật

Thủ thuật hôm nay mình giới thiệu tới các bạn là phiên bản 2 của thủ thuật tùy chỉnh labels cho blogspot. Ở Phiên bản 1 tại bài viết Tùy chỉnh nhãn cho blogger V1 mình đã giới thiệu tới các bạn.
Trong cách làm thủ thuật này cũng tương tự như phiên bản 1. Mình hướng dẫn lại cách làm:

Cách làm thủ thuật:
Bước 1: Vào Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> Nhãn (Labels)
Bước 2: Tùy chỉnh thiết lập tiện ích Labels theo lựa chọn hình dưới đây.

Bước 3:
- Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) -> Mở rộng mẫu tiện ích ( Expand Widget Templates ) ->
- Tìm tới ]]></b:skin>  và dán Code CSS dưới đây ngay trên nó
CODE CSS

/* Hướng dẫn thủ thuật: http://itviet360.com */
#textwidget {
color: #666;
font-size: 0.925em;
font-style: italic;
line-height: 1.6em
}

a.tag {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background: #f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px #ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none
}

a.tag:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
color: #000;
border-color: #444
}

.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid #000
}
/* Hướng dẫn thủ thuật: http://itviet360.com */

- Tiếp theo tìm tới đoạn

<b:widget id='Label1' locked='false'

cho tới

</b:widget>

và thay thế cả đoạn đó bằng:

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget>

Sau đó lưu mẫu và xem kết quả :)