Tạo ribbon bài đăng cho các nhãn chỉ định

Khi truy cập 1 vài trang bán template bạn sẽ thường hay bắt gặp một số bài viết được làm nổi bật bởi 1 biểu tượng duy băng ở góc, trong css người ta thường gọi nó là ribbon. Ribbon có rất nhiều kiểu, trong bài này tôi sẽ hướng dẫn bạn cách tạo ribbon như ảnh trên áp dụng cho các nhãn được bạn chỉ định

Xem demo

demo
Thủ thuật này rất đơn giản, chỉ cần bạn nắm vững kiến thức về css và 1 chút về thẻ điều kiện blogger là ok. Và lưu ý là bài viết này tôi chỉ hướng dẫn cho những bạn dùng template hiển thị bài viết tại trang index theo kiểu "auto read more no js" thôi nhé

Bước 1: Xác định class chứa ảnh thumbnail. Ví dụ với temp của tôi là .thumb, 1 số thì là .block-image, .thumbnail,... tùy. Chèn code HTML vào bên trong nó

+ Áp dụng ribbon cho 1 label

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name == &quot;label-name&quot;'>
        <div class='ribbon-pre'><span>Premium</span></div>
    </b:if>
</b:loop>

+ Áp dụng ribbon cho nhiều label

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:post.labels any (l =&gt; l.name in {&quot;label-1&quot;,&quot;label-2&quot;})'>
        <div class='ribbon-pre'><span>Premium</span></div>
    </b:if>
</b:loop>

Bạn thay các label-name thành tên label bạn chỉ định

Bước 2: Viết CSS

/* CSS bắt buộc cho class thumbnail chứa ribbon, trong ví dụ này của tôi là .thumb */
.thumb{position:relative}

/* CSS bắt buộc cho ribbon */
.ribbon-pre{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}
.ribbon-pre span::after,.ribbon-pre span::before{content:"";top:100%;z-index:-1;border-bottom:3px solid transparent;border-top:3px solid rgba(106,91,222,.8);position:absolute}
.ribbon-pre span::before{left:0;border-left:3px solid rgba(106,91,222,.8);border-right:3px solid transparent}
.ribbon-pre span::after{right:0;border-left:3px solid transparent;border-right:3px rgba(106,91,222,.8)}
.ribbon-pre span{font-size:13px;font-weight:700;color:#FFF;text-align:center;line-height:19px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);width:100px;display:block;background:rgba(106,91,222,.8);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;left:-21px}

Vậy là xong rồi, việc của bạn khi viết bài mà muốn nó có ribbon thì đặt cho nó cái label mà bạn đã set trong bước 1

Good Luck !