Nổi bật bài viết mới nhất với CSS Ribbon

Mặc định bài viết mới nhất luôn là bài xuất hiện đầu tiên ở trang chủ, nhưng với 1 layout dạng như grid thì nó lại không được nổi bật cho lắm, vì thế ta có thể phác họa ra ý tưởng thêm một chút gì đó cho nó thật nổi bật để lôi kéo người dùng click vào. CSS Ribbon là một kỹ thuật khá hay, kết hợp với thẻ điều kiện của blog ta sẽ làm cho bài viết mới nhất trở nên quý tộc hơn

Trước khi bắt đầu thủ thuật, tôi yêu cầu bạn phải xác định được đâu là phần nội dung lặp hiển thị bài đăng của widget Blog1, thường thì nó nằm trong div có class .blog-posts nhưng tùy người viết theme mà nó có thể bị thay đổi nên chắc ăn bạn hãy F12 kiểm tra phần tử để xác định được phần tử sẽ được chèn ribbon, ví dụ blog của tôi sẽ là phần tử .posts đầu tiên

Code Markup

Như đã trình bày, bài mới nhất là bài đầu tiên tại trang chủ nên phần xml sẽ bao gồm 2 điều kiện trên.

Cách 1: sử dụng trực tiếp thẻ điều kiện của blog

Blogger có cung cấp cho ta thẻ để lọc ra bài đầu tiên (data:post.isFirstPost), code có dạng (lưu ý chỉ chèn phần tôi comment)

<div class='posts'>

      <!-- Start filter -->
          <b:if cond='data:post.isFirstPost and data:view.isHomepage'>
              <b:class name='lastest-post'/>
              <div class='ribbon-pre'><span>New</span></div>
           </b:if>
      <!-- End filter -->
....
</div>

Cách 2: Phức tạp hóa vấn đề : sử dụng biến

Ta sẽ đặt một biến chạy trong vòng lặp data:posts và lấy ra bài đầu tiên data:i == 0, bằng cách này bạn có thể chỉ định style cho nhiều bài hơn, theo tôi bạn nên dùng cách này nếu muốn tùy biến sâu hơn (mỗi bài 1 style chẳng hạn)

* Thêm biến vào vòng lặp

Trong widget Blog1 bạn tìm thẻ <b:includable id='main' mở rộng ra tìm thẻ <b:loop values='data:posts' var='post'> (lưu ý nếu không giống 100% thì tìm thẻ giống 99% nhé, vì có thể một số người viết theme sẽ dùng biến hoặc thêm các thuộc tính khác) và thêm vào nó thuộc tính index='i', code sẽ thành

<b:includable id='main' var='this'>
...
    <b:loop index='i' values='data:posts' var='post'>
         ...
    </b:loop>
...    
</b:includable>

* Lọc ra bài viết đầu

<div class='posts'>

      <!-- Start filter -->
          <b:if cond='data:i == 0 and data:view.isHomepage'>
              <b:class name='lastest-post'/>
              <div class='ribbon-pre'><span>New</span></div>
           </b:if>
      <!-- End filter -->
....
</div>

Code CSS

Viết CSS cho ribbon

.posts.lastest-post {
    overflow: initial;
    position: relative;
}

.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(215, 15, 15, 0.85);
    position: absolute;
}

.ribbon-pre span::before {
    left: 0;
    border-left: 3px solid rgba(215, 15, 15, 0.85);
    border-right: 3px solid transparent;
}

.ribbon-pre span::after {
    right: 0;
    border-left: 3px solid transparent;
    border-right: 3px rgba(215, 15, 15, 0.85);
}

.ribbon-pre span {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 18px;
    letter-spacing: 0.02rem;
    -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
         transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 95px;
    display: block;
    background: rgba(215, 15, 15, 0.85);
    -webkit-box-shadow: 0 3px 10px -5px #000000;
       -moz-box-shadow: 0 3px 10px -5px #000000;
            box-shadow: 0 3px 10px -5px #000000;
    position: absolute;
    top: 19px;
    left: -21px;
}

CSS quan trọng cho class .posts.lastest-post
+ position: relative (định vị trí treo ribbon)
+ overflow : tuyệt đối không được để hidden vì nó sẽ ẩn đi 1 phần của ribbon, với một số template dù không có overflow: hidden nhưng ribbon vẫn bị ẩn, đó là do container chứa nó không đủ khoảng trống, lúc này bạn cần cân nhắc thêm margin hoặc padding để hiện đầy đủ ribbon

Ngoài ra các giá trị còn lại bạn tự chỉnh sửa theo ý thích của minh

Kết luận: Thủ thuật có vẻ đơn giản với các tiền bối blogger lâu năm, nhưng với người mới tôi thấy cũng hơi xoắn, vì thế đòi hỏi bạn cần có nền tảng kha khá về cấu trúc xml, sử dụng thẻ dữ liệu/điều kiện của blogger, cũng như css cứng để fix thằng overflow

Ok hi vọng bạn áp dụng thành công lên blog của mình, để lại bình luận nếu cần sự trợ giúp

Good Luck !