MENU 
Sản phẩm-chipkool.tk.png)
Trang chủ
Nổi bậc
Tiện ích-chipkool.tk.png)
Tài khoản
Tác vụ
YOUTUBE
NHẠC
Trang chủ
Tùy biến nhãn ở cuối bài viết Blogger
Thứ Năm, 9 tháng 12, 2010
Ở 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='data: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>
<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='data: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;
}
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;
}
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;
}
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Lên trên
Tổng số Bình luận [ 0]
Đăng nhận xét