Hỗ trợ trực tuyến
Codedayroi.Net
© Copyright 2018 Code đây rồi

Tạo icon label trên thumbnail cho blog

Demo code
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 code bên dưới vào blog
.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!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...