[TUT] Tạo icon label trên thumbnail cho blog

Hướng dẫn bình luận

Chèn link

Sử dụng thẻ <a href='LINK'>TÊN_HIỂN_THỊ</a>

Chèn hình ảnh

[img] LINK_ANH [/img] - sử dụng công cụ bên dưới để upload ảnh.

Định dạng chữ

Chữ in đậm 
 Chữ in nghiêng 
 Chữ gạch chân 
<strike> ~~Chữ gạch ngang~~ </strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Đã hiểu

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.

''nguồn mình lấy bên Code đây rồi!''

Demo code

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 trước thẻ ]]></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!

=> Có thắc mắc gì thì để lại cmt phía dưới nhé!

About Me