Hướng Dẫn Thêm Label Trên Thumbnail Cho Blogspot

Xin chào tất cả các bạn nhận được một lời đề nghị viết bài này mình xin phép viết bài HD thêm Label trên Thumbnail Cho Blogspot khá đẹp.


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'><div class='label-tag'><b:ifcond='data:label.name == &quot;PSD BÌA&quot;'><a href='/search/label/PSD BÌA'> <span class='tag-name'>ẢNH BÌA</span></a></b:if><b:if cond='data:label.name == &quot;TEMPLATE BLOGSPOT&quot;'><a href='/search/label/TEMPLATE BLOGSPOT'><span class='tag-name'>TEMPLATE BLOGSPOT</span></a></b:if><b:if cond='data:label.name == &quot;THỦ THUẬT BLOGSPOT&quot;'><a href='/search/label/THỦ THUẬT BLOGSPOT'> <span class='tag-name'>THỦ THUẬT BLOGGER</span></a></b:if><b:if cond='data:label.name == &quot;Tiện ích&quot;'><ahref='/search/label/Tiện ích'><span class='tag-name'>Tiện ích</span></a></b:if><b:ifcond='data:label.name == &quot;Công cụ&quot;'><a href='/search/label/Công cụ'><span class='tag-name'>Công cụ</span></a></b:if><b:if cond='data:label.name == &quot;THỦ THUẬT FACEBOOK&quot;'><a href='/search/label/THỦ THUẬT FACEBOOK'><span class='tag-name'>THỦ THUẬT FACEBOOK</span></a></b:if><b:if cond='data:label.name == &quot;Gái xinh&quot;'><ahref='/search/label/Gái xinh'><span class='tag-name'>Gái xinh</span></a></b:if><b:ifcond='data:label.name == &quot;ẢNH ĐẸP&quot;'><a href='/search/label/ẢNH ĐẸP'><span class='tag-name'>ẢNH ĐẸP</span></a></b:if><b:if cond='data:label.name == &quot;PSD&quot;'><ahref='/search/label/PSD'><span class='tag-name'>PSD</span></a></b:if><b:if cond='data:label.name == &quot;CHIA SẼ&quot;'><a href='/search/label/CHIA SẼ'><span class='tag-name'>CHIA SẼ</span></a></b:if></div></b:loop></b:if>
                ảnh minh họa

Bước 2: Tiếp đến thêm đoạn code bên dưới vào blog trước thẻ ]]></b:skin>

.tag-name{    border-radius0 20px 20px 0;font600 15px Roboto Condensed;background#d86565;color#fff;display: inline-block;margin20px0;position: absolute;padding5px 17px 5px 10px;}.label-tag{font-size:22px;width:170px;height:42px;line-height:45px;position:absolute;top:0;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 !!  

Duy Phương Designer - Developer

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 nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !

Không có nhận xét nào