Tạo icon label trên thumbnail cho blog

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!

Share this post