Tùy biến nhãn ở cuối bài viết Blogger

Ở 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 == &quot;item&quot;'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='chuyenmuc'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' 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 != &quot;true&quot;'> , </b:if>

bằng dòng code sau:

<b:if cond='data:label.isLast != &quot;true&quot;'><span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#9734;</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;
}