Trang Chính1
Tùy biến nhãn ở cuối bài viết Blogger 18/01/12, 10:13 pm
 |  |  |
 | ![[KiNg]_[PiN]-BB](https://2img.net/u/3413/17/90/42/avatars/1-90.jpg) |  |
 |  |  |
[KiNg]_[PiN]-BB
Giới Tính : 
Join : 24/08/2011
Tuổi : 30
Địa Chỉ : Hà Nội
Bài chém : 372
Tiền : 2147657807
like : 3Ở sau phần cuối bài viết (post footer) trên Blogger thường có liên
kết Nhãn (Labels) để cho biết bài viết thuộc nhãn nào. Ở đây bạn có thể
đổi từ “Nhãn” thành “Chuyên mục” để tạo sự chuyên nghiệp hơn cho blog
của bạn, ngoài ra bạn có thể tùy biến màu sắc cho liên kết nhãn để làm
cho nó có vẻ đẹp hơn.
Trước tiên Đăng nhập Blogger, vào Thiết kế (Design) >> Chỉnh sửa
HTML (Edit HTML) chọn Mỏ rộng mẫu tiện ích (Expand Widget Templates).
Tìm và thêm vào phần được đánh dấu màu đỏ theo đoạn code dưới đây.
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href=label.url' rel='tag'><span class='chuyenmuc'><data:label.name/></span></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" +
data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</b:if>
</div>
Nếu bài viết thuộc nhiều nhãn thì có thể thay dấu phẩy phân cách giữa
các nhãn bằng một biểu tượng nào đó, ở đây tôi thay bằng biểu tượng ngôi
sao, thì thay dòng
<b:if cond='data:label.isLast != "true"'> , </b:if>
bằng dòng code sau:
<b:if cond='data:label.isLast != "true"'><span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">☆</span></b:if>
Tiếp theo chúng ta cần định thuộc tính CSS cho liên kết nhãn, đặt đoạn code sau đây vào trước dòng ]]></b:skin>.
.chuyenmuc {
padding:4px;
color:#ffffff;
opacity:0.6;
text-shadow:0 3px 2px #000000;
background:none repeat scroll 0 0 #990000;
}
.chuyenmuc: hover {
opacity:0.9;
}
Nếu bạn biết về CSS thì có thể điều chỉnh thuộc tính màu sắc trong đoạn
code trên. Nếu muốn đẹp hơn một chút thì sử dụng đoạn code dưới đây.
.chuyenmuc {
padding:4px;
color:#ffffff;
-moz-border-radius: 5px 5px 5px 5px;
background:none repeat scroll 0 0 #990000;
text-shadow: -1px -1px 1px #555;
-moz-box-shadow: 3px 3px 3px #000000;
}
.chuyenmuc:hover {
opacity:0.9;
}
