Tạo icon label trên thumbnail cho blog

Bài viết liên quan

Có thể bạn cần:

Chào các bạn hôm nay mình sẽ hướng dẫn cho các bạn thêm icon trên thumbnail nhìn rất độc đáo cho trang blog

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Tìm phần thumbnail rồi thêm đoạn code bên dưới vào nó

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Blogger&quot;'>
<a href='/search/label/Blogger'> 
<span class='label-tag blogger'><i aria-hidden='true' class='fa fa-file-code-o'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Facebook&quot;'>
<a href='/search/label/Facebook'>
<span class='label-tag facebook'><i aria-hidden='true' class='fa fa-facebook'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Windows&quot;'>
<a href='/search/label/Windows'> 
<span class='label-tag windows'><i aria-hidden='true' class='fa fa-windows'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;PSD&quot;'>
<a href='/search/label/PSD'>
<span class='label-tag psd'><i aria-hidden='true' class='fa fa-file-image-o'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Tips&quot;'>
<a href='/search/label/Tips'>
<span class='label-tag tips'><i aria-hidden='true' class='fa fa-cog'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Write&quot;'>
<a href='/search/label/Write'>
<span class='label-tag write'><i aria-hidden='true' class='fa fa-pencil'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Gift&quot;'>
<a href='/search/label/Gift'>
<span class='label-tag gift'><i aria-hidden='true' class='fa fa-gift'/></span>
</a>
</b:if>
<b:if cond='data:label.name == &quot;Photoshop&quot;'>
<a href='/search/label/Photoshop'>
<span class='label-tag photoshop'><i aria-hidden='true' class='fa fa-paint-brush'/></span>
</a>
</b:if>
</b:loop>
</b:if>

Bước 2: Tiếp đến thêm đoạn css bên dưới lên ]]></b:skin>

.label-tag{font-size:22px;width:33px;height:42px;line-height:45px;text-align:center;position:absolute;top:0;left:8px;box-sizing:border-box;color:#fff;z-index:2;border-radius:0 0 3px 3px}
.label-tag i{font-size:12px;color:#fff;border:1px solid;border-radius:50%;padding:0;height:23px;width:23px;text-align:center;line-height:22.5px}
.label-tag.windows{background-color:#0077db}
.label-tag.wordpress{background-color:#0087be}
.label-tag.blogger{background-color:#ff8000}
.label-tag.facebook{background-color:#4267b2}
.label-tag.psd{background-color:#ff5722}
.label-tag.tips{background-color:#D80F16}
.label-tag.write{background-color:#80b810}
.label-tag.gift{background-color:#673ab7}
.label-tag.photoshop{background-color:#ff5722}

Chúc các bạn thành công!