Add CSS3 Style Labels To Blogger

Bài viết hướng dẫn cách add CSS3 vào Label (Category) trên Blog của bạn giống như hình dưới đây

Click Here to view DEMO CSS3 Style Labels

Add Gadget: Show Labels

Nếu trên Blog của bạn đã sử dụng tính năng này thì bỏ qua, còn không thì bạn phải thêm tiện ích Show Label ra

Truy cập Bố cục >>> Thêm tiện ích >>> Nhãn

Nhớ tích chọn Cloud như trong hình

Edit HTML

Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.

Hướng dẫn:

Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML

Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>

Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>

/*CSS3 Bricks Style Labels*/
#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
}
/*CSS3 Bricks Style Labels By*/

Bước 4: Tìm tiếp đoạn mã bắt đầu bằng đoạn mã sau <b:widget id='Label1' locked='false'

Chú ý đoạn mã cần tìm sẽ có dạng

<b:widget id='Label1' locked='false' ...
...
</b:widget>

Bạn xóa toàn bộ phần code này và thay bằng đoạn code sau đây:

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