Tạo ribbon ở góc đẹp cho Blogspot bằng CSS

Tạo ribbon ở góc trái đẹp cho Blogspot bằng CSS

Chèn CSS

.ribbon-vip{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}
.ribbon-vip span{font-size:12px;font-weight:bold;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);width:100px;display:block;background:#79A70A;background:linear-gradient(#3498DB 0%,#3498DB 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;left:-21px}
.ribbon-vip span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #3498DB;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #3498DB}
.ribbon-vip span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #3498DB;border-bottom:3px solid transparent;border-top:3px solid #3498DB}

Chèn HTML

<div class='ribbon-vip'><span>nội dung</span></div>

Result


Chú ý: nhớ chỉnh sửa vị trí left -5px,top -5px cho phù hợp nhé
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Lại còm men đầu nũ òi :))

      Trả lờiXóa
    2. Em đag chơi game này. Em cũng áp dụng cái này vào blog share template ( blog thử nghiệm) của e

      Trả lờiXóa
    3. a ơi chỉ e làm với đc k ạ
      e làm cái chữ nó toàn ở trên cùng

      Trả lờiXóa
    4. nhưng mà chèn đoạc [code]class='ribbon-vip'[/code] vào đâu á bác :D

      Trả lờiXóa
      Trả lời
      1. Đây chỉ là bài hướng dẫn tạo ribbon thôi, còn để chèn vào blogspot như bacsiwindows thì phải áp dụng thẻ điều kiện nữa nhé bạn, có thể 1 bài khác hướng dẫn cách làm.

        Xóa