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. ...

Tác giả: Lê Bá Long
Xuất bản: 9/24/2018

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:if cond='data:label.name == "PSD BÌA"'><a href='/search/label/PSD BÌA'> ẢNH BÌA</a></b:if><b:if cond='data:label.name == "TEMPLATE BLOGSPOT"'><a href='/search/label/TEMPLATE BLOGSPOT'>TEMPLATE BLOGSPOT</a></b:if><b:if cond='data:label.name == "THỦ THUẬT BLOGSPOT"'><a href='/search/label/THỦ THUẬT BLOGSPOT'> THỦ THUẬT BLOGGER</a></b:if><b:if cond='data:label.name == "Tiện ích"'><a href='/search/label/Tiện ích'>Tiện ích</a></b:if><b:if cond='data:label.name == "Công cụ"'><a href='/search/label/Công cụ'>Công cụ</a></b:if><b:if cond='data:label.name == "THỦ THUẬT FACEBOOK"'><a href='/search/label/THỦ THUẬT FACEBOOK'>THỦ THUẬT FACEBOOK</a></b:if><b:if cond='data:label.name == "Gái xinh"'><a href='/search/label/Gái xinh'>Gái xinh</a></b:if><b:if cond='data:label.name == "ẢNH ĐẸP"'><a href='/search/label/ẢNH ĐẸP'>ẢNH ĐẸP</a></b:if><b:if cond='data:label.name == "PSD"'><a href='/search/label/PSD'>PSD</a></b:if><b:if cond='data:label.name == "CHIA SẼ"'><a href='/search/label/CHIA SẼ'>CHIA SẼ</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-radius: 0 20px 20px 0;font: 600 15px Roboto Condensed;background: #d86565;color: #fff;display: inline-block;margin: 20px 0;position: absolute;padding: 5px 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 !!

source: Toishare

Mod lại giống: Hồng Hải Blog