Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB



Ở 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=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;

}

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Free blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải