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!

5
4
3
2
1

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019