Hiển thị tên nhãn (label) trên ảnh thumbnail bài viết ở trang chủ và trang index Blogger

Display the label name on the article thumbnail on the home page and the index page for Blogger

Thủ thuật sau đây sẽ giúp bạn hiển thị tên nhãn (label) trên ảnh thumbnail bài viết ở trang chủ và trang index cho Blogger. Nó giúp cho bạn dễ dàng phân loại bài viết thuộc chuyên mục nào mà không cần đến Javascript nặng nề do thủ thuật chỉ cần một chút CSS là đủ.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.post .label-info {position:absolute;top:0;left:0;margin:0 auto;width:auto;z-index:1;}
.label-info a{margin-right:5px;background:rgba(34,34,34,0.5);color:#fff;font-size:13px;display:block;float:left;padding:4px 12px;transition: all .3s ease-out;}
.label-info a:hover{background:#222;color:#fff;}
.label-info a:nth-child(n+3){display:none;}
@media only screen and (max-width:640px){
.label-info {display:none;}}

Chỉnh sửa: .label-info a:nth-child(n+3){display:none;} thành .label-info a:nth-child(n+2){display:none;} nếu muốn hiển thị một label duy nhất (giống Iris Tips), muốn hiển thị 3 label thì sửa thành .label-info a:nth-child(n+4){display:none;}

Thêm: .label-info a:first-child{background:rgba(254,109,70,0.5)}; nếu muốn hiển thị màu sắc khác cho label đầu tiên.

2Tìm đến dòng <b:includable id='post' var='post'> nhìn xuống dưới đó bạn thẻ tìm thấy dòng code <article class='post hentry hoặc <div class='post hentry và hãy dán đoạn HTML sau đây vào sau dòng code đó (post hentry).

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:post.labels'>
<span class='label-info'> 
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</span>
</b:if>
</b:if>

Vậy là xong rồi đấy. Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm